Implement function that projects to a Bezier curve (#688)

* UI section for the projection function

* added bezier project impl

* Fix project function and add test for it

* Search method

* Re-use comptued distances

* Update comments

* rebase project changes

* clean up tests and library code

* use built-in functions and destructure syntax

* Remove redundant project implementation

* Fix typo, add lut size as parameter and add constant

* address comments

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
This commit is contained in:
Hannah Li
2022-07-01 18:22:17 -04:00
committed by GitHub
co-authored by Thomas Cheng
parent 3476d5a203
commit 4775a23c17
7 changed files with 128 additions and 10 deletions
+11 -1
View File
@@ -21,7 +21,7 @@
import { defineComponent, markRaw } from "vue";
import { drawText, drawPoint, drawBezier, drawLine, getContextFromCanvas, drawBezierHelper, COLORS } from "@/utils/drawing";
import { WasmBezierInstance } from "@/utils/types";
import { Point, WasmBezierInstance } from "@/utils/types";
import ExamplePane from "@/components/ExamplePane.vue";
import SliderExample from "@/components/SliderExample.vue";
@@ -226,6 +226,16 @@ export default defineComponent({
],
},
},
{
name: "Project",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation: Point | null): void => {
if (mouseLocation != null) {
const context = getContextFromCanvas(canvas);
const closestPoint = JSON.parse(bezier.project(mouseLocation.x, mouseLocation.y));
drawLine(context, mouseLocation, closestPoint, COLORS.NON_INTERACTIVE.STROKE_1);
}
},
},
],
};
},