@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:534
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:581
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:687
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:652
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:296
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:377
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:934
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:801
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:474
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:162
Empty path.
fan()
fan(
center,innerRadius,outerRadius,startAngle,endAngle):Path
Defined in: Path.ts:751
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:1074
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:1028
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:894
Parameters
| Parameter | Type |
|---|---|
rect | Rect |
divs | vec2 |
Returns
halfLine()
halfLine(
point,through,distance):Path
Defined in: Path.ts:339
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:320
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:776
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:977
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:889
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:845
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:823
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:961
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:198
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:178
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:207
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:869
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:219
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:304
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:1154
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:1144
Calculates the bound of the given path.
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
The rect of the path
Example
derivative()
derivative(
path,loc):vec2
Defined in: Path.ts:1388
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:1114
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:1412
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:1424
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:1376
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:1179
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:1164
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:2232
Returns all segmentse
Parameters
| Parameter | Type |
|---|---|
arg | Path |
Returns
Segment[]
tangent()
tangent(
path,loc):vec2
Defined in: Path.ts:1400
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:2022
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:1993
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:2043
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:1907
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:1870
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:1885
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:1804
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:1846
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:2887
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:1641
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:1517
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:1490
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:1436
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:1947
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:1938
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:1920
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:1766
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:1748
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:1604
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:1658
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:1731
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:2099
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:2081
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:2521
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:2536
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:2159
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:2654
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:2242
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:2119
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:2225
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:2582
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:2507
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:2167
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:2721
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:2819
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:2857
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:2766
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:2753
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:2701
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:2903
Creates a new Path instance to begin drawing a path.
Returns
Pen
Defined in: Path.ts:2911
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:3241
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:3213
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:3223
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:3192
Parameters
| Parameter | Type |
|---|---|
radii | vec2 |
xAxisRotation | number |
largeArcFlag | boolean |
sweepFlag | boolean |
point | vec2 |
Returns
c()
c(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3149
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
C()
C(
control1,control2,point):Pen
Defined in: Path.ts:3131
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
close()
close(
removeOverwrapped):Pen
Defined in: Path.ts:3257
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
cubicBezierBy()
cubicBezierBy(
deltaControl1,deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3135
Parameters
| Parameter | Type |
|---|---|
deltaControl1 | vec2 |
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
cubicBezierTo()
cubicBezierTo(
control1,control2,point):Pen
Defined in: Path.ts:3115
Parameters
| Parameter | Type |
|---|---|
control1 | vec2 |
control2 | vec2 |
point | vec2 |
Returns
get()
get():
Path
Defined in: Path.ts:3287
Returns the path drawn by the pen so far.
Returns
h()
h(
dx):Pen
Defined in: Path.ts:3002
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
H()
H(
x):Pen
Defined in: Path.ts:2987
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
horizBy()
horizBy(
dx):Pen
Defined in: Path.ts:2991
Parameters
| Parameter | Type |
|---|---|
dx | number |
Returns
horizTo()
horizTo(
x):Pen
Defined in: Path.ts:2976
Parameters
| Parameter | Type |
|---|---|
x | number |
Returns
l()
l(
delta):Pen
Defined in: Path.ts:2972
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
L()
L(
point):Pen
Defined in: Path.ts:2957
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
lineBy()
lineBy(
delta):Pen
Defined in: Path.ts:2961
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
lineTo()
lineTo(
point):Pen
Defined in: Path.ts:2946
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
m()
m(
delta):Pen
Defined in: Path.ts:2942
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
M()
M(
point):Pen
Defined in: Path.ts:2927
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
moveBy()
moveBy(
delta):Pen
Defined in: Path.ts:2931
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
moveTo()
moveTo(
point):Pen
Defined in: Path.ts:2916
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
q()
q(
delta,delta2):Pen
Defined in: Path.ts:3073
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
delta2 | vec2 |
Returns
Q()
Q(
control,point):Pen
Defined in: Path.ts:3056
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
quadraticCurveBy()
quadraticCurveBy(
deltaControl,deltaPoint):Pen
Defined in: Path.ts:3060
Parameters
| Parameter | Type |
|---|---|
deltaControl | vec2 |
deltaPoint | vec2 |
Returns
quadraticCurveTo()
quadraticCurveTo(
control,point):Pen
Defined in: Path.ts:3036
Parameters
| Parameter | Type |
|---|---|
control | vec2 |
point | vec2 |
Returns
s()
s(
deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3188
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
S()
S(
control2,point):Pen
Defined in: Path.ts:3167
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothCubicBezierBy()
smoothCubicBezierBy(
deltaControl2,deltaPoint):Pen
Defined in: Path.ts:3171
Parameters
| Parameter | Type |
|---|---|
deltaControl2 | vec2 |
deltaPoint | vec2 |
Returns
smoothCubicBezierTo()
smoothCubicBezierTo(
control2,point):Pen
Defined in: Path.ts:3153
Parameters
| Parameter | Type |
|---|---|
control2 | vec2 |
point | vec2 |
Returns
smoothQuadraticCurveBy()
smoothQuadraticCurveBy(
delta):Pen
Defined in: Path.ts:3095
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
smoothQuadraticCurveTo()
smoothQuadraticCurveTo(
point):Pen
Defined in: Path.ts:3077
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
t()
t(
delta):Pen
Defined in: Path.ts:3111
Parameters
| Parameter | Type |
|---|---|
delta | vec2 |
Returns
T()
T(
point):Pen
Defined in: Path.ts:3091
Parameters
| Parameter | Type |
|---|---|
point | vec2 |
Returns
v()
v(
dy):Pen
Defined in: Path.ts:3032
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
V()
V(
y):Pen
Defined in: Path.ts:3017
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
vertBy()
vertBy(
dy):Pen
Defined in: Path.ts:3021
Parameters
| Parameter | Type |
|---|---|
dy | number |
Returns
vertTo()
vertTo(
y):Pen
Defined in: Path.ts:3006
Parameters
| Parameter | Type |
|---|---|
y | number |
Returns
Z()
Z(
removeOverwrapped):Pen
Defined in: Path.ts:3280
Parameters
| Parameter | Type | Default value |
|---|---|---|
removeOverwrapped | boolean | true |
Returns
quadraticBezierTo()
quadraticBezierTo(
path,control,point):Path
Defined in: Path.ts:2787
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:1227
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:1345
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:2159
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:1938
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:1766
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:2225
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:503
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:348
Properties
DistortOptions
Defined in: Path.ts:1956
Properties
FormulaOptions
Defined in: Path.ts:1050
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:1771
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:1823
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:2838
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:2874
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:1626
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:1505
Properties
| Property | Type | Default value | Description |
|---|---|---|---|
join? | boolean | true | If true, the continuous open path will be joined |