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

Bezier-rs: Convert intersection functions to SVG (#791)

Browse Source 
* Break handle of path being drawn by placing anchor on previous anchor with Pen tool (#814)

* Break path by placing anchor on previous one

* Fix offset on click without dragging

* Fix bug where ids reassigned from saved document

* Fix stuck overlay

Co-authored-by: Keavon Chambers <keavon@keavon.com>

* convert intersection functions to svg

* fixed nits

Co-authored-by: 0HyperCube <78500760+0HyperCube@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Jackie Chen
2022-11-06 18:14:44 -08:00
committed by GitHub
co-authored by Keavon Chambers 0HyperCube
parent 4622273b09
commit 0e8ea262e4
2 changed files with 152 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/other/bezier-rs-demos/src/App.vue
+69 -111
View File
@@ -27,7 +27,7 @@
import { defineComponent, markRaw } from "vue";
import { WasmBezier } from "@/../wasm/pkg";
import { drawBezier, drawCircleSector, drawCurve, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
import { drawBezier, drawCircleSector, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
import BezierExamplePane from "@/components/BezierExamplePane.vue";
@@ -43,6 +43,14 @@ const tSliderOptions = {
variable: "t",
};
const tErrorOptions = {
variable: "error",
min: 0.1,
max: 2,
step: 0.1,
default: 0.5,
};
export default defineComponent({
data() {
return {
@@ -288,6 +296,66 @@ export default defineComponent({
},
},
},
{
name: "Intersect (Line Segment)",
callback: (bezier: WasmBezierInstance): string => {
const line = [
[150, 150],
[20, 20],
];
return bezier.intersect_line_segment(line);
},
},
{
name: "Intersect (Quadratic)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
const quadratic = [
[20, 80],
[180, 10],
[90, 120],
];
return bezier.intersect_quadratic_segment(quadratic, options.error);
},
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [tErrorOptions],
},
},
},
{
name: "Intersect (Cubic)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => {
const cubic = [
[40, 20],
[100, 40],
[40, 120],
[175, 140],
];
return bezier.intersect_cubic_segment(cubic, options.error);
},
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [tErrorOptions],
},
},
},
{
name: "Intersect (Self)",
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
exampleOptions: {
[BezierCurveType.Quadratic]: {
sliderOptions: [tErrorOptions],
},
[BezierCurveType.Cubic]: {
customPoints: [
[160, 180],
[170, 10],
[30, 90],
[180, 140],
],
},
},
},
],
features: [
{
@@ -334,116 +402,6 @@ export default defineComponent({
],
},
},
{
name: "Intersect (Line Segment)",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
const context = getContextFromCanvas(canvas);
const line = [
{ x: 150, y: 150 },
{ x: 20, y: 20 },
];
const mappedLine = line.map((p) => [p.x, p.y]);
drawLine(context, line[0], line[1], COLORS.NON_INTERACTIVE.STROKE_1);
const intersections: Float64Array = bezier.intersect_line_segment(mappedLine);
intersections.forEach((t: number) => {
const p = JSON.parse(bezier.evaluate_value(t));
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
});
},
},
{
name: "Intersect (Quadratic Segment)",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const points = [
{ x: 20, y: 80 },
{ x: 180, y: 10 },
{ x: 90, y: 120 },
];
const mappedPoints = points.map((p) => [p.x, p.y]);
drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
const intersections: Float64Array = bezier.intersect_quadratic_segment(mappedPoints, options.error);
intersections.forEach((t: number) => {
const p = JSON.parse(bezier.evaluate_value(t));
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
});
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "error",
min: 0.1,
max: 2,
step: 0.1,
default: 0.5,
},
],
},
},
{
name: "Intersect (Cubic Segment)",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const points = [
{ x: 40, y: 20 },
{ x: 100, y: 40 },
{ x: 40, y: 120 },
{ x: 175, y: 140 },
];
const mappedPoints = points.map((p) => [p.x, p.y]);
drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
const intersections: Float64Array = bezier.intersect_cubic_segment(mappedPoints, options.error);
intersections.forEach((t: number) => {
const p = JSON.parse(bezier.evaluate_value(t));
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
});
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "error",
min: 0.1,
max: 2,
step: 0.1,
default: 0.5,
},
],
},
},
{
name: "Intersect (Self)",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const intersections: number[][] = JSON.parse(bezier.intersect_self(options.error));
intersections.forEach((tValues: number[]) => {
const p = JSON.parse(bezier.evaluate_value(tValues[0]));
drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
});
},
template: markRaw(SliderExample),
templateOptions: {
sliders: [
{
variable: "error",
min: 0.01,
max: 1,
step: 0.05,
default: 0.5,
},
],
},
customPoints: {
[BezierCurveType.Cubic]: [
[160, 180],
[170, 10],
[30, 90],
[180, 140],
],
},
curveDegrees: new Set([BezierCurveType.Cubic]),
},
{
name: "Arcs",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {