Beginnings of the bezier-rs math library (#662)

Co-authored-by: Thomas Cheng <35661641+Androxium@users.noreply.github.com> Co-authored-by: Robert Nadal <Robnadal44@gmail.com> Co-authored-by: ll2zheng <ll2zheng@uwaterloo.ca>
2026-10-02 10:58:11 +08:00 · 2022-06-16 17:50:58 -07:00
parent 04d6bd9190
commit 7275119f6e
30 changed files with 20185 additions and 2 deletions
@@ -0,0 +1,114 @@
+<template>
+	<div class="App">
+		<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 in features" :key="feature.id">
+			<ExamplePane :template="feature.template" :templateOptions="feature.templateOptions" :name="feature.name" :callback="feature.callback" />
+		</div>
+		<br />
+		<div id="svg-test" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from "vue";
+
+import { drawText, drawPoint, getContextFromCanvas } from "@/utils/drawing";
+import { WasmBezierInstance } from "@/utils/types";
+
+import ExamplePane from "@/components/ExamplePane.vue";
+import SliderExample from "@/components/SliderExample.vue";
+
+// eslint-disable-next-line
+const testBezierLib = async () => {
+	import("@/../wasm/pkg").then((wasm) => {
+		const bezier = wasm.WasmBezier.new_quad([
+			[0, 0],
+			[50, 0],
+			[100, 100],
+		]);
+		const svgContainer = document.getElementById("svg-test");
+		if (svgContainer) {
+			svgContainer.innerHTML = bezier.to_svg();
+		}
+	});
+};
+
+export default defineComponent({
+	name: "App",
+	components: {
+		ExamplePane,
+	},
+	data() {
+		return {
+			features: [
+				{
+					id: 0,
+					name: "Constructor",
+					// eslint-disable-next-line
+					callback: (): void => {},
+				},
+				{
+					id: 2,
+					name: "Length",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
+						drawText(getContextFromCanvas(canvas), `Length: ${bezier.length().toFixed(2)}`, 5, canvas.height - 7);
+					},
+				},
+				{
+					id: 3,
+					name: "Compute",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
+						const point = JSON.parse(bezier.compute(parseFloat(options)));
+						point.r = 4;
+						point.selected = false;
+						drawPoint(getContextFromCanvas(canvas), point, "DarkBlue");
+					},
+					template: markRaw(SliderExample),
+					templateOptions: {
+						min: 0,
+						max: 1,
+						step: 0.01,
+						default: 0.5,
+						variable: "t",
+					},
+				},
+				{
+					id: 4,
+					name: "Lookup Table",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: string): void => {
+						const lookupPoints = bezier.compute_lookup_table(Number(options));
+						lookupPoints.forEach((serPoint, index) => {
+							if (index !== 0 && index !== lookupPoints.length - 1) {
+								const point = JSON.parse(serPoint);
+								point.r = 3;
+								point.selected = false;
+								drawPoint(getContextFromCanvas(canvas), point, "DarkBlue");
+							}
+						});
+					},
+					template: markRaw(SliderExample),
+					templateOptions: {
+						min: 2,
+						max: 15,
+						step: 1,
+						default: 5,
+						variable: "Steps",
+					},
+				},
+			],
+		};
+	},
+});
+</script>
+
+<style>
+#app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+	margin-top: 60px;
+}
+</style>