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

Bezier-rs: Convert 'rotate' and 'de casteljau' wasm functions from canvas to SVG rendering (#793)

Browse Source 
* Convert rotate demo to svg

* Fix bugs in rotate

* Fix bugs in rotate

* Draft of decasteljau to svg

* fixed de casteljau points to_svg impl

* clean up wasm impl for de casteljau points

* Address Hannah's comments

* Nits

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Linda Zheng
2022-11-06 18:34:53 -08:00
committed by GitHub
co-authored by Thomas Cheng Keavon Chambers
parent 0e8ea262e4
commit 0342b35f79
2 changed files with 73 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/App.vue
+26 -43
View File
@@ -27,7 +27,7 @@
import { defineComponent, markRaw } from "vue";
import { WasmBezier } from "@/../wasm/pkg";
import { drawBezier, drawCircleSector, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
import { drawCircleSector, getContextFromCanvas } from "@/utils/drawing";
import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
import BezierExamplePane from "@/components/BezierExamplePane.vue";
@@ -356,52 +356,35 @@ export default defineComponent({
},
},
},
],
features: [
{
name: "De Casteljau Points",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const hullPoints: Point[][] = JSON.parse(bezier.de_casteljau_points(options.t));
hullPoints.reverse().forEach((iteration: Point[], iterationIndex) => {
const colorLight = `hsl(${90 * iterationIndex}, 100%, 50%)`;
iteration.forEach((point: Point, index) => {
// Skip the anchor and handle points which are already drawn in black
if (iterationIndex !== hullPoints.length - 1) {
drawPoint(getContextFromCanvas(canvas), point, 4, colorLight);
}
if (index !== 0) {
const prevPoint: Point = iteration[index - 1];
drawLine(getContextFromCanvas(canvas), point, prevPoint, colorLight);
}
});
});
},
template: markRaw(SliderExample),
templateOptions: { sliders: [tSliderOptions] },
},
{
name: "Rotate",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const rotatedBezier = JSON.parse(bezier.rotate(options.angle * Math.PI).get_points());
drawBezier(context, rotatedBezier, null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "angle",
min: 0,
max: 2,
step: 1 / 50,
default: 0.12,
unit: "π",
},
],
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI),
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [
{
variable: "angle",
min: 0,
max: 2,
step: 1 / 50,
default: 0.12,
unit: "π",
},
],
},
},
},
{
name: "De Casteljau Points",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.de_casteljau_points(options.t),
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [tSliderOptions],
},
},
},
],
features: [
{
name: "Arcs",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {