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

Implement Bezier curve reduce function (#711)

Browse Source 
* fixed extrema bug and added reduce impl

Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com>
Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>

* Stylistic changes related to reduce

* Fixed reduce splitting bug causing panic

* Added shortcuts and simplified reduce

* Stylistic changes per review

* address comments

* Removed color gradient function and added consts

* Tweaks

* Change colors faster

* Don't drop on mouseout

Co-authored-by: Thomas Cheng <contact.chengthomas@gmail.com>
Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com>
Co-authored-by: Linda Zheng <ll2zheng@uwaterloo.ca>
Co-authored-by: Hannah Li <hannahli2010@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Rob Nadal
2022-07-06 11:20:28 -07:00
committed by GitHub
co-authored by Rob Nadal Linda Zheng Hannah Li Thomas Cheng Keavon Chambers
parent f3d5028107
commit b4ada6affd
7 changed files with 142 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bezier-rs/docs/interactive-docs/src/App.vue
+10
View File
@@ -266,6 +266,16 @@ export default defineComponent({
});
},
},
{
name: "Reduce",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
const context = getContextFromCanvas(canvas);
const curves: Point[][] = JSON.parse(bezier.reduce());
curves.forEach((points, index) => {
drawBezier(context, points, null, { curveStrokeColor: `hsl(${40 * index}, 100%, 50%)`, radius: 3.5, drawHandles: false });
});
},
},
],
};
},
bezier-rs/docs/interactive-docs/src/components/BezierDrawing.ts
+8 -4
View File
@@ -59,10 +59,9 @@ class BezierDrawing {
this.dragIndex = null; // Index of the point being moved
this.canvas.addEventListener("mousedown", this.mouseDownHandler.bind(this));
this.canvas.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
this.canvas.addEventListener("mouseup", this.deselectPointHandler.bind(this));
this.canvas.addEventListener("mouseout", this.deselectPointHandler.bind(this));
this.canvas.addEventListener("mousedown", (e) => this.mouseDownHandler(e));
this.canvas.addEventListener("mousemove", (e) => this.mouseMoveHandler(e));
this.canvas.addEventListener("mouseup", () => this.deselectPointHandler());
this.updateBezier();
}
@@ -71,6 +70,11 @@ class BezierDrawing {
}
mouseMoveHandler(evt: MouseEvent): void {
if (evt.buttons === 0) {
this.deselectPointHandler();
return;
}
const mx = evt.offsetX;
const my = evt.offsetY;
bezier-rs/docs/interactive-docs/src/utils/drawing.ts
+10 -5
View File
@@ -70,9 +70,10 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
handleStrokeColor: COLORS.INTERACTIVE.STROKE_1,
handleLineStrokeColor: COLORS.INTERACTIVE.STROKE_1,
radius: DEFAULT_ENDPOINT_RADIUS,
drawHandles: true,
...bezierStyleConfig,
};
// if the handle or handle line colors are not specified, use the same colour as the rest of the curve
// If the handle or handle line colors are not specified, use the same color as the rest of the curve
if (bezierStyleConfig.curveStrokeColor) {
if (!bezierStyleConfig.handleStrokeColor) {
styleConfig.handleStrokeColor = bezierStyleConfig.curveStrokeColor;
@@ -112,11 +113,15 @@ export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragI
}
ctx.stroke();
drawLine(ctx, start, handleStart, styleConfig.handleLineStrokeColor);
drawLine(ctx, end, handleEnd, styleConfig.handleLineStrokeColor);
if (styleConfig.drawHandles) {
drawLine(ctx, start, handleStart, styleConfig.handleLineStrokeColor);
drawLine(ctx, end, handleEnd, styleConfig.handleLineStrokeColor);
}
points.forEach((point, index) => {
const strokeColor = isIndexFirstOrLast(index, points.length) ? styleConfig.curveStrokeColor : styleConfig.handleStrokeColor;
drawPoint(ctx, point, getPointSizeByIndex(index, points.length, styleConfig.radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
if (styleConfig.drawHandles || isIndexFirstOrLast(index, points.length)) {
const strokeColor = isIndexFirstOrLast(index, points.length) ? styleConfig.curveStrokeColor : styleConfig.handleStrokeColor;
drawPoint(ctx, point, getPointSizeByIndex(index, points.length, styleConfig.radius), index === dragIndex ? COLORS.INTERACTIVE.SELECTED : strokeColor);
}
});
};
bezier-rs/docs/interactive-docs/src/utils/types.ts
+1
View File
@@ -33,4 +33,5 @@ export type BezierStyleConfig = {
handleStrokeColor: string;
handleLineStrokeColor: string;
radius: number;
drawHandles: boolean;
};