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

Implement curvature function in Bezier math library (#725)

Browse Source 
* bezier curvature

* change comment

Co-authored-by: Jackie Chen <jackiechen73>
This commit is contained in:
Jackie Chen
2022-07-29 21:58:16 -04:00
committed by GitHub
co-authored by Jackie Chen
parent b4070f9c90
commit 18871e5bbf
4 changed files with 53 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bezier-rs/docs/interactive-docs/src/App.vue
+21 -1
View File
@@ -25,7 +25,7 @@
<script lang="ts">
import { defineComponent, markRaw } from "vue";
import { drawBezier, drawBezierHelper, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
import { drawBezier, drawBezierHelper, drawCircle, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
import { BezierCurveType, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
import ExamplePane from "@/components/ExamplePane.vue";
@@ -205,6 +205,26 @@ export default defineComponent({
template: markRaw(SliderExample),
templateOptions: { sliders: [tSliderOptions] },
},
{
name: "Curvature",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
const context = getContextFromCanvas(canvas);
const point = JSON.parse(bezier.evaluate(options.t));
const normal = JSON.parse(bezier.normal(options.t));
const curvature = bezier.curvature(options.t);
const radius = 1 / curvature;
const curvatureCenter = { x: point.x + normal.x * radius, y: point.y + normal.y * radius };
drawCircle(context, curvatureCenter, Math.abs(radius), COLORS.NON_INTERACTIVE.STROKE_1);
drawLine(context, point, curvatureCenter, COLORS.NON_INTERACTIVE.STROKE_1);
drawPoint(context, point, 3, COLORS.NON_INTERACTIVE.STROKE_1);
drawPoint(context, curvatureCenter, 3, COLORS.NON_INTERACTIVE.STROKE_1);
},
curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
template: markRaw(SliderExample),
templateOptions: { sliders: [tSliderOptions] },
},
{
name: "Split",
callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
bezier-rs/docs/interactive-docs/src/utils/drawing.ts
+8
View File
@@ -73,6 +73,14 @@ export const drawCurve = (ctx: CanvasRenderingContext2D, points: Point[], stroke
ctx.stroke();
};
export const drawCircle = (ctx: CanvasRenderingContext2D, point: Point, radius: number, strokeColor = COLORS.INTERACTIVE.STROKE_1): void => {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI, false);
ctx.stroke();
};
export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
const points = bezier.get_points().map((p: string) => JSON.parse(p));
drawBezier(ctx, points, null, bezierStyleConfig);