@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.
Primitives
arc()
arc(
center,radius,startAngle,endAngle,options):Path
Defined in: Path.ts:533
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 radians |
endAngle | number | The end angle in radians |
options | ArcOptions | - |
Returns
The newly created path
Example
arcByPoints()
arcByPoints(
start,through,end):Path
Defined in: Path.ts:580
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()
Defined in: Path.ts:686
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.ts:651
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
circle()
circle(
center,radius):Path
Defined in: Path.ts:295
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
circleFromPoints()
circleFromPoints(
p1,p2?,p3?,__namedParameters?):Path
Defined in: Path.ts:376
Creates a circle path which passes through the given points.
Parameters
| Parameter | Type | Description |
|---|---|---|
p1 | vec2 | The first point |
p2? | null | vec2 | The second point |
p3? | null | vec2 | The third point |
__namedParameters? | CircleFromPointsOptions | - |
Returns
The circle path, whose first point matches to p1. After duplicating points are removed, if there are only one point, creates a circle with zero radius. For two points, creates a circle from the two points as the diameter. Otherwise, creates a circle that passes through the three points.
Example
cubicBezier()
cubicBezier(
start,control1,control2,point):Path
Defined in: Path.ts:933
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.ts:800
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
ellipse()
ellipse(
center,radius):Path
Defined in: Path.ts:473
Creates an ellipse path from the given center and radius.
Parameters
| Parameter | Type | Description |
|---|---|---|
center | vec2 | The center of the ellipse |
radius | vec2 | The radius of the ellipse |
Returns
The newly created path
Example
empty
constempty:Path
Defined in: Path.ts:161
Empty path.
fan()
fan(
center,innerRadius,outerRadius,startAngle,endAngle):Path
Defined in: Path.ts:750
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 radians |
endAngle | number | The end angle in radians |
Returns
The newly created path
Example
formula()
formula(
f,iter,options):Path
Defined in: Path.ts:1073
Creates a path from the given formula, which maps a parameter t to a point. The tangent will be automatically calculated by the derivative function, which is computed using Euler’s method with given delta. If the formula has cusps, you need to appropriately specify the range to put t at the cusp.
Parameters
| Parameter | Type | Description |
|---|---|---|
f | (t) => vec2 | The formula to create the path |
iter | Iterable<number> | The iterable object to iterate the parameter t |
options | FormulaOptions | The options |
Returns
The newly created path
Example
fromSegment()
fromSegment(
segment):Path
Defined in: Path.ts:1027
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.ts:893
Parameters
| Parameter | Type |
|---|---|
rect | Rect |
divs | vec2 |
Returns
halfLine()
halfLine(
point,through,distance):Path
Defined in: Path.ts:338
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.ts:319
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.ts:775
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()
Defined in: Path.ts:976
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.ts:888
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.ts:844
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
polyline()
polyline(…
points):PathL
Defined in: Path.ts:822
Creates a open 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.ts:960
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.ts:197
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.ts:177
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.ts:206
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.ts:868
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.ts:218
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.ts:303
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
Properties
area()
area(
arg):number
Defined in: Path.ts:1153
Calculates an area of the given path.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
number
The area of the path
bounds()
bounds(
arg):Rect
Defined in: Path.ts:1143
Calculates the bound of the given path.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
Rect
The rect of the path
Example
derivative()
derivative(
path,loc):vec2
Defined in: Path.ts:1387
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
length()
length(
arg):number
Defined in: Path.ts:1113
Returns the length of the given path. The returned value is memoized.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
number
The length of the path
normal()
normal(
path,loc):vec2
Defined in: Path.ts:1411
Calculates the normalized tangent vector of the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calcuate |
loc | PathLocation | - |
Returns
vec2
The tangent vector
orientation()
orientation(
path,loc):mat2d
Defined in: Path.ts:1423
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 | - |
Returns
mat2d
The transformation matrix at the given offset
point()
point(
path,loc):vec2
Defined in: Path.ts:1375
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
segment()
segment(
path,curveIndex,segmentIndex?):Segment
Defined in: Path.ts:1178
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.ts:1163
Returns the count of segments in the given path.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
number
The count of segments in the path
segments()
segments(
arg):Segment[]
Defined in: Path.ts:2231
Returns all segmentse
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
Segment[]
tangent()
tangent(
path,loc):vec2
Defined in: Path.ts:1399
Calculates the normalized tangent vector of the path at the given location.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to calcuate |
loc | PathLocation | - |
Returns
vec2
The tangent vector
Modifiers
chamfer()
chamfer(
path,distance):Path
Defined in: Path.ts:2021
Chamfers the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to chamfer |
distance | number | The distance of chamfer |
Returns
The newly created path
distort()
Defined in: Path.ts:1992
Distorts path by the given transformation function. It assumes that the continuity of transformation is smooth in the spatial domain and has no singularities or cusps.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to distort |
transform | (position) => mat2d | The distort function that maps a point coordinate to a transformation matrix. The translation component is absolute, and affects points of Bézier curves. The rotation, scaling, and skewing components affect the orientation of two handles. |
__namedParameters | DistortOptions | - |
Returns
The newly created path
Example
fillet()
fillet(
path,radius):Path
Defined in: Path.ts:2042
Fillets the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to fillet |
radius | number | The radius of fillet |
Returns
The newly created path
flatten()
flatten(
path,flatness):Path
Defined in: Path.ts:1906
Flattens the curves in path to straight lines.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to flatten |
flatness | number | 0.25 | The maximum distance between the path and the flattened path |
Returns
The flattened path consists of only M, L, and Z commands
See
http://paperjs.org/reference/path/#flatten
Example
join()
join(
paths):Path
Defined in: Path.ts:1869
Joins the given paths into a single open paths.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path<Vertex>[] | The paths to join |
Returns
The joined path
merge()
merge(
pathOrCurves):Path
Defined in: Path.ts:1884
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 | (Curve | Path<Vertex>)[] |
Returns
offset()
offset(
path,offset,options?):Path
Defined in: Path.ts:1803
Creates an offset path from the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to offset |
offset | number | The width of offset |
options? | OffsetOptions | The options |
Returns
The newly created path
Example
offsetStroke()
Defined in: Path.ts:1845
Creates an offset path from the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to offset |
width | number | The width of stroke |
options? | OffsetStrokeOptions | The options |
Returns
The newly created path
Example
reduce()
reduce(
path,options):Path
Defined in: Path.ts:2886
Cleans up the path by removing redundant vertices and
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | |
options | ReduceOptions | - |
Returns
reverse()
reverse(
path,options:):Path
Defined in: Path.ts:1640
Reverses the given path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The path to reverse |
options: | ReverseOptions | The options |
Returns
The reversed path
spawn()
spawn(
path,fn,__namedParameters):Path
Defined in: Path.ts:1516
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.ts:1489
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
spawnVertex()
spawnVertex<
V1,V2>(path,fn):Path<V2>
Defined in: Path.ts:1435
Maps each segment in the path to a single or array of vertices and creates a new path concatinating those vertices. Unlike spawn, the mapping function must returns a single or multiple vertices instead of Path. So while you can change the type of commands, and change the number of them in the path, you cannot change the topology of the path. The segments that were originally continuous remains connected, and vice versa.
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 | (segment, segmentIndex, curve) => V2 | V2[] | The vertex mapping function. It takes a Segment and returns a single or array of vertices. |
Returns
Path<V2>
The newly created path
split()
Defined in: Path.ts:1946
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
The splitted paths
subdiv()
subdiv(
path,division):Path
Defined in: Path.ts:1937
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.ts:1919
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,unarcAngle):PathC
Defined in: Path.ts:1765
Alias for toCubicBezier
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
unarcAngle | number | 90 | The angle step for approximating arc commands with cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
toCubicBezier()
toCubicBezier(
path,unarcAngle):PathC
Defined in: Path.ts:1747
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 |
unarcAngle | number | 90 | The angle step for approximating arc commands with cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
transform()
transform(
path,matrix):Path
Defined in: Path.ts:1603
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
trim()
trim(
path,from,to,crossFirstPoint):Path
Defined in: Path.ts:1657
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
unarc()
unarc(
path,angle):UnarcPath
Defined in: Path.ts:1730
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | |
angle | number | 90 |
Returns
UnarcPath
Example
Boolean Operations
subtract()
subtract(
subject,tools):Path
Defined in: Path.ts:2098
Subtracts the tools from the subject.
Parameters
| Parameter | Type | Description |
|---|---|---|
subject | Path | The target path to be subtracted |
tools | Path<Vertex>[] | The paths to subtract |
Returns
The resulting path
unite()
unite(
paths):Path
Defined in: Path.ts:2080
Unites the given paths.
Parameters
| Parameter | Type | Description |
|---|---|---|
paths | Path<Vertex>[] | The paths to unite |
Returns
The resulting path
Converters
drawToCanvas()
drawToCanvas(
path,context):void
Defined in: Path.ts:2520
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.ts:2535
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.ts:2158
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.ts:2653
Creates a path from the given paper.Path instance.
Parameters
| Parameter | Type |
|---|---|
arg | PathItem |
Returns
The newly created path
fromSVG()
fromSVG(
commands):Path
Defined in: Path.ts:2241
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.ts:2118
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.ts:2224
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(
arg):Path|CompoundPath
Defined in: Path.ts:2581
Converts the given path to paper.Path
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
Path | CompoundPath
The newly created paper.Path instance
See
http://paperjs.org/reference/pathitem/
toPath2D()
toPath2D(
arg):Path2D
Defined in: Path.ts:2506
Creates a Path2D instance with the given path data.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
Path2D
The newly created Path2D
toSVGString()
toSVGString(
path):string
Defined in: Path.ts:2166
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.ts:2720
Appends the given command to the end of the path.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
vertex | Vertex | - |
Returns
The newely created path
arcTo()
arcTo(
path,radii,xAxisRotation,largeArcFlag,sweepFlag,point):Path
Defined in: Path.ts:2818
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
close()
close(
path,__namedParameters):Path
Defined in: Path.ts:2856
Closes the specified curves
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
__namedParameters | PathCloseOptions | - |
Returns
The newely created path
cubicBezierTo()
cubicBezierTo(
path,control1,control2,point):Path
Defined in: Path.ts:2765
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.ts:2752
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
moveTo()
moveTo(
path,point):Path
Defined in: Path.ts:2700
Returns the new path with the new M (move-to) command at the end.
Parameters
| Parameter | Type | Description |
|---|---|---|
path | Path | The base path |
point | vec2 | The point to move to |
Returns
The newely created path
pen()
pen():
Pen
Defined in: Path.ts:2902
Creates a new Path instance to begin drawing a path.
Returns
Pen
Defined in: Path.ts:2910
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.ts:3240
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.ts:3212
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.ts:3222
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.ts:3191
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
point | vec2 |
Returns
c()
c(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3148
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
C()
C(
control1,control2,point):Pen
Defined in: Path.ts:3130
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
close()
close(
removeOverwrapped):Pen
Defined in: Path.ts:3256
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
cubicBezierBy()
cubicBezierBy(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3134
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
cubicBezierTo()
cubicBezierTo(
control1,control2,point):Pen
Defined in: Path.ts:3114
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
get()
get():
Path
Defined in: Path.ts:3286
Returns the path drawn by the pen so far.
Returns
h()
h(
dx):Pen
Defined in: Path.ts:3001
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
H()
H(
x):Pen
Defined in: Path.ts:2986
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
horizBy()
horizBy(
dx):Pen
Defined in: Path.ts:2990
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
horizTo()
horizTo(
x):Pen
Defined in: Path.ts:2975
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
l()
l(
delta):Pen
Defined in: Path.ts:2971
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
L()
L(
point):Pen
Defined in: Path.ts:2956
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
lineBy()
lineBy(
delta):Pen
Defined in: Path.ts:2960
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
lineTo()
lineTo(
point):Pen
Defined in: Path.ts:2945
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
m()
m(
delta):Pen
Defined in: Path.ts:2941
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
M()
M(
point):Pen
Defined in: Path.ts:2926
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
moveBy()
moveBy(
delta):Pen
Defined in: Path.ts:2930
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
moveTo()
moveTo(
point):Pen
Defined in: Path.ts:2915
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
q()
q(
delta,delta2):Pen
Defined in: Path.ts:3072
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
delta2 | vec2 |
Returns
Q()
Q(
control,point):Pen
Defined in: Path.ts:3055
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
quadraticCurveBy()
quadraticCurveBy(
deltaControl,deltaPoint):Pen
Defined in: Path.ts:3059
Parameters
| Parameter | Type |
|---|---|
deltaControl | vec2 |
deltaPoint | vec2 |
Returns
quadraticCurveTo()
quadraticCurveTo(
control,point):Pen
Defined in: Path.ts:3035
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
s()
s(
deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3187
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
S()
S(
control2,point):Pen
Defined in: Path.ts:3166
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothCubicBezierBy()
smoothCubicBezierBy(
deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3170
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
smoothCubicBezierTo()
smoothCubicBezierTo(
control2,point):Pen
Defined in: Path.ts:3152
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothQuadraticCurveBy()
smoothQuadraticCurveBy(
delta):Pen
Defined in: Path.ts:3094
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
smoothQuadraticCurveTo()
smoothQuadraticCurveTo(
point):Pen
Defined in: Path.ts:3076
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
t()
t(
delta):Pen
Defined in: Path.ts:3110
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
T()
T(
point):Pen
Defined in: Path.ts:3090
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
v()
v(
dy):Pen
Defined in: Path.ts:3031
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
V()
V(
y):Pen
Defined in: Path.ts:3016
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
vertBy()
vertBy(
dy):Pen
Defined in: Path.ts:3020
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
vertTo()
vertTo(
y):Pen
Defined in: Path.ts:3005
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
Z()
Z(
removeOverwrapped):Pen
Defined in: Path.ts:3279
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
quadraticBezierTo()
quadraticBezierTo(
path,control,point):Path
Defined in: Path.ts:2786
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
toTime()
toTime(
path,location):Required<TimePathLocation> &object
Defined in: Path.ts:1226
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.ts:1344
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.ts:2158
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.ts:1937
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,unarcAngle):PathC
Defined in: Path.ts:1765
Alias for toCubicBezier
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
path | Path | undefined | The path to convert |
unarcAngle | number | 90 | The angle step for approximating arc commands with cubic Béziers |
Returns
The new path with only cubic Bézier curve commands
toD()
toD(
path):string
Defined in: Path.ts:2224
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
Options
ArcOptions
ArcOptions:
object
Defined in: Path.ts:502
An options for arc
Type declaration
| Name | Type | Description |
|---|---|---|
align? | ResampleOptions["align"] | The alignment of the vertices Default 'uniform' |
count? | number | The total count of the segments in the arc. If this is specified, the step will be ignored and the arc will be deviced into the specified number of segments uniformly. |
step? | number | The maximum angle step in degrees Default 360 - 1e-4 |
CircleFromPointsOptions
Defined in: Path.ts:347
Properties
DistortOptions
Defined in: Path.ts:1955
Properties
FormulaOptions
Defined in: Path.ts:1049
The options for formula
Properties
| Property | Type | Description |
|---|---|---|
delta? | number | The delta value for calculating the derivative of the formula Default 10e-6 |
OffsetOptions
Defined in: Path.ts:1770
Extended by
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
cap? | StrokeCapType | undefined | The cap style of offset path |
join? | CanvasLineJoin | 'miter' | The join style of offset path |
miterLimit? | number | 10 | The limit for miter style See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit |
OffsetStrokeOptions
Defined in: Path.ts:1822
Extends
Properties
| Property | Type | Default value | Description | Inherited from |
|---|---|---|---|---|
cap? | StrokeCapType | undefined | The cap style of offset path | OffsetOptions.cap |
join? | CanvasLineJoin | 'miter' | The join style of offset path | OffsetOptions.join |
lineCap? | "round" | "butt" | 'butt' | The cap style of offset path ('square' will be supported in future) | - |
miterLimit? | number | 10 | The limit for miter style See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit | OffsetOptions.miterLimit |
PathCloseOptions
PathCloseOptions:
object
Defined in: Path.ts:2837
An options for 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 |
ReduceOptions
ReduceOptions:
ReduceOptions&object
Defined in: Path.ts:2873
An options for reduce
Type declaration
| Name | Type | Description |
|---|---|---|
removeEmptyCurves? | boolean | If true, removes the curves with zero length Default true |
ReverseOptions
Defined in: Path.ts:1625
An options for reverse
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
per? | "curve" | "path" | 'path' | The unit to reverse the path. |
SpawnOptions
Defined in: Path.ts:1504
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
join? | boolean | true | If true, the continuous open path will be joined |