fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-30 20:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement functions to create a Bezier that goes through 3 specified points (#687)

Browse Source 
* Implement quadratic and cubic from points

* Catch edge cases and integrate `t` slider

* Add 2 sliders for cubic

* Create utils file for bezier-rs and address other PR comments

* Rename variable and remove unnecessary ids

* Update rustdoc comments and rename variables

* Remove unnecessary file and refactor options for drawing beziers

* Address PR comments

* Update quadratic_through_points description

* Add wasm-pack to dependencies and change from spaces to tabs for indents

* Change strut to midpoint_separation, adjust sliders and section name

* Minor refactor
This commit is contained in:
Hannah Li
2022-06-29 20:52:09 -04:00
committed by GitHub
parent 79944b54c8
commit ee98908d88
13 changed files with 19471 additions and 19055 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bezier-rs/docs/interactive-docs/src/App.vue
+48 -5
View File
@@ -3,7 +3,14 @@
<h1>Bezier-rs Interactive Documentation</h1>
<p>This is the interactive documentation for the <b>bezier-rs</b> library. Click and drag on the endpoints of the example curves to visualize the various Bezier utilities and functions.</p>
<div v-for="(feature, index) in features" :key="index">
<ExamplePane :template="feature.template" :templateOptions="feature.templateOptions" :name="feature.name" :callback="feature.callback" />
<ExamplePane
:template="feature.template"
:templateOptions="feature.templateOptions"
:name="feature.name"
:callback="feature.callback"
:createThroughPoints="feature.createThroughPoints"
:cubicOptions="feature.cubicOptions"
/>
</div>
<br />
<div id="svg-test" />
@@ -22,7 +29,7 @@ import SliderExample from "@/components/SliderExample.vue";
// eslint-disable-next-line
const testBezierLib = async () => {
import("@/../wasm/pkg").then((wasm) => {
const bezier = wasm.WasmBezier.new_quad([
const bezier = wasm.WasmBezier.new_quadratic([
[0, 0],
[50, 0],
[100, 100],
@@ -55,6 +62,42 @@ export default defineComponent({
// eslint-disable-next-line
callback: (): void => {},
},
{
name: "Bezier through points",
// eslint-disable-next-line
callback: (): void => {},
createThroughPoints: true,
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
min: 0.01,
max: 0.99,
step: 0.01,
default: 0.5,
variable: "t",
},
],
},
cubicOptions: {
sliders: [
{
min: 0.01,
max: 0.99,
step: 0.01,
default: 0.5,
variable: "t",
},
{
min: 0,
max: 100,
step: 5,
default: 10,
variable: "midpoint separation",
},
],
},
},
{
name: "Length",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
@@ -150,8 +193,8 @@ export default defineComponent({
const context = getContextFromCanvas(canvas);
const bezierPairPoints = JSON.parse(bezier.split(options.t));
drawBezier(context, bezierPairPoints[0], null, COLORS.NON_INTERACTIVE.STROKE_2, 3.5);
drawBezier(context, bezierPairPoints[1], null, COLORS.NON_INTERACTIVE.STROKE_1, 3.5);
drawBezier(context, bezierPairPoints[0], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_2, radius: 3.5 });
drawBezier(context, bezierPairPoints[1], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
},
template: markRaw(SliderExample),
templateOptions: { sliders: [tSliderOptions] },
@@ -161,7 +204,7 @@ export default defineComponent({
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const trimmedBezier = bezier.trim(options.t1, options.t2);
drawBezierHelper(context, trimmedBezier, COLORS.NON_INTERACTIVE.STROKE_1, 3.5);
drawBezierHelper(context, trimmedBezier, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
},
template: markRaw(SliderExample),
templateOptions: {