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

Bezier-rs: Convert 'arcs' wasm function from canvas to SVG rendering (#833)

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

* Use svg format in wasm for arcs

* Update app.vue

* Fix arcs as svg

Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>

* Remove comments

* Reduce code duplication

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Linda Zheng
2022-11-06 23:04:30 -05:00
committed by Keavon Chambers
co-authored by Linda Zheng Thomas Cheng Hannah Li Keavon Chambers
parent 398f6618e4
commit 9eb2b9f6a3
3 changed files with 93 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/App.vue
+56 -58
View File
@@ -6,7 +6,8 @@
<div v-for="(feature, index) in bezierFeatures" :key="index">
<BezierExamplePane :name="feature.name" :callback="feature.callback" :exampleOptions="feature.exampleOptions" :triggerOnMouseMove="feature.triggerOnMouseMove" />
</div>
<div v-for="(feature, index) in features" :key="index">
<!-- TODO: Remove the below and all associated canvas-related code, then rename `bezierFeatures` to `features` -->
<div v-for="(feature, index) in ([] as any)" :key="index">
<ExamplePane
:template="feature.template"
:templateOptions="feature.templateOptions"
@@ -24,15 +25,13 @@
</template>
<script lang="ts">
import { defineComponent, markRaw } from "vue";
import { defineComponent } from "vue";
import { WasmBezier } from "@/../wasm/pkg";
import { drawCircleSector, getContextFromCanvas } from "@/utils/drawing";
import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
import { BezierCurveType, ExampleOptions, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
import BezierExamplePane from "@/components/BezierExamplePane.vue";
import ExamplePane from "@/components/ExamplePane.vue";
import SliderExample from "@/components/SliderExample.vue";
import SubpathExamplePane from "@/components/SubpathExamplePane.vue";
const tSliderOptions = {
@@ -296,6 +295,58 @@ export default defineComponent({
},
},
},
{
name: "Arcs",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.arcs(options.error, options.max_iterations, options.strategy),
exampleOptions: ((): Omit<ExampleOptions, "Linear"> => {
const sliderOptions = [
{
variable: "strategy",
min: 0,
max: 2,
step: 1,
default: 0,
unit: [": Automatic", ": FavorLargerArcs", ": FavorCorrectness"],
},
{
variable: "error",
min: 0.05,
max: 1,
step: 0.05,
default: 0.5,
},
{
variable: "max_iterations",
min: 50,
max: 200,
step: 1,
default: 100,
},
];
return {
[BezierCurveType.Quadratic]: {
customPoints: [
[50, 50],
[85, 65],
[100, 100],
],
sliderOptions,
disabled: false,
},
[BezierCurveType.Cubic]: {
customPoints: [
[160, 180],
[170, 10],
[30, 90],
[180, 160],
],
sliderOptions,
disabled: false,
},
};
})(),
},
{
name: "Intersect (Line Segment)",
callback: (bezier: WasmBezierInstance): string => {
@@ -384,59 +435,6 @@ export default defineComponent({
},
},
],
features: [
{
name: "Arcs",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const arcs: CircleSector[] = JSON.parse(bezier.arcs(options.error, options.max_iterations, options.strategy));
arcs.forEach((circleSector, index) => {
drawCircleSector(context, circleSector, `hsl(${40 * index}, 100%, 50%, 75%)`, `hsl(${40 * index}, 100%, 50%, 37.5%)`);
});
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "strategy",
min: 0,
max: 2,
step: 1,
default: 0,
unit: [": Automatic", ": FavorLargerArcs", ": FavorCorrectness"],
},
{
variable: "error",
min: 0.05,
max: 1,
step: 0.05,
default: 0.5,
},
{
variable: "max_iterations",
min: 50,
max: 200,
step: 1,
default: 100,
},
],
},
curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
customPoints: {
[BezierCurveType.Quadratic]: [
[50, 50],
[85, 65],
[100, 100],
],
[BezierCurveType.Cubic]: [
[160, 180],
[170, 10],
[30, 90],
[180, 160],
],
},
},
],
subpathFeatures: [
{
name: "Constructor",