@baku89/pave / Path
Path
Functions for manipulating paths represented as Path.
For creating new paths, see Primitives. Getting intrinsic properties of paths, see Properties. Manipulating existing paths, such as transforming, styling, deforming, etc., see Modifiers.
Inputs are never mutated; returned paths are new objects unless noted otherwise.
Primitives
arc()
arc(
center,radius,startAngle,endAngle,options):Path
Defined in: path/primitives.ts:370
Creates an arc path.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the arc |
radius | number | The radius of the arc |
startAngle | number | The start angle in degrees (Y-down: 0° = +X, increasing clockwise) |
endAngle | number | The end angle in degrees |
options | ArcOptions | - |
Returns
The newly created path
Example
arcByPoints()
arcByPoints(
start,through,end):Path
Defined in: path/primitives.ts:417
Creates an arc path from the given three points. If the points are collinear, it will create a straight line path.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
through | vec2 | The point that the arc passes through |
end | vec2 | The end point |
Returns
The newly created path
arcByPointsAngle()
arcByPointsAngle(
start,end,angle):Path
Defined in: path/primitives.ts:523
Creates an arc path from two points and an angle.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
end | vec2 | The end point |
angle | number | The angle of arc in degrees. If the angle is positive, the arc will be drawn in the sweep direction (clockwise in Y-down coordinate system). |
Returns
The newly created path
arcByPointsTangent()
arcByPointsTangent(
start,startTangent,end):Path
Defined in: path/primitives.ts:488
Creates an arc path from start point, start tangent, and end point.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
startTangent | vec2 | The tangent at the start point |
end | vec2 | The end point |
Returns
A newly created open arc path
capsule()
capsule(
start,end,radius):Path
Defined in: path/primitives.ts:772
Creates a capsule, also known as a stadium: the area within a distance from a line segment, with round ends. It is made of two lines and two arcs, so it keeps exact. When the two points are the same it is a circle.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The center of the round end at the start |
end | vec2 | The center of the round end at the end |
radius | number | The radius of the round ends, which is the half of the width |
Returns
The newly created path
Example
circle()
circle(
center,radius):Path
Defined in: path/primitives.ts:189
Creates a circle path from the given center and radius.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the circle |
radius | number | The radius of the circle |
Returns
The newly created path
Example
clothoid()
clothoid(
start,startAngle,length,startCurvature,endCurvature,options):Path
Defined in: path/spirals.ts:131
Creates a clothoid, also known as an Euler spiral: the curve whose curvature changes in proportion to the distance traveled. Railways and roads use it to ease into a bend, because a vehicle following it turns its wheel at a constant speed. A positive curvature turns towards increasing angles, which is clockwise on a Y-down canvas, and its reciprocal is the radius of the bend.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
startAngle | number | The direction of travel at the start, in degrees |
length | number | The length of the curve |
startCurvature | number | The curvature at the start |
endCurvature | number | The curvature at the end |
options | ClothoidOptions | The options |
Returns
The newly created open path
Example
cubicBezier()
cubicBezier(
start,control1,control2,point):Path
Defined in: path/primitives.ts:852
Creates a path consisting of a single C command.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
control1 | vec2 | The first control point |
control2 | vec2 | The second control point |
point | vec2 | The end point |
Returns
The newly created path
dot()
dot(
point):PathL
Defined in: path/primitives.ts:637
Creates a “dot“ path, which consists of only a M command to the specified point followed by Z command. This will be rendered only if the lineCap of the drawing context is set to 'round' or 'square'.
Parameters
| Parameter | Type | Description |
|---|---|---|
point | vec2 | The center point of the dot |
Returns
The newly created paths
Example
dubins()
dubins(
start,startAngle,end,endAngle,radius,options):Path
Defined in: path/dubins.ts:141
Creates the shortest path between two directed points with a limited turning radius, like the track of a car that cannot go backwards. It consists of arcs and at most one straight line, so it is smooth, and its curvature never exceeds 1 / radius.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
startAngle | number | The direction of travel at the start, in degrees |
end | vec2 | The end point |
endAngle | number | The direction of travel at the end, in degrees |
radius | number | The minimum turning radius |
options | DubinsOptions | The options |
Returns
The newly created path
Example
ellipse()
ellipse(
center,radius):Path
Defined in: path/primitives.ts:331
Creates an ellipse path from the given center and radius.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the ellipse |
radius | vec2 | The horizontal and vertical radii (rx, ry) |
Returns
The newly created path
Example
fan()
fan(
center,innerRadius,outerRadius,startAngle,endAngle):Path
Defined in: path/primitives.ts:587
Creates a fan path.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the fan |
innerRadius | number | The inner radius of the fan |
outerRadius | number | The outer radius of the fan |
startAngle | number | The start angle in degrees (see arc) |
endAngle | number | The end angle in degrees |
Returns
The newly created path
Example
fit()
fit(
points,options):Path
Defined in: path/fitting.ts:476
Fits a smooth sequence of cubic Bézier curves to the given points, so that every point lies within tolerance of the result. The curve is split wherever a single cubic cannot follow the points, so the smaller the tolerance, the more vertices the result has. The algorithm is Schneider’s: the points are parameterized by chord length, the handle lengths are solved in the least-squares sense, the parameters are refined by Newton–Raphson, and the range is split at the point of the largest error when that is not enough.
Sharp corners are kept: where the points turn by 60° or more between chords longer than the tolerance, the curve gets a corner vertex with independent tangents on each side. A run of points that is straight within the tolerance becomes a line (L) rather than a cubic. Consecutive duplicate points are ignored. With fewer than two distinct points the result is an empty path or a dot; with exactly two it is a line.
Parameters
| Parameter | Type | Description |
|---|---|---|
points | readonly vec2[] | The points to fit |
options | FitOptions | The options |
Returns
The fitted path with a single curve
Example
fromSegment()
fromSegment(
segment):Path
Defined in: path/compound.ts:11
Creates an open path consist of only a single command.
Parameters
| Parameter | Type | Description |
|---|---|---|
segment | Segment | The segment to create |
Returns
The newly created path
grid()
grid(
rect,divs):PathL
Defined in: path/primitives.ts:812
Parameters
| Parameter | Type |
|---|---|
rect | Rect |
divs | vec2 |
Returns
halfLine()
halfLine(
point,through,distance):Path
Defined in: path/primitives.ts:228
Creates a half-line, infinite line in one direction from a starting point and a point that the line passes through. It is not actually an inifinite, but one with a very large length.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
point | vec2 | undefined | The starting point |
through | vec2 | undefined | The point that the line passes through |
distance | number | 1e8 | The length of the half-line |
Returns
The half-line path
infiniteLine()
infiniteLine(
point0,point1,distance):Path
Defined in: path/primitives.ts:213
Creates an infinite line path from the given two points. Unlike line, the line will be drawn nearly infinitely in both directions.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
point0 | vec2 | undefined | The first point |
point1 | vec2 | undefined | The second point |
distance | number | 1e8 | The length of the infinite line for each direction |
Returns
The infinite line path
line()
line(
start,end):PathL
Defined in: path/primitives.ts:612
Creates a linear path from two points describing a line.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The line’s starting point |
end | vec2 | The line’s ending point |
Returns
The newly created path
Example
nBezier()
nBezier(
points):Path
Defined in: path/primitives.ts:891
Create a path consisting of cubic Bézier curves approximating the arbitrary higher-order Bézier curve.
Parameters
| Parameter | Type | Description |
|---|---|---|
points | vec2[] | The control points of the Bézier curve |
Returns
The newly created path
ngon()
ngon(
center,radius,sides):PathL
Defined in: path/primitives.ts:722
Alias for regularPolygon
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the polygon |
radius | number | The radius of the circumcircle of the polygon |
sides | number | The number o sides of the polygon |
Returns
The newly created path
Example
polygon()
polygon(…
points):PathL
Defined in: path/primitives.ts:685
Creates a closed polyline from the given points.
Parameters
| Parameter | Type | Description |
|---|---|---|
…points | vec2[] | The points describing the polygon |
Returns
The newly created path
Example
quadraticBezier()
quadraticBezier(
start,control,point):Path
Defined in: path/primitives.ts:879
Creates a quadratic Bézier curve path from the given points.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
control | vec2 | The control point |
point | vec2 | The end point |
Returns
THe newly created path
rect()
rect(
start,end):Path
Defined in: path/primitives.ts:91
Alias for rectangle
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The first point defining the rectangle |
end | vec2 | The second point defining the rectangle |
Returns
The newly created path
Example
rectangle()
rectangle(
start,end):Path
Defined in: path/primitives.ts:71
Creates a rectangle path from the given two points.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The first point defining the rectangle |
end | vec2 | The second point defining the rectangle |
Returns
The newly created path
Example
rectFromCenter()
rectFromCenter(
center,size):Path
Defined in: path/primitives.ts:100
Creates a rectangle path from the given center and size.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the rectangle |
size | vec2 | The size of the rectangle |
Returns
The newly created path
regularPolygon()
regularPolygon(
center,radius,sides):PathL
Defined in: path/primitives.ts:702
Creates a regular polygon. The first vertex will be placed at the +X axis relative to the center.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the polygon |
radius | number | The radius of the circumcircle of the polygon |
sides | number | The number o sides of the polygon |
Returns
The newly created path
Example
roundRect()
roundRect(
start,end,radii):Path
Defined in: path/primitives.ts:112
Creates a rounded rectangle. The arguments are almost the same as the CanvasRenderingContext2D’s roundRect method.
Parameters
| Parameter | Type |
|---|---|
start | vec2 |
end | vec2 |
radii | number | [number] | [number, number] | [number, number, number] | [number, number, number, number] |
Returns
See
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
semicircle()
semicircle(
start,end,closed):Path
Defined in: path/primitives.ts:197
Creates a semicircle path from the given start and end points.
Parameters
| Parameter | Type | Default value |
|---|---|---|
start | vec2 | undefined |
end | vec2 | undefined |
closed | boolean | true |
Returns
spiral()
spiral(
center,startRadius,endRadius,turns,options):Path
Defined in: path/spirals.ts:66
Creates a spiral around a point.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the spiral |
startRadius | number | The radius at the start |
endRadius | number | The radius at the end |
turns | number | The number of the turns, which can be fractional. A positive value runs towards increasing angles, which is clockwise on a Y-down canvas, and a negative one runs the other way. |
options | SpiralOptions | The options |
Returns
The newly created open path
Example
spline()
spline(
points,options):Path
Defined in: path/fitting.ts:605
Creates a smooth curve passing through all of the points, a cardinal (Catmull-Rom) spline converted to cubic Béziers. The handles of each point are parallel to the line between its neighbours; at the ends of an open spline, the missing neighbour is the reflection of the other one, so the curve leaves the end along the first chord.
Parameters
| Parameter | Type | Description |
|---|---|---|
points | readonly vec2[] | The points to pass through |
options | SplineOptions | The options |
Returns
The newly created path with a single curve
Example
star()
star(
center,outerRadius,innerRadius,points):PathL
Defined in: path/primitives.ts:738
Creates a star, alternating between two radii. The first vertex will be placed at the +X axis relative to the center, on the outer radius.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the star |
outerRadius | number | The radius of the tips |
innerRadius | number | The radius of the notches between the tips |
points | number | The number of the tips, an integer of 2 or more |
Returns
The newly created path
Example
superellipse()
superellipse(
center,radius,shape,options):Path
Defined in: path/superellipse.ts:85
Creates a closed superellipse, or a squircle with the default shape. Its outline is |x / rx|^e + |y / ry|^e = 1 with e = 2^shape, the same parameter as cornerShape and the CSS superellipse(): 1 is an ellipse, 2 a squircle, 0 a diamond, Infinity a rectangle, and the negative values make the sides concave. The first vertex will be placed at the +X axis relative to the center.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
center | vec2 | undefined | The center of the superellipse |
radius | vec2 | undefined | The radii along X and Y |
shape | number | 2 | The shape, as above |
options | SuperellipseOptions | {} | The options |
Returns
The newly created path
Example
Properties
area()
area(
arg):number
Defined in: path/metrics.ts:55
Calculates an area of the given path (absolute value of the Green’s-theorem sum over closed subpaths). A path containing a cubic Bézier that crosses itself is measured by what gets filled under the non-zero rule, so the overlap of a loop counts once.
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to calculate |
Returns
number
The area of the path
bounds()
bounds(
arg):Rect
Defined in: path/metrics.ts:45
Calculates the bound of the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to calculate |
Returns
Rect
The rect of the path
Example
centroid()
centroid(
path,tolerance):null|vec2
Defined in: path/queries.ts:341
The centroid of the area enclosed by the path. Open curves are regarded as closed by a straight line. When the path encloses no area, the mean of its vertices is returned instead.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path |
tolerance | number | 0.05 | How finely curves are flattened for the computation |
Returns
null | vec2
The centroid, or null for an empty path
contains()
contains(
path,point,options):boolean
Defined in: path/queries.ts:109
Whether the point lies inside the path. Open curves are regarded as closed by a straight line.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
point | vec2 | The point to test |
options | ContainsOptions | The options |
Returns
boolean
convexHull()
convexHull(
path,options):Path
Defined in: path/hull.ts:407
The exact convex hull of the path. Unlike the hull of the control points or of a flattened polygon, the result keeps the curved parts of the path that lie on the hull, joining them with the common tangents.
The hull is traced by sweeping the support direction around: while the farthest point stays on one segment the hull follows that segment, and when it jumps to another segment the two support points are joined by a line.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to wrap |
options | ConvexHullOptions | The options |
Returns
A closed path. An empty path for an empty input.
derivative()
derivative(
path,loc):vec2
Defined in: path/location.ts:166
Calculates the normalized tangent vector of the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calcuate |
loc | PathLocation | The location on the path |
Returns
vec2
The tangent vector
hitTest()
hitTest(
path,point,options):null|HitTestResult
Defined in: path/queries.ts:150
Finds what lies under a point, the way a node tool would: a vertex, then a handle of a cubic Bézier, then the stroke, then the fill.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
point | vec2 | The point to test, usually the pointer |
options | HitTestOptions | The options |
Returns
null | HitTestResult
What was hit, or null
intersections()
intersections(
a,b,options):PathIntersection[]
Defined in: path/queries.ts:228
Where two paths cross or touch.
Parameters
| Parameter | Type | Description |
|---|---|---|
a | Path | The first path |
b | Path | The second path |
options | IntersectionsOptions | The options |
Returns
The intersections, ordered along the first path
length()
length(
arg):number
Defined in: path/metrics.ts:23
Returns the length of the given path. The returned value is memoized.
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to measure |
Returns
number
The length of the path
nearest()
nearest(
path,point):null|NearestPoint
Defined in: path/queries.ts:125
The point of the path nearest to point.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
point | vec2 | The point to measure from |
Returns
null | NearestPoint
The nearest point, or null for an empty path
normal()
normal(
path,loc):vec2
Defined in: path/location.ts:190
Calculates the normalized tangent vector of the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calcuate |
loc | PathLocation | The location on the path |
Returns
vec2
The tangent vector
orientation()
orientation(
path,loc):mat2d
Defined in: path/location.ts:202
Calculates the transformation matrix of the path at the given location. The x-axis of the matrix is the tangent vector and the y-axis is the normal vector, and the translation is the point on the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calculate |
loc | PathLocation | The location on the path |
Returns
mat2d
The transformation matrix at the given offset
orientedBounds()
orientedBounds(
path,tolerance):null|OrientedRect
Defined in: path/hull.ts:577
The smallest rectangle of any rotation that contains the path, found by rotating calipers over the flattened convex hull.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to bound |
tolerance | number | 0.05 | How finely curved parts of the hull are flattened |
Returns
null | OrientedRect
The rectangle, or null for an empty path
point()
point(
path,loc):vec2
Defined in: path/location.ts:154
Calculates the position on the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calculate |
loc | PathLocation | The location on the path |
Returns
vec2
The position at the given offset
raycast()
raycast(
path,origin,direction,options):RayHit[]
Defined in: path/raycast.ts:58
Casts a ray from origin along direction and returns where it hits the path, nearest first.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to cast against |
origin | vec2 | The start of the ray |
direction | vec2 | The direction of the ray. Its length does not matter. |
options | RaycastOptions | The options |
Returns
RayHit[]
The hits sorted by distance
segment()
segment(
path,curveIndex,segmentIndex?):Segment
Defined in: path/metrics.ts:128
Returns the segment of the path by indices. If the segmentIndex is omitted, the curveIndex is treated as the linear segment index of the whole path. It also supports negative indices, which count from the end of the path or curve.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path that contains the segment |
curveIndex | number | The index of the curve. |
segmentIndex? | number | The index of the segment in the curve. |
Returns
The segment
segmentCount()
segmentCount(
arg):number
Defined in: path/metrics.ts:78
Returns the count of segments in the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to measure |
Returns
number
The count of segments in the path
segments()
segments(
arg):Segment[]
Defined in: path/metrics.ts:14
Returns all segments
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to iterate |
Returns
Segment[]
selfIntersections()
selfIntersections(
path,options):PathIntersection[]
Defined in: path/queries.ts:265
Where the path crosses itself, including a cubic Bézier looping through its own point.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
options | IntersectionsOptions | The options |
Returns
The self-intersections, ordered along the path. a comes before b along the path.
supportPoint()
supportPoint(
path,direction):null|PathPoint
Defined in: path/hull.ts:233
The point of the path farthest along direction: the support point of the path in that direction. Ties are broken by the first found.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to query |
direction | vec2 | The direction to measure along. Its length does not matter. |
Returns
null | PathPoint
The farthest point, or null for an empty path
tangent()
tangent(
path,loc):vec2
Defined in: path/location.ts:178
Calculates the normalized tangent vector of the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calcuate |
loc | PathLocation | The location on the path |
Returns
vec2
The tangent vector
tangentsAlong()
tangentsAlong(
path,direction,options):TangentHit[]
Defined in: path/hull.ts:262
Where lines parallel to direction touch the path. With extreme, only the two lines that enclose the whole path are returned, which is the silhouette of the path under a parallel light along direction.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to query |
direction | vec2 | The direction of the tangent lines |
options | TangentsOptions | The options |
Returns
The tangent hits, ordered along the path
tangentsFrom()
tangentsFrom(
path,origin,options):TangentHit[]
Defined in: path/hull.ts:308
Where lines through origin touch the path. With extreme, only the two lines that enclose the whole path as seen from origin are returned, which is the silhouette of the path under a point light at origin; it is empty when origin is inside the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to query |
origin | vec2 | The point the tangent lines pass through |
options | TangentsOptions | The options |
Returns
The tangent hits, ordered along the path. The tangent of each points away from origin.
vertexType()
vertexType(
path,address):VertexType
Defined in: path/vertexEdit.ts:187
Tells how the handles of a vertex relate: 'symmetric' when they are opposite and of equal length, 'smooth' when they are only opposite, and 'corner' otherwise. For a line or an arc, the handle is the one of the equivalent cubic Bézier: a third of a line, or a Hermite estimate of an arc. An end of an open curve, having a single handle, is always a corner.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
address | VertexAddress | The vertex to inspect |
Returns
The type of the vertex
Modifiers
bulge()
bulge(
path,center,radius,strength,__namedParameters):Path
Defined in: path/distortions.ts:143
Spherize-style radial stretch from center: strongest at the center, fading to none at radius. Points beyond radius are unchanged.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to distort |
center | vec2 | Origin of the radial stretch |
radius | number | Outside this distance from center, the distortion does nothing |
strength | number | Scale added along each ray from center at full falloff (0 = identity). Positive pushes outward, negative pinches inward. |
__namedParameters | RadialDistortOptions | - |
Returns
The newly created path
Example
chamfer()
chamfer(
path,distance,options):Path
Defined in: path/modifiers.ts:1003
Chamfers the path by replacing each corner with a straight cut. Distances are measured along segment arc length (line, cubic, or arc) from the joint, and both segments are trimmed there, so curved segments keep their exact shape up to the cut. The cut on each side is capped at what the segment can give (see fillet for the sharing rule). Smooth joints are left untouched.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to chamfer |
distance | AttributeLike<number> | The distance of chamfer along each segment from the joint. It can vary per corner, as the name of an attribute or a function of the vertex at the corner. |
options | CornerOptions | The options |
Returns
The newly created path
cleanup()
cleanup(
path,options):Path
Defined in: path/structure.ts:222
Removes what does not contribute to the shape of the path: zero-length segments and the duplicated points they connect, line vertices lying on the line through their neighbours, and curved segments that are straight, which become lines. Curves without vertices are dropped, and curves of a single vertex can be.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to clean up |
options | CleanupOptions | The options |
Returns
The cleaned up path
convertVertex()
convertVertex(
path,address,type,options):Path
Defined in: path/vertexEdit.ts:260
Changes how the handles of a vertex relate, keeping the anchor in place. Converting to smooth turns both handles onto their average direction, keeping each length; symmetric additionally gives both the same length, the mean of the two unless handleLength is given. Lines and arcs next to the vertex become cubic Béziers. Converting to corner changes nothing, since any pair of handles is a valid corner; drag one with Path.setHandle to bend it. An end of an open curve is left as it is.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
address | VertexAddress | The vertex to convert |
type | VertexType | The type to convert the vertex into |
options | ConvertVertexOptions | The options |
Returns
The path with the vertex converted
cornerCubic()
cornerCubic(
path,trim,options):Path
Defined in: path/modifiers.ts:1151
Rounds corners by a cubic Bézier. Unlike fillet it is measured by the arc length to cut, and its handle length gives a family of shapes from a chamfer to a loop.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
trim | AttributeLike<number> | The arc length to cut from each side, which can vary per corner |
options | CornerCubicOptions | The options |
Returns
The new path
Example
cornerShape()
cornerShape(
path,trim,shape,options):Path
Defined in: path/modifiers.ts:1215
Shapes corners by a superellipse, as superellipse() of corner-shape in CSS: the curve x^e + y^e = 1 with e = 2^shape, between the cuts, by two to six cubic Béziers per corner at the default tolerance.
0is a chamfer (bevel).1is an ellipse (round), which is a circular arc only at right angles. See fillet for an exact circle at any angle.2is a squircle.-1is a concave curve (scoop).Infinitykeeps the corner (square), and-Infinitycuts it inwards (notch).
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The base path |
trim | AttributeLike<number> | undefined | The arc length to cut from each side, which can vary per corner |
shape | AttributeLike<number> | 1 | The parameter of the superellipse, which can vary per corner |
options | CornerShapeOptions | {} | The options |
Returns
The new path
Example
cutCorners()
cutCorners(
path,trim,fill,options):Path
Defined in: path/modifiers.ts:1070
Cuts each corner by the same arc length along both segments, and fills the gap with what the given function returns. Chamfers and other corner shapes can be made on it. Smooth joints are left untouched. How much a corner can cut is capped as in fillet.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
trim | AttributeLike<number> | The arc length to cut from each side, which can vary per corner |
fill | (corner) => Vertex[] | Returns the vertices from corner.start to corner.end. The last one is moved onto corner.end exactly, and a straight line is drawn when there are none. |
options | CornerOptions | The options |
Returns
The new path
Example
dash()
dash(
path,pattern,options):Path
Defined in: path/dash.ts:34
Cuts the path into dashes, with the semantics of stroke-dasharray of SVG: the pattern is a sequence of alternating on and off lengths along the arc length, repeated as far as each curve goes. An odd number of lengths is repeated to make it even. A pattern that is empty or adds up to zero leaves the path as it is.
Every curve starts the pattern afresh at its first vertex. On a closed curve, the dash running over the seam between the last and the first vertex is joined into one, and a curve shorter than its first dash stays closed. The dashes are open curves, keeping the attributes of the ranges they were cut from.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to dash |
pattern | readonly number[] | The lengths of the dashes and the gaps between them, which must not be negative |
options | DashOptions | The options |
Returns
The path consists of the dashes
Example
deleteVertex()
deleteVertex(
path,address,options):Path
Defined in: path/vertexEdit.ts:441
Removes an anchor from the path. By default the two segments meeting there are replaced by a single cubic Bézier that follows them as closely as possible, keeping the tangents at the neighbouring anchors; two lines are replaced by a line. With preserveShape: false, the vertex is just dropped and the following segment keeps its command and handles, so the path reshapes. Removing an end of an open curve drops it either way. A curve left with no vertices is removed from the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
address | VertexAddress | The vertex to remove |
options | DeleteVertexOptions | The options |
Returns
The path with one vertex fewer
displace()
displace(
path,displacement,options):Path
Defined in: path/displace.ts:76
Displaces the path in the local frame of its tangent and normal. Each point moves by what the given function returns: along the tangent, and across towards the normal. This is the base of waves, coils and scallops.
Where the source has a corner, the frame jumps, so the two sides are connected by a straight line. A closed curve is closed the same way if the displacement does not return to the same value.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to displace |
displacement | (u, context) => readonly [number, number] | Takes the unit along the curve (by arc length, from 0 to 1) and where it is, and returns [along, across] |
options | DisplaceOptions | The options |
Returns
The new path
Example
distort()
Defined in: path/modifiers.ts:491
Distorts path by the given point map. It assumes that the map is smooth in the spatial domain and has no singularities or cusps.
Every vertex is moved to map(point). Each Bézier handle h attached to a point p is re-estimated with the central difference (map(p + h) - map(p - h)) / 2, so the step is the handle itself and no unit-dependent epsilon is involved. Each segment is then subdivided until the fitted cubic stays within tolerance of the true image of the segment, so an affine map yields exactly Path.transform (with arcs approximated by cubics) without any extra vertices.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to distort |
map | (position) => vec2 | A function that returns, for any point in the plane, its image after the distortion. |
__namedParameters | DistortOptions | - |
Returns
The newly created path
Example
fillet()
fillet(
path,radius,options):Path
Defined in: path/modifiers.ts:1296
Fillets corners with a circular arc of the given radius, tangent to both segments. For each corner the two tangent points are solved exactly, also on curved segments, by finding the circle of the given radius that touches both; the segments are trimmed there and the arc is emitted as an A command. When the radius does not fit, the largest radius that fits is used instead: a corner may consume a whole adjacent segment when its other end is a path end or a smooth joint; when that end is another corner, the two share the segment, each taking what the other leaves (half each when both are held back), so neighbouring fillets never overlap. Smooth joints are left untouched.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to fillet |
radius | AttributeLike<number> | The radius of fillet. It can vary per corner, as the name of an attribute or a function of the vertex at the corner. |
options | CornerOptions | The options |
Returns
The newly created path
Example
fitInto()
fitInto(
path,rect,options):Path
Defined in: path/layout.ts:282
Scales and moves the path so that its bounds fit into the rect, like the object-fit property of CSS. A path with no extent on an axis is only scaled by the other.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to fit |
rect | Rect | The rect to fit the path into |
options | FitIntoOptions | The options |
Returns
The fitted path
Example
flatten()
flatten(
path,tolerance):Path
Defined in: path/modifiers.ts:430
Flattens the curves in path to straight lines (recursive midpoint split until chord / hull deviation ≤ tolerance).
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to flatten |
tolerance | number | 0.05 | The maximum distance between the path and the flattened path, in the same unit as the coordinates |
Returns
The flattened path consists of only M, L, and Z commands
Example
insertVertex()
insertVertex(
path,location):Path
Defined in: path/vertexEdit.ts:407
Adds an anchor at the given location without changing the shape of the path, by dividing the segment there. When the location is already at an anchor, the path is returned as it is.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
location | PathLocation | The location to add the anchor at |
Returns
The path with one more vertex
Example
join()
join(
paths):Path
Defined in: path/modifiers.ts:399
Joins the given paths into a single open paths.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to join |
Returns
The joined path
merge()
merge(
pathOrCurves):Path
Defined in: path/compound.ts:33
Merges the given paths into a single path. Unlike join or unite, the vertices are not connected, and it simply returns compound path.
Parameters
| Parameter | Type |
|---|---|
pathOrCurves | (Path | Curve)[] |
Returns
mirror()
mirror(
path,axis):Path
Defined in: path/mirror.ts:309
Makes the path symmetric across the axis: the part on the side the axis normal points to is kept, and the other side is replaced with its reflection. Use Line.invert of geome to keep the opposite side.
Curves are cut where they cross the axis, and new vertices are added there. Lines, cubic Béziers and arcs all stay as they are. The kept parts are joined with their reflections on the axis, so an open curve with both ends on the axis becomes a closed one. Closed curves keep their orientation, so holes stay holes.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to symmetrize |
axis | MirrorAxis | The axis of symmetry |
Returns
The symmetric path. It is empty when nothing lies on the kept side.
Example
moveVertex()
moveVertex(
path,address,point,options):Path
Defined in: path/vertexEdit.ts:359
Moves the anchor of a vertex to a new position. Its handles move along by default, so the segments around it keep their shape; with handles: false the handles stay in place and only the anchor moves.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
address | VertexAddress | The vertex to move |
point | vec2 | The new position of the anchor |
options | MoveVertexOptions | The options |
Returns
The path with the vertex moved
normalizeWinding()
normalizeWinding(
path,options):Path
Defined in: path/structure.ts:361
Resolves the self-intersections and the overlaps of the closed curves of the path. The result fills the same region as the input under the fill rule, with non-overlapping curves wound consistently: outer boundaries in the direction of positive signed area (the one of Path.rect, see Path.orient) and holes in the other, so that the result fills the same under either rule. Open curves are kept as they are and appended after the closed ones.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to normalize |
options | NormalizeWindingOptions | The options |
Returns
The normalized path
Example
offset()
offset(
path,offset,options?):Path
Defined in: path/offset.ts:535
Creates an offset path from the given path.
Closed curves are treated as a filled region (non-zero winding): a positive offset dilates it and a negative one erodes it, regardless of the curves’ orientation. Open curves are offset to the side of their Segment.normal (positive) or the opposite side (negative), and the parts of the raw parallel curve that fold back are trimmed away.
Straight lines and circular arcs are offset exactly, so A commands are preserved; cubic Béziers and elliptic arcs are approximated by cubic Béziers within options.tolerance. Attributes follow the place on the source curve, and values on curves move down to the vertices.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to offset |
offset | number | The signed offset distance |
options? | OffsetOptions | The options |
Returns
The newly created path
Example
offsetStroke()
offsetStroke(
path,width,options?):Path
Defined in: path/offset.ts:623
Creates the outline of a stroke along the given path.
Straight lines and circular arcs are offset exactly, so A commands are preserved; cubic Béziers and elliptic arcs are approximated by cubic Béziers within options.tolerance.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to stroke |
width | AttributeLike<number> | The width of stroke. It can vary along the path, as the name of an attribute or a function of the vertex: the width is read at the vertices and interpolated along the segments. A path whose curves each have one width keeps its A commands. |
options? | OffsetStrokeOptions | The options |
Returns
The newly created path
Example
orient()
orient(
path,orientation):Path
Defined in: path/structure.ts:335
Makes every closed curve of the path wind in the given direction, reversing the ones that do not. The direction is that of the signed area, which is positive for Path.rect: its vertices run clockwise on the screen in the y-down coordinates of SVG and canvas, so cw means visually clockwise there (and counter-clockwise with the y axis up). Open curves and curves without area are untouched.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to orient |
orientation | "cw" | "ccw" | The winding direction every closed curve should have |
Returns
The oriented path
reduce()
reduce(
path,options):Path
Defined in: path/drawAppend.ts:180
Cleans up the path by removing redundant vertices and
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | |
options | ReduceOptions | - |
Returns
reflect()
reflect(
path,axis):Path
Defined in: path/mirror.ts:289
Reflects the path across the axis. The orientation of the curves is flipped, as with any reflection.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to reflect |
axis | MirrorAxis | The axis of the reflection |
Returns
The reflected path
Example
reverse()
reverse(
path,options:):Path
Defined in: path/modifiers.ts:273
Reverses the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to reverse |
options: | ReverseOptions | The options |
Returns
The reversed path
rotate()
rotate(
path,degrees,pivot?):Path
Defined in: path/layout.ts:120
Rotates the path around the pivot. A positive angle rotates clockwise on the screen in the y-down coordinates of SVG and canvas.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to rotate |
degrees | number | The angle in degrees |
pivot? | vec2 | The center of the rotation, which is the center of the bounds by default |
Returns
The rotated path
scale()
scale(
path,factor,pivot?):Path
Defined in: path/layout.ts:136
Scales the path around the pivot.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to scale |
factor | number | vec2 | The scaling factor, either uniform or per axis |
pivot? | vec2 | The center of the scaling, which is the center of the bounds by default |
Returns
The scaled path
setHandle()
setHandle(
path,address,side,handle,options):Path
Defined in: path/vertexEdit.ts:308
Moves one handle of a vertex to an absolute position, like dragging it with a node tool. Depending on link, the opposite handle turns to stay opposite (smooth), also matches the length (symmetric), or stays put (none); by default it follows the way the vertex currently is. The segment the handle belongs to becomes a cubic Bézier if it is a line or an arc. Nothing happens when there is no segment on that side of the vertex.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
address | VertexAddress | The vertex whose handle to move |
side | "in" | "out" | in for the handle of the segment arriving at the vertex, out for the one leaving it |
handle | vec2 | The new absolute position of the handle |
options | SetHandleOptions | The options |
Returns
The path with the handle moved
setStart()
setStart(
path,curveIndex,vertexIndex):Path
Defined in: path/structure.ts:71
Makes the given vertex the first one (the move-to) of a closed curve by rotating its vertices. The shape does not change; only where the curve starts does. An open curve is returned unchanged, since it cannot start anywhere else without changing its shape.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path |
curveIndex | number | The index of the curve, negative values counting from the end |
vertexIndex | number | The index of the vertex to become the first, negative values counting from the end |
Returns
The path with the curve rotated
shadow()
shadow(
path,direction,length):Path
Defined in: path/shadow.ts:138
The shadow the path casts under a parallel light, as the region swept when the path is moved along direction by length. The result includes the path itself; subtract the path to get only the cast part. On an isometric drawing this is also the side face of an extruded shape.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path casting the shadow |
direction | vec2 | The direction of the light. Its length does not matter. |
length | number | How far the shadow reaches |
Returns
The closed path of the shadow
Example
shadowFrom()
shadowFrom(
path,origin,scale):Path
Defined in: path/shadow.ts:156
The shadow the path casts under a point light at origin, as the region swept when the path is scaled about origin by scale. The result includes the path itself; subtract the path to get only the cast part.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path casting the shadow |
origin | vec2 | The position of the light |
scale | number | How many times farther from the light the shadow reaches than the path. Values above 1 cast the shadow away from the light. |
Returns
The closed path of the shadow
simplify()
simplify(
path,options):Path
Defined in: path/fitting.ts:566
Reduces the number of vertices of the path while keeping it within tolerance of the original. Each curve is flattened to points and then Path.fit to a new sequence of cubic Béziers, so collinear runs of lines collapse into one and dense polylines become a few smooth curves. Arcs are refit as cubics like everything else.
The attributes of the path and of the curves are kept; those of the vertices are dropped, since the vertices are replaced.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to simplify |
options | SimplifyOptions | The options |
Returns
The simplified path
Example
smooth()
smooth(
path,options):Path
Defined in: path/fitting.ts:670
Makes the path smooth by recomputing the handles at every vertex from the neighbouring anchors, in the manner of a Catmull-Rom spline, while keeping the anchors in place. Every segment becomes a cubic Bézier, and the tangent is continuous at every vertex that has a neighbour on both sides, so Path.vertexType reports 'smooth' there. At the ends of an open curve, an existing cubic handle is kept and a line gets a handle a third of the way along it.
Arcs are first converted to cubic Béziers by Path.unarc, which may add vertices.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to smooth |
options | SmoothOptions | The options |
Returns
The smoothed path
Example
spawn()
spawn(
path,fn,__namedParameters):Path
Defined in: path/modifiers.ts:171
Maps each segments in the path to a path and create a new path concatinating those paths.
Parameters
| Parameter | Type |
|---|---|
path | Path |
fn | (seg, segmentIndex, curve) => Path |
__namedParameters | SpawnOptions |
Returns
spawnCurve()
spawnCurve<
V1,V2>(path,fn):Path<V2>
Defined in: path/modifiers.ts:149
Maps each curves in the path to a single or array of curves and creates a new path concatinating those curves. Unlike spawnVertex, you can also change the number of curves, or open/close state of the curves.
Type Parameters
| Type Parameter | Default type |
|---|---|
V1 extends Vertex | Vertex |
V2 extends Vertex | Vertex |
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path<V1> | The path to map |
fn | (curve, curveIndex) => Curve<V2> | Curve<V2>[] | The curve mapping function. |
Returns
Path<V2>
The newly created path
split()
split(
path,locs):Path[]
Defined in: path/modifiers.ts:466
Splits the path into multiple paths at the given locations.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to split |
locs | Iterable<PathLocation> | The locations to split |
Returns
Path[]
The splitted paths
subdiv()
subdiv(
path,division):Path
Defined in: path/modifiers.ts:457
Alias for subdivide
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to subdivide |
division | number | The number of division for each segment |
Returns
The newly created path
subdivide()
subdivide(
path,division):Path
Defined in: path/modifiers.ts:441
Subdivides each segment in the path into specific number of sub-segments.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to subdivide |
division | number | The number of division for each segment |
Returns
The newly created path
toC()
toC(
path,tolerance):PathC
Defined in: path/modifiers.ts:391
Alias for toCubicBezier
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
tolerance | number | 0.05 | The maximum deviation allowed when approximating arc commands by cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
toCubicBezier()
toCubicBezier(
path,tolerance):PathC
Defined in: path/modifiers.ts:373
Converts all commands in the path to cubic Bézier curve commands.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
tolerance | number | 0.05 | The maximum deviation allowed when approximating arc commands by cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
transform()
transform(
path,matrix):Path
Defined in: path/modifiers.ts:248
Transforms the given path by the given matrix.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to transform |
matrix | mat2d | The matrix to transform the path by |
Returns
The transformed path
translate()
translate(
path,delta):Path
Defined in: path/layout.ts:108
Moves the path by the given delta.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to move |
delta | vec2 | The translation |
Returns
The moved path
trim()
trim(
path,from,to,crossFirstPoint):Path
Defined in: path/modifiers.ts:287
Trims the path from the given location to the given location.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to trim |
from | PathLocation | undefined | The start location |
to | PathLocation | undefined | The end location |
crossFirstPoint | boolean | true | - |
Returns
The trimmed path
twirl()
twirl(
path,center,radius,angle,__namedParameters):Path
Defined in: path/distortions.ts:104
Spins the plane around center: full rotation at the center, none past radius, blended in between. Points outside the radius are left as-is.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to distort |
center | vec2 | Pivot of the rotation |
radius | number | Outside this distance from center, the distortion does nothing |
angle | number | Rotation at the center, in degrees (scaled by ramp toward the edge) |
__namedParameters | RadialDistortOptions | - |
Returns
The newly created path
Example
unarc()
unarc(
path,tolerance):UnarcPath
Defined in: path/modifiers.ts:356
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
tolerance | number | 0.05 | The maximum deviation allowed when approximating arcs by cubic Béziers |
Returns
The new path without arc commands
Example
wave()
wave(
path,amplitude,wavelength,__namedParameters):Path
Defined in: path/distortions.ts:59
Pushes points side-to-side in a sine pattern: travel along one axis in the plane, offset along the perpendicular.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to distort |
amplitude | number | How far points move perpendicular to the wave direction |
wavelength | number | Distance along the wave for one full cycle (non-zero) |
__namedParameters | WaveOptions | - |
Returns
The newly created path
Example
zigzag()
zigzag(
path,amplitude,wavelength,options):Path
Defined in: path/modifiers.ts:856
Makes the path zigzag along its normal. The peaks are evenly spaced along each curve, and a whole number of them fits: open curves keep their ends in place, and closed curves get an even number so that they stay closed.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to make zigzag |
amplitude | AttributeLike<number> | The distance of the peaks from the path, towards its normal first. It can vary along the path, as the name of an attribute or a function of the vertex; the value between the vertices is interpolated. |
wavelength | number | The approximate length along the path of one period, of two peaks |
options | ZigzagOptions | The options |
Returns
The new path
Example
Boolean Operations
exclude()
exclude(
paths):Path
Defined in: path/boolean.ts:120
Excludes the overlapping regions, keeping the region inside an odd number of paths (XOR).
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to exclude |
Returns
The resulting path
Example
intersect()
intersect(
paths):Path
Defined in: path/boolean.ts:101
Intersects the given paths, keeping only the region inside all of them.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to intersect |
Returns
The resulting path
Example
subtract()
subtract(
subject,tools):Path
Defined in: path/boolean.ts:80
Subtracts the tools from the subject.
Parameters
| Parameter | Type | Description |
|---|---|---|
subject | Path | The target path to be subtracted |
tools | Path[] | The paths to subtract |
Returns
The resulting path
Example
unite()
unite(
paths):Path
Defined in: path/boolean.ts:61
Unites the given paths (non-zero winding). Passing a single path removes its self-intersections and normalizes the orientation of its curves.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to unite |
Returns
The resulting path
Example
Converters
arcify()
Defined in: path/arcify.ts:74
Converts the cubic Bézier curves in the path to circular arcs. Each cubic is approximated by biarcs (pairs of tangent-continuous circular arcs) so that it stays within tolerance of the original, subdividing where a single biarc is not enough. Cubics and arcs that are straight within the tolerance become lines. Line and arc commands are kept as they are.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to convert |
options | ArcifyOptions | The options |
Returns
The new path that only consists of lines and arcs
Example
drawToCanvas()
drawToCanvas(
path,context):void
Defined in: path/canvas.ts:28
Draws the given path to the context. It calls context.beginPath at the beginning, so please note that the sub-paths already stacked on the context are also cleared. Note that you also need to call context.stroke or context.fill to actually draw the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to draw |
context | CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | The Canvas context |
Returns
void
drawToP5()
drawToP5(
path,p5Instance):void
Defined in: path/canvas.ts:43
Draws the given path to the context. It calls beginShape at the beginning, drawing the path with vertex and bezierVertex commands, then calls endShape at the end if the curve is closed.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to draw |
p5Instance | __module | Window | window | The p5.js instance. Pass the instance only if you are using p5.js in instance mode. |
Returns
void
fromD()
fromD(
d):Path
Defined in: path/svg.ts:56
Alias for fromSVGString
Parameters
| Parameter | Type | Description |
|---|---|---|
d | string | The d attribute of an SVG path |
Returns
The newly created path
fromPaperPath()
fromPaperPath(
arg):Path
Defined in: path/paper.ts:163
Creates a path from the given paper.Path or paper.CompoundPath.
Parameters
| Parameter | Type |
|---|---|
arg | PaperPathItemLike |
Returns
The newly created path
fromSVG()
fromSVG(
commands):Path
Defined in: path/svg.ts:130
Converts an array of SVG commands to a Path.
Parameters
| Parameter | Type | Description |
|---|---|---|
commands | SVGCommand[] | The array of SVG commands |
Returns
The newly created path
fromSVGString()
fromSVGString(
d):Path
Defined in: path/svg.ts:16
Parses the given d attribute of an SVG path and creates a new path. Internally uses svgpath library.
Parameters
| Parameter | Type | Description |
|---|---|---|
d | string | The d attribute of an SVG path |
Returns
The newly created path
toD()
toD(
path):string
Defined in: path/svg.ts:122
Alias for toSVGString
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to convert |
Returns
string
The string for the d attribute of the SVG path element
toPaperPath()
toPaperPath<
P>(path,paper):InstanceType<P["Path"]> |InstanceType<P["CompoundPath"]>
Defined in: path/paper.ts:89
Converts the given path to a paper.Path, or a paper.CompoundPath when it has several curves. The items are created with insert: false, so they are not added to the active project.
Type Parameters
| Type Parameter |
|---|
P extends PaperNamespace |
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to convert |
paper | P | The paper module |
Returns
InstanceType<P["Path"]> | InstanceType<P["CompoundPath"]>
The newly created Paper.js item
See
http://paperjs.org/reference/pathitem/
Example
import paper from 'paper'
const item = Path.toPaperPath(path, paper)toPath2D()
toPath2D(
arg):Path2D
Defined in: path/canvas.ts:14
Creates a Path2D instance with the given path data.
Parameters
| Parameter | Type | Description |
|---|---|---|
arg | Path | The path to convert |
Returns
Path2D
The newly created Path2D
toSVGString()
toSVGString(
path):string
Defined in: path/svg.ts:64
Converts the given path to a string that can be used as the d attribute of an SVG path element.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to convert |
Returns
string
The string for the d attribute of the SVG path element
Draw Functions
addVertex()
addVertex(
path,vertex):Path
Defined in: path/drawAppend.ts:53
Appends the given command to the end of the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
vertex | Vertex | The vertex to append |
Returns
The newely created path
arcTo()
arcTo(
path,radii,xAxisRotation,largeArcFlag,sweepFlag,point):Path
Defined in: path/drawAppend.ts:147
Returns the new path with the new A (arc) command at the end.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
radii | vec2 | The radii of the ellipse used to draw the arc |
xAxisRotation | number | The rotation angle of the ellipse’s x-axis relative to the x-axis of the current coordinate system, expressed in degrees |
largeArcFlag | boolean | The large arc flag. If true, then draw the arc spanning greather than 180 degrees. Otherwise, draw the arc spanning less than 180 degrees. |
sweepFlag | boolean | The sweep flag. If true, then draw the arc in a “positive-angle” direction in the current coordinate system. Otherwise, draw it in a “negative-angle” direction. |
point | vec2 | The end point of the arc |
Returns
The newely created path
cubicBezierTo()
cubicBezierTo(
path,control1,control2,point):Path
Defined in: path/drawAppend.ts:94
Returns the new path with the new C (cubic Bézier curve) command at the end.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
control1 | vec2 | The first control point |
control2 | vec2 | The second control point |
point | vec2 | The end point |
Returns
The newely created path
lineTo()
lineTo(
path,point):Path
Defined in: path/drawAppend.ts:81
Returns the new path with the new L (line-to) command at the end.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
point | vec2 | The point to draw a line to |
Returns
The newely created path
pen()
pen():
Pen
Defined in: path/drawAppend.ts:194
Creates a new Path instance to begin drawing a path.
Returns
Pen
Defined in: path/drawAppend.ts:202
A class for creating a path by calling draw functions, like Canvas API.
Constructors
new Pen()
new Pen():
Pen
Returns
Properties
| Property | Type |
|---|---|
current | undefined | { curve: Curve; lastHandle: vec2; point: vec2; } |
Methods
a()
a(
radii,xAxisRotation,largeArcFlag,sweepFlag,deltaPoint):Pen
Defined in: path/drawAppend.ts:522
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
deltaPoint | vec2 |
Returns
A()
A(
radii,xAxisRotation,largeArcFlag,sweepFlag,point):Pen
Defined in: path/drawAppend.ts:494
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
point | vec2 |
Returns
arcBy()
arcBy(
radii,xAxisRotation,largeArcFlag,sweepFlag,deltaPoint):Pen
Defined in: path/drawAppend.ts:504
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
deltaPoint | vec2 |
Returns
arcTo()
arcTo(
radii,xAxisRotation,largeArcFlag,sweepFlag,point):Pen
Defined in: path/drawAppend.ts:473
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
point | vec2 |
Returns
c()
c(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: path/drawAppend.ts:437
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
C()
C(
control1,control2,point):Pen
Defined in: path/drawAppend.ts:419
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
close()
close(
removeOverwrapped):Pen
Defined in: path/drawAppend.ts:532
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
cubicBezierBy()
cubicBezierBy(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: path/drawAppend.ts:423
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
cubicBezierTo()
cubicBezierTo(
control1,control2,point):Pen
Defined in: path/drawAppend.ts:403
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
get()
get():
Path
Defined in: path/drawAppend.ts:562
Returns the path drawn by the pen so far.
Returns
h()
h(
dx):Pen
Defined in: path/drawAppend.ts:298
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
H()
H(
x):Pen
Defined in: path/drawAppend.ts:283
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
horizBy()
horizBy(
dx):Pen
Defined in: path/drawAppend.ts:287
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
horizTo()
horizTo(
x):Pen
Defined in: path/drawAppend.ts:272
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
l()
l(
delta):Pen
Defined in: path/drawAppend.ts:268
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
L()
L(
point):Pen
Defined in: path/drawAppend.ts:253
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
lineBy()
lineBy(
delta):Pen
Defined in: path/drawAppend.ts:257
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
lineTo()
lineTo(
point):Pen
Defined in: path/drawAppend.ts:242
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
m()
m(
delta):Pen
Defined in: path/drawAppend.ts:238
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
M()
M(
point):Pen
Defined in: path/drawAppend.ts:223
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
moveBy()
moveBy(
delta):Pen
Defined in: path/drawAppend.ts:227
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
moveTo()
moveTo(
point):Pen
Defined in: path/drawAppend.ts:212
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
q()
q(
delta,delta2):Pen
Defined in: path/drawAppend.ts:369
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
delta2 | vec2 |
Returns
Q()
Q(
control,point):Pen
Defined in: path/drawAppend.ts:352
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
quadraticCurveBy()
quadraticCurveBy(
deltaControl,deltaPoint):Pen
Defined in: path/drawAppend.ts:356
Parameters
| Parameter | Type |
|---|---|
deltaControl | vec2 |
deltaPoint | vec2 |
Returns
quadraticCurveTo()
quadraticCurveTo(
control,point):Pen
Defined in: path/drawAppend.ts:332
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
s()
s(
deltaControl2,deltaPoint):Pen
Defined in: path/drawAppend.ts:469
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
S()
S(
control2,point):Pen
Defined in: path/drawAppend.ts:451
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothCubicBezierBy()
smoothCubicBezierBy(
deltaControl2,deltaPoint):Pen
Defined in: path/drawAppend.ts:455
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
smoothCubicBezierTo()
smoothCubicBezierTo(
control2,point):Pen
Defined in: path/drawAppend.ts:441
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothQuadraticCurveBy()
smoothQuadraticCurveBy(
delta):Pen
Defined in: path/drawAppend.ts:387
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
smoothQuadraticCurveTo()
smoothQuadraticCurveTo(
point):Pen
Defined in: path/drawAppend.ts:373
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
t()
t(
delta):Pen
Defined in: path/drawAppend.ts:399
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
T()
T(
point):Pen
Defined in: path/drawAppend.ts:383
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
v()
v(
dy):Pen
Defined in: path/drawAppend.ts:328
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
V()
V(
y):Pen
Defined in: path/drawAppend.ts:313
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
vertBy()
vertBy(
dy):Pen
Defined in: path/drawAppend.ts:317
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
vertTo()
vertTo(
y):Pen
Defined in: path/drawAppend.ts:302
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
Z()
Z(
removeOverwrapped):Pen
Defined in: path/drawAppend.ts:555
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
quadraticBezierTo()
quadraticBezierTo(
path,control,point):Path
Defined in: path/drawAppend.ts:115
Returns the new path with the new Q (quadratic Bézier curve) command at the end.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
control | vec2 | The control point |
point | vec2 | The end point |
Returns
The newely created path
Utilities
align()
align(
paths,mode,options):Path[]
Defined in: path/layout.ts:157
Lines the paths up by their bounds, like the Align panel of Illustrator. Paths without curves are left as they are.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to align |
mode | AlignMode | Which edge or center of the bounds to line up |
options | AlignOptions | The options |
Returns
Path[]
The aligned paths, in the same order
Example
blend()
blend(
a,b,t):Path
Defined in: path/layout.ts:345
Interpolates between two paths, like the Blend tool of Illustrator. Both are converted to cubic Béziers and given the same structure: curves are paired by index, a curve without a partner blends to a copy of itself collapsed to the center of its bounds, and the curve of a pair with fewer segments has its segments subdivided (exactly, without changing its shape) until the counts match. Every point and handle is then interpolated linearly, as are the attributes.
A pair of an open and a closed curve is closed when t is nearer to the closed one.
Parameters
| Parameter | Type | Description |
|---|---|---|
a | Path | The path at t = 0 |
b | Path | The path at t = 1 |
t | number | The interpolation factor, which may be outside [0, 1] |
Returns
The interpolated path
Example
blendSeries()
blendSeries(
a,b,count):Path[]
Defined in: path/layout.ts:357
The intermediate steps of Path.blend, what the Blend tool of Illustrator draws between two paths.
Parameters
| Parameter | Type | Description |
|---|---|---|
a | Path | The path at the start |
b | Path | The path at the end |
count | number | The number of the steps between the two paths, excluding them |
Returns
Path[]
The steps, from the one nearest to a to the one nearest to b
breakApart()
breakApart(
path):Path[]
Defined in: path/structure.ts:107
Breaks the path into one path per curve. Each of them keeps the attributes and the definitions of the whole path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to break apart |
Returns
Path[]
The paths, one for each curve, in order
connect()
connect(
paths,options):Path
Defined in: path/structure.ts:118
Connects the open curves of the paths into a single open curve by their nearest endpoints, like the Join command of Illustrator with multiple paths selected. Starting from the first open curve, the curve whose endpoint is nearest to the current end is appended, reversed when its end is nearer than its start, with a line segment between them unless the endpoints coincide. Closed curves are kept as they are.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to connect |
options | ConnectOptions | The options |
Returns
The path with the connected chain, followed by the closed curves
distribute()
distribute(
paths,axis,options):Path[]
Defined in: path/layout.ts:217
Spreads the paths evenly along an axis, like the Distribute commands of Illustrator. The paths are ordered by the centers of their bounds along the axis, and the first and the last stay where they are unless within says otherwise. Paths without curves are left as they are.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path[] | The paths to distribute |
axis | "x" | "y" | The axis along which to distribute |
options | DistributeOptions | The options |
Returns
Path[]
The distributed paths, in the same order
dubinsTypes()
dubinsTypes(
start,startAngle,end,endAngle,radius):object[]
Defined in: path/dubins.ts:224
Lists the sequences of Dubins paths possible between two directed points with their lengths, the shortest first. Some sequences do not exist between close points. With this, the type chosen for one setting can be reused for another by the type option of dubins, for example to keep the shape from switching during an animation.
Parameters
| Parameter | Type | Description |
|---|---|---|
start | vec2 | The start point |
startAngle | number | The direction of travel at the start, in degrees |
end | vec2 | The end point |
endAngle | number | The direction of travel at the end, in degrees |
radius | number | The minimum turning radius |
Returns
object[]
The possible types and their lengths
Example
repeatAlong()
repeatAlong(
path,stamp,options):Path
Defined in: path/layout.ts:565
Places copies of the stamp along the path, like a pattern brush. The origin of the stamp lands on the path, and its x axis follows the tangent unless rotate is false.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to place the copies along |
stamp | Path | The path to copy |
options | RepeatAlongOptions | The options |
Returns
The copies merged into a single path
Example
toTime()
toTime(
path,location):Required<TimePathLocation> &object
Defined in: path/location.ts:23
Retrieves the segment location information from the given path and path-based signed location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to retrieve the segment location |
location | PathLocation | The path-based location |
Returns
Required<TimePathLocation> & object
The information of the segment location
unlinearSegmentIndex()
unlinearSegmentIndex(
path,linearSegmentIndex):object
Defined in: path/location.ts:140
Converts a signed linear segment index to a pair of curve and unsgined segment index.
Parameters
| Parameter | Type |
|---|---|
path | Path |
linearSegmentIndex | number |
Returns
object
| Name | Type |
|---|---|
curveIndex | number |
segmentIndex | number |
Aliases
fromD()
fromD(
d):Path
Defined in: path/svg.ts:56
Alias for fromSVGString
Parameters
| Parameter | Type | Description |
|---|---|---|
d | string | The d attribute of an SVG path |
Returns
The newly created path
subdiv()
subdiv(
path,division):Path
Defined in: path/modifiers.ts:457
Alias for subdivide
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to subdivide |
division | number | The number of division for each segment |
Returns
The newly created path
toC()
toC(
path,tolerance):PathC
Defined in: path/modifiers.ts:391
Alias for toCubicBezier
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
tolerance | number | 0.05 | The maximum deviation allowed when approximating arc commands by cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
toD()
toD(
path):string
Defined in: path/svg.ts:122
Alias for toSVGString
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to convert |
Returns
string
The string for the d attribute of the SVG path element
Attributes
attribute()
attribute(
path,name,location):undefined|AttributeValue
Defined in: path/attributes.ts:57
Reads the attribute at the location. It is looked up on the vertices, the curve, the path and in the definition in this order, and is interpolated between the two ends of the segment by time.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to read |
name | string | The name of the attribute |
location | PathLocation | The location on the path |
Returns
undefined | AttributeValue
The value, or undefined if it is not set anywhere
attributeNames()
attributeNames(
path):string[]
Defined in: path/attributes.ts:81
Lists the names of the attributes set on any level or defined in the path.
Parameters
| Parameter | Type |
|---|---|
path | Path |
Returns
string[]
defineAttribute()
defineAttribute(
path,name,def):Path
Defined in: path/attributes.ts:269
Defines the default value and the interpolation of an attribute. This is optional: without a definition there is no default, and numbers are interpolated linearly, booleans by and, and anything else by step.
Parameters
| Parameter | Type |
|---|---|
path | Path |
name | string |
def | AttributeDef |
Returns
deleteAttribute()
deleteAttribute(
path,name,options):Path
Defined in: path/attributes.ts:208
Removes an attribute.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
name | string | The name of the attribute |
options | { level: AttributeLevel; } | level limits the removal to one level, so that the values on the upper levels can be read again. Without it, the definition is removed as well. |
options.level? | AttributeLevel | - |
Returns
The new path
renameAttribute()
renameAttribute(
path,from,to):Path
Defined in: path/attributes.ts:243
Renames an attribute on all the levels and in the definitions.
Parameters
| Parameter | Type |
|---|---|
path | Path |
from | string |
to | string |
Returns
setAttribute()
Call Signature
setAttribute(
path,name,value,options?):Path
Defined in: path/attributes.ts:126
Sets an attribute. A group is just a boolean attribute, so this also makes one.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
name | string | The name of the attribute |
value | AttributeLike<AttributeValue> | The value, the name of another attribute to copy, or a function to compute it |
options? | { group: AttributeLike<boolean>; level: "vertex"; } | The options |
options.group? | AttributeLike<boolean> | - |
options.level? | "vertex" | - |
Returns
The new path
Example
Call Signature
setAttribute(
path,name,value,options):Path
Defined in: path/attributes.ts:132
Sets an attribute. A group is just a boolean attribute, so this also makes one.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
name | string | The name of the attribute |
value | AttributeValue | (curve, context) => AttributeValue | The value, the name of another attribute to copy, or a function to compute it |
options | { level: "curve"; } | The options |
options.level | "curve" | - |
Returns
The new path
Example
Call Signature
setAttribute(
path,name,value,options):Path
Defined in: path/attributes.ts:140
Sets an attribute. A group is just a boolean attribute, so this also makes one.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
name | string | The name of the attribute |
value | AttributeValue | (path) => AttributeValue | The value, the name of another attribute to copy, or a function to compute it |
options | { level: "path"; } | The options |
options.level | "path" | - |
Returns
The new path
Example
Options
AlignMode
AlignMode:
"left"|"centerX"|"right"|"top"|"centerY"|"bottom"|"center"
Defined in: path/layout.ts:16
How Path.align lines the paths up
AlignOptions
Defined in: path/layout.ts:29
An options for Path.align
Properties
| Property | Type | Description |
|---|---|---|
to? | Rect | "selection" | The rect to align the paths to. 'selection' is the union of the bounds of all the paths. Default 'selection' |
ArcifyOptions
Defined in: path/arcify.ts:18
An options for Path.arcify
Properties
| Property | Type | Description |
|---|---|---|
tolerance? | number | The maximum deviation allowed between the arcified path and the original, in the same unit as the coordinates. Default 0.05 |
ArcOptions
ArcOptions:
object
Defined in: path/primitives.ts:26
An options for Path.arc
Type declaration
CircleFromPointsOptions
Defined in: path/primitives.ts:14
Properties
CleanupOptions
Defined in: path/structure.ts:38
An options for Path.cleanup
Properties
ClothoidOptions
Defined in: path/spirals.ts:40
The options for clothoid
Properties
| Property | Type | Description |
|---|---|---|
tolerance? | number | The largest distance allowed from the exact curve. Default 0.05 |
ConnectOptions
Defined in: path/structure.ts:21
An options for Path.connect
Properties
ContainsOptions
Defined in: path/queries.ts:22
The options for Path.contains.
Properties
| Property | Type | Description |
|---|---|---|
fillRule? | FillRule | Default 'nonzero' |
ConvertVertexOptions
Defined in: path/vertexEdit.ts:38
An options for Path.convertVertex
Properties
| Property | Type | Description |
|---|---|---|
handleLength? | number | The length of both handles when converting to symmetric. By default, the mean of the current lengths is used. |
ConvexHullOptions
Defined in: path/hull.ts:47
The options for Path.convexHull.
Properties
CornerCubicOptions
Defined in: path/modifiers.ts:1130
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
group? | AttributeLike<boolean> | Which corners to process: a boolean attribute’s name, or a function of the vertex at the corner. All of them by default. | CornerOptions.group |
handle? | AttributeLike<number> | The length of the handles, relative to the distance from each cut to the point where the tangents meet. It is 0 for a chamfer, 2/3 for a parabola, 1 for a sharp tip and 2 for a cusp; beyond that the curve makes a loop. By default, it is the value closest to a circular arc, off by 0.03% of the radius at right angles and 0.3% at a turn of 135°. | - |
CornerOptions
Defined in: path/modifiers.ts:575
An options for Path.fillet and Path.chamfer
Extended by
Properties
| Property | Type | Description |
|---|---|---|
group? | AttributeLike<boolean> | Which corners to process: a boolean attribute’s name, or a function of the vertex at the corner. All of them by default. |
CornerShapeOptions
Defined in: path/modifiers.ts:1186
Extends
Properties
| Property | Type | Default value | Description | Inherited from |
|---|---|---|---|---|
group? | AttributeLike<boolean> | undefined | Which corners to process: a boolean attribute’s name, or a function of the vertex at the corner. All of them by default. | CornerOptions.group |
tolerance? | number | 0.05 | The maximum deviation allowed when approximating a shape by cubic Béziers | - |
DashOptions
Defined in: path/dash.ts:11
An options for Path.dash
Properties
| Property | Type | Description |
|---|---|---|
offset? | number | The distance into the pattern at which each curve starts, like stroke-dashoffset of SVG. A negative value shifts the pattern the other way. Default 0 |
DeleteVertexOptions
Defined in: path/vertexEdit.ts:72
An options for Path.deleteVertex
Properties
DisplaceOptions
Defined in: path/displace.ts:37
Properties
DistortOptions
Defined in: path/modifiers.ts:69
Extended by
Properties
DistributeOptions
Defined in: path/layout.ts:41
An options for Path.distribute
Properties
DubinsOptions
Defined in: path/dubins.ts:21
Properties
| Property | Type | Description |
|---|---|---|
type? | DubinsType | Uses this sequence instead of the shortest one. It throws an error if the sequence is not possible between the two points. |
FitIntoOptions
Defined in: path/layout.ts:57
An options for Path.fitInto
Properties
FitOptions
Defined in: path/fitting.ts:19
An options for Path.fit
Properties
FormulaOptions
Defined in: path/primitives.ts:47
The options for Path.formula
Properties
| Property | Type | Description |
|---|---|---|
delta? | number | The delta value for calculating the derivative of the formula Default 1e-6 |
HitTestOptions
Defined in: path/queries.ts:43
The options for Path.hitTest.
Properties
| Property | Type | Description |
|---|---|---|
fillRule? | null | FillRule | The fill rule used for hits on the inside of the path. Set to null to never report the fill. Default 'nonzero' |
tolerance? | number | How far from a vertex, a handle or the stroke a point still counts as hitting it. Default 4 |
IntersectionsOptions
Defined in: path/queries.ts:82
The options for Path.intersections and Path.selfIntersections.
Properties
| Property | Type | Description |
|---|---|---|
tolerance? | number | How close two curves have to come to count as touching. Default 1e-9 relative to the size of the paths |
MoveVertexOptions
Defined in: path/vertexEdit.ts:60
An options for Path.moveVertex
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
handles? | boolean | true | If true, the handles of the vertex move along with it, keeping the shape around the vertex. If false, they stay where they are. |
NormalizeWindingOptions
Defined in: path/structure.ts:55
An options for Path.normalizeWinding
Properties
| Property | Type | Description |
|---|---|---|
fillRule? | "nonzero" | "evenodd" | The fill rule deciding which regions of the input count as filled Default 'nonzero' |
OffsetOptions
Defined in: path/offset.ts:56
Extended by
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
lineJoin? | CanvasLineJoin | 'miter' | The join style at the vertices where the offset curves diverge |
miterLimit? | number | 10 | The limit for miter style, as the ratio of the miter length to the offset distance See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit |
tolerance? | number | 0.05 | The maximum deviation allowed when approximating offset cubic Béziers and elliptic arcs |
OffsetStrokeOptions
Defined in: path/offset.ts:78
Extends
Properties
| Property | Type | Default value | Description | Inherited from |
|---|---|---|---|---|
lineCap? | CanvasLineCap | 'butt' | The cap style at the ends of open curves | - |
lineJoin? | CanvasLineJoin | 'miter' | The join style at the vertices where the offset curves diverge | OffsetOptions.lineJoin |
miterLimit? | number | 10 | The limit for miter style, as the ratio of the miter length to the offset distance See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit | OffsetOptions.miterLimit |
tolerance? | number | 0.05 | The maximum deviation allowed when approximating offset cubic Béziers and elliptic arcs | OffsetOptions.tolerance |
PathCloseOptions
PathCloseOptions:
object
Defined in: path/drawAppend.ts:11
An options for Path.close
Type declaration
| Name | Type | Description |
|---|---|---|
fuse? | boolean | If true, deletes overwrapped first and last vertices. Default true |
group? | CurveGroup | Specifies which curves to close. Default is the last curve. Default -1 |
RadialDistortOptions
Defined in: path/distortions.ts:34
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
ramp? | (t: number) => number | Falloff from the center: receives 1 at the center and 0 at the radius, returns the strength multiplier. Default t => t (linear) | - |
tolerance? | number | The maximum deviation allowed between the distorted path and the true image of the original path, in the same unit as the coordinates. Segments are subdivided until the fitted cubics stay within it. Default 0.05 | DistortOptions.tolerance |
RaycastOptions
Defined in: path/raycast.ts:31
The options for Path.raycast.
Properties
ReduceOptions
ReduceOptions:
ReduceOptions&object
Defined in: path/drawAppend.ts:28
An options for Path.reduce
Type declaration
| Name | Type | Description |
|---|---|---|
removeEmptyCurves? | boolean | If true, removes the curves with zero length Default true |
RepeatAlongOptions
Defined in: path/layout.ts:74
An options for Path.repeatAlong
Properties
ReverseOptions
Defined in: path/modifiers.ts:58
An options for Path.reverse
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
per? | "curve" | "path" | 'path' | The unit to reverse the path. |
SetAttributeOptions
SetAttributeOptions: {
group:AttributeLike<boolean>;level:"vertex"; } | {group:undefined;level:"curve"; } | {group:undefined;level:"path"; }
Defined in: path/attributes.ts:98
Type declaration
{ group: AttributeLike<boolean>; level: "vertex"; }
| Name | Type | Description |
|---|---|---|
group? | AttributeLike<boolean> | Only writes to the vertices this selects; the others keep their values. |
level? | "vertex" | The level to write to. The value is passed the vertex, the curve or the path accordingly if it is a function. |
{ group: undefined; level: "curve"; }
| Name | Type |
|---|---|
group? | undefined |
level | "curve" |
{ group: undefined; level: "path"; }
| Name | Type |
|---|---|
group? | undefined |
level | "path" |
SetHandleOptions
Defined in: path/vertexEdit.ts:49
An options for Path.setHandle
Properties
| Property | Type | Description |
|---|---|---|
link? | VertexType | "none" | How the opposite handle follows: not at all, in direction only (smooth), or in direction and length (symmetric). By default, it follows the way the vertex currently is, as reported by Path.vertexType. |
SimplifyOptions
Defined in: path/fitting.ts:36
An options for Path.simplify
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
tolerance? | number | 2.5 | The maximum distance allowed between the original path and the simplified one, in the same unit as the coordinates. |
SmoothOptions
Defined in: path/fitting.ts:65
An options for Path.smooth
Properties
SpawnOptions
Defined in: path/modifiers.ts:46
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
join? | boolean | true | If true, the continuous open path will be joined |
SpiralOptions
Defined in: path/spirals.ts:18
The options for spiral
Properties
SplineOptions
Defined in: path/fitting.ts:48
An options for Path.spline
Properties
SuperellipseOptions
Defined in: path/superellipse.ts:22
The options for superellipse
Properties
| Property | Type | Description |
|---|---|---|
tolerance? | number | The largest distance allowed from the exact curve. Default 0.05 |
TangentsOptions
Defined in: path/hull.ts:35
The options for Path.tangentsAlong and Path.tangentsFrom.
Properties
WaveOptions
Defined in: path/distortions.ts:13
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
angle? | number | Rotates the wave direction in the plane, in degrees Default 0 | - |
origin? | vec2 | A reference point on the wave axis. With angle, it fixes the frame of the wave. Default [0, 0] | - |
phase? | number | Shifts the wave along its direction, in degrees (360 = one full cycle) Default 0 | - |
tolerance? | number | The maximum deviation allowed between the distorted path and the true image of the original path, in the same unit as the coordinates. Segments are subdivided until the fitted cubics stay within it. Default 0.05 | DistortOptions.tolerance |
ZigzagOptions
Defined in: path/modifiers.ts:824
Properties
Other
circleFromPoints()
circleFromPoints(
p1,p2?,p3?,__namedParameters?):Path
Defined in: path/primitives.ts:234
Parameters
| Parameter | Type |
|---|---|
p1 | vec2 |
p2? | null | vec2 |
p3? | null | vec2 |
__namedParameters? | CircleFromPointsOptions |
Returns
close()
close(
path,__namedParameters):Path
Defined in: path/drawAppend.ts:161
Parameters
| Parameter | Type |
|---|---|
path | Path |
__namedParameters | PathCloseOptions |
Returns
empty
constempty:Path
Defined in: path/primitives.ts:55
formula()
formula(
f,iter,__namedParameters):Path
Defined in: path/primitives.ts:935
Parameters
| Parameter | Type |
|---|---|
f | (t) => vec2 |
iter | Iterable<number> |
__namedParameters | FormulaOptions |
Returns
moveTo()
moveTo(
path,point):Path
Defined in: path/drawAppend.ts:36
Parameters
| Parameter | Type |
|---|---|
path | Path |
point | vec2 |
Returns
polyline()
polyline(…
points):PathL
Defined in: path/primitives.ts:670
Parameters
| Parameter | Type |
|---|---|
…points | vec2[] |
Returns
spawnVertex()
spawnVertex<
V1,V2>(path,fn):Path<V2>
Defined in: path/modifiers.ts:77
Type Parameters
| Type Parameter | Default type |
|---|---|
V1 extends Vertex | Vertex |
V2 extends Vertex | Vertex |
Parameters
| Parameter | Type |
|---|---|
path | Path<V1> |
fn | (segment, segmentIndex, curve) => V2 | V2[] |
Returns
Path<V2>
Types
Corner
Defined in: path/modifiers.ts:1015
A corner being cut, passed to the function that fills the gap in Path.cutCorners.
Properties
| Property | Type | Description |
|---|---|---|
apex | vec2 | Where the tangents at start and end meet. It is the original point between straight segments, and falls back on it when the tangents do not meet ahead. |
context | VertexContext | Where the vertex is |
end | vec2 | Where the outgoing segment now starts |
endTangent | vec2 | The unit direction of the outgoing segment at end |
joint | vec2 | The original point of the corner |
start | vec2 | Where the incoming segment now ends |
startTangent | vec2 | The unit direction of the incoming segment at start |
turn | number | How much the path turns from startTangent to endTangent, in degrees |
vertex | Vertex | The vertex at the corner |
DisplaceContext
Defined in: path/displace.ts:18
Where a point being displaced is, passed to the function of Path.displace.
Properties
| Property | Type | Description |
|---|---|---|
attrs | undefined | Readonly<Record<string, AttributeValue>> | The attributes of the vertices, interpolated here |
curve | Curve | The curve being displaced |
curveIndex | number | - |
length | number | The arc length of the curve |
normal | vec2 | The unit normal of the path |
point | vec2 | The point on the path |
tangent | vec2 | The unit direction of the path |
DubinsType
DubinsType:
"LSL"|"RSR"|"LSR"|"RSL"|"RLR"|"LRL"
Defined in: path/dubins.ts:16
The sequence of a Dubins path. R turns clockwise as seen on a Y-down canvas, which is towards increasing angles, L turns the other way, and S goes straight.
FillRule
FillRule:
"nonzero"|"evenodd"
Defined in: path/queries.ts:16
The fill rule deciding which regions a self-overlapping path fills, as in SVG.
HitTestResult
HitTestResult: {
curveIndex:number;point:vec2;type:"vertex";vertexIndex:number; } | {curveIndex:number;point:vec2;side:"in"|"out";type:"handle";vertexIndex:number; } | {distance:number;location:Required<TimePathLocation>;point:vec2;type:"stroke"; } | {type:"fill"; }
Defined in: path/queries.ts:60
What Path.hitTest found under the point, in the order they are looked for.
Type declaration
{ curveIndex: number; point: vec2; type: "vertex"; vertexIndex: number; }
| Name | Type |
|---|---|
curveIndex | number |
point | vec2 |
type | "vertex" |
vertexIndex | number |
{ curveIndex: number; point: vec2; side: "in" | "out"; type: "handle"; vertexIndex: number; }
| Name | Type | Description |
|---|---|---|
curveIndex | number | - |
point | vec2 | - |
side | "in" | "out" | in for the handle arriving at the vertex, out for the one leaving it |
type | "handle" | - |
vertexIndex | number | - |
{ distance: number; location: Required<TimePathLocation>; point: vec2; type: "stroke"; }
| Name | Type |
|---|---|
distance | number |
location | Required<TimePathLocation> |
point | vec2 |
type | "stroke" |
{ type: "fill"; }
| Name | Type |
|---|---|
type | "fill" |
MirrorAxis
MirrorAxis:
AxisLine| readonly [vec2,vec2]
Defined in: path/mirror.ts:24
The axis of a reflection. Either a directed line of geome, or two distinct points on the line. Two points [p1, p2] give the line whose normal is the direction from p1 to p2 rotated by +90° (x+ towards y+).
NearestPoint
Defined in: path/queries.ts:33
The nearest point of a path to a point.
Properties
| Property | Type |
|---|---|
distance | number |
location | Required<TimePathLocation> |
point | vec2 |
OrientedRect
Defined in: path/hull.ts:59
A rectangle of any rotation.
Properties
| Property | Type | Description |
|---|---|---|
center | vec2 | - |
corners | [vec2, vec2, vec2, vec2] | The four corners, in order around the rectangle |
rotation | number | The rotation of the rectangle in degrees |
size | vec2 | - |
PathIntersection
Defined in: path/queries.ts:94
A point where two paths cross.
Properties
| Property | Type | Description |
|---|---|---|
a | Required<TimePathLocation> | Where on the first path |
b | Required<TimePathLocation> | Where on the second path |
point | vec2 | - |
PathPoint
Defined in: path/hull.ts:13
A point on a path, with where it lies.
Extended by
Properties
| Property | Type |
|---|---|
location | Required<TimePathLocation> |
point | vec2 |
RayHit
Defined in: path/raycast.ts:14
Where a ray hits the path.
Properties
| Property | Type | Description |
|---|---|---|
distance | number | The distance from the origin of the ray. Negative when behind the origin, which only happens with both. |
front | boolean | True when the ray hits the path from its normal side |
location | Required<TimePathLocation> | - |
normal | vec2 | The unit normal of the path at the hit, see Path.normal |
point | vec2 | - |
tangent | vec2 | The unit tangent of the path at the hit |
TangentHit
Defined in: path/hull.ts:22
A point where a line touches the path.
Extends
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
location | Required<TimePathLocation> | - | PathPoint.location |
point | vec2 | - | PathPoint.point |
side | "left" | "right" | "cross" | On which side of the directed tangent line the path lies near the point: left is the side of Path.normal of tangent. cross when the line crosses the path there, as at an inflection. | - |
tangent | vec2 | The direction of the touching line. | - |
VertexAddress
Defined in: path/vertexEdit.ts:19
Which vertex of a path to edit. Negative indices count from the end, like Array.at.
Properties
| Property | Type |
|---|---|
curveIndex | number |
vertexIndex | number |
VertexType
VertexType:
"corner"|"smooth"|"symmetric"
Defined in: path/vertexEdit.ts:32
How the two handles of a vertex relate to each other.
corner: The handles are independent, so the path can bend there.smooth: The handles are opposite to each other, so the tangent is continuous.symmetric: The handles are opposite and of equal length.