Bezier-rs: continue converting demos from canvas to SVG (#779)

* Convert constructor to use svg

* Convert the through_points functions to svg

* Convert length, lut, derivative, and tangent from canvas to svg

* Fixed bug when t1 == t2 in split

* Converted split and trim to use svg representation, and swapped slider options default to use quadratic options

* Convert normal and curvature to use svg representation in bezier-rs-demos

* Convert the project function to use svg representation in bezier-rs-demos

* Convert the local_extrema, bbox, and inflections to use svgs

* Add text offset constants

* Fix typo

Co-authored-by: Robert Nadal <Robnadal44@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Hannah Li
2022-09-27 17:37:30 -07:00
committed by Keavon Chambers
co-authored by Robert Nadal Keavon Chambers
parent e9cd792635
commit 55f6d13daf
8 changed files with 358 additions and 243 deletions
@@ -1,4 +1,4 @@
import { BezierStyleConfig, CircleSector, Point, WasmBezierInstance } from "@/utils/types";
import { BezierStyleConfig, CircleSector, Point } from "@/utils/types";
const HANDLE_RADIUS_FACTOR = 2 / 3;
const DEFAULT_ENDPOINT_RADIUS = 5;
@@ -95,11 +95,6 @@ export const drawCircleSector = (ctx: CanvasRenderingContext2D, circleSector: Ci
ctx.fill();
};
export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
const points = JSON.parse(bezier.get_points());
drawBezier(ctx, points, null, bezierStyleConfig);
};
export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragIndex: number | null = null, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
const styleConfig: BezierStyleConfig = {
curveStrokeColor: COLORS.INTERACTIVE.STROKE_1,
@@ -15,7 +15,7 @@ export enum BezierCurveType {
}
export type Callback = (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point) => void;
export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>) => string;
export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point) => string;
export type SubpathCallback = (subpath: WasmSubpathInstance) => string;
export type ExampleOptions = {