pixi-silk/path

Bezier path model: BezierPath, drawPath, parseSvgPath, pathToSvg and edit operations.

import { anchorsInRect, clonePath, cubicPoint, drawPath } from 'pixi-silk/path';

Interfaces#

Interface	Description
BezierPath	A path: anchors in order. A closed path also joins the last anchor back to the first.
PathAnchor	One point of a path. `in` and `out` are handle offsets from the anchor, not positions.
PathHitPoint	The closest point of a path to a point, as nearestOnPath finds it.
PathSink	What drawPath draws into: `SilkGraphics`, Pixi `Graphics` or a canvas 2D context.
Vec	A point or an offset.

Type Aliases#

Type Alias	Description
AnchorType	How an anchor’s two handles move together. - `corner`: each handle moves on its own. Without handles it is a sharp corner. - `smooth`: the handles stay on one line, each keeps its own length. - `mirrored`: the handles stay on one line and have the same length.
Cubic	A cubic bezier segment: start, first control point, second control point, end.
HandleSide	Which handle of an anchor.

Functions#

Function	Description
anchorsInRect	Indices of the anchors inside a rectangle, edges included, for marquee selection. A negative width or height works. Handles are ignored.
clonePath	A deep copy of `path`.
cubicPoint	Point at `t` (0 to 1) along a cubic.
drawPath	Draws `path` into `g` with moveTo, lineTo, bezierCurveTo and closePath, then returns `g` for `.fill()` and `.stroke()`. A `SilkGraphics` fills it even-odd.
inferAnchorType	The type an anchor’s handles imply: `mirrored`, `smooth` or `corner`.
insertAnchor	Inserts an anchor on segment `segment` at `t` without changing the shape: the segment is split exactly (de Casteljau) and the neighbours’ handles shrink to match. Returns the new path and the new anchor’s index.
isStraight	True when segment `i` has no handles: a straight line.
mapPath	Maps every anchor and handle through `fn`, such as a matrix’s `apply`. Exact for affine maps.
moveAnchors	Moves the anchors at `indices` by (dx, dy). Their handles move with them.
nearestOnCubic	The closest point of a cubic to `p`. It takes 33 samples and refines around the best one, so it can pick the wrong part of a curve that passes almost equally close twice.
nearestOnPath	The closest point of the whole path to `p`, or null for a path without segments.
parseSvgPath	Reads SVG path data into paths, one per subpath. Every command works, absolute and relative: quadratics and arcs become cubics. Anchor types come from the handles.
pathBounds	Tight axis-aligned bounds of the path, curves included.
pathFromPoints	A path through `points` with straight segments and corner anchors.
pathToSvg	The path as SVG path data (`M`, `L`, `C`, `Z`), rounded to `precision` decimals.
removeAnchors	Removes the anchors at `indices`. A closed path left with fewer than two anchors opens.
reversePath	The same path traced the other way: anchors in reverse order, in and out handles swapped.
segmentAt	Segment `i` as a cubic, from anchor `i` to the next one. A straight segment has its controls on its ends.
segmentCount	Number of segments: one fewer than the anchors, or as many when closed.
setAnchorType	Changes anchor `index` to `type`. To `corner` the handles are kept as they are (pass `straighten` to drop them). To `smooth` or `mirrored` they line up, and an anchor without handles gets them from its neighbours.
setHandle	Sets one handle of anchor `index` (an offset from the anchor, or null to remove it). The other handle follows the anchor’s type: a `mirrored` twin turns opposite with the same length, a `smooth` one turns opposite and keeps its length. With `breakSymmetry` the anchor becomes a `corner` and the twin stays where it is.
splitCubic	Splits a cubic at `t` with de Casteljau’s construction. The two halves trace the same curve exactly.
toggleAnchorType	Switches anchor `index` between a sharp corner (handles removed) and a smooth curve.