fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-06 22:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Convert reduce() and offset() Bezier-rs wasm demo functions to render as SVG (#783)

Browse Source 
* convert reduce and offset wasm func to return svg

* address comments
This commit is contained in:
Thomas Cheng
2022-10-05 23:54:02 -04:00
committed by Keavon Chambers
parent 55f6d13daf
commit dccff784c5
3 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/App.vue
+21 -38
View File
@@ -267,6 +267,27 @@ export default defineComponent({
},
},
},
{
name: "Reduce",
callback: (bezier: WasmBezierInstance): string => bezier.reduce(),
},
{
name: "Offset",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [
{
variable: "distance",
min: -50,
max: 50,
step: 1,
default: 20,
},
],
},
},
},
],
features: [
{
@@ -423,16 +444,6 @@ export default defineComponent({
},
curveDegrees: new Set([BezierCurveType.Cubic]),
},
{
name: "Reduce",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
const context = getContextFromCanvas(canvas);
const curves: Point[][] = JSON.parse(bezier.reduce());
curves.forEach((points, index) => {
drawBezier(context, points, null, { curveStrokeColor: `hsl(${40 * index}, 100%, 50%)`, radius: 3.5, drawHandles: false });
});
},
},
{
name: "Arcs",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
@@ -484,34 +495,6 @@ export default defineComponent({
],
},
},
{
name: "Offset",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const curves: Point[][] = JSON.parse(bezier.offset(options.distance));
curves.forEach((points, index) => {
if (points.length === 2) {
drawLine(context, points[0], points[1], `hsl(${40 * index}, 100%, 50%)`);
} else {
drawCurve(context, points, `hsl(${40 * index}, 100%, 50%)`);
}
});
drawPoint(context, curves[0][0], 4, "hsl(0, 100%, 50%)");
drawPoint(context, curves[curves.length - 1][curves[0].length - 1], 4, `hsl(${40 * (curves.length - 1)}, 100%, 50%)`);
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "distance",
min: -50,
max: 50,
step: 1,
default: 20,
},
],
},
},
],
subpathFeatures: [
{