PixiJS

Class: ShapePath

ShapePath

The ShapePath class acts as a bridge between high-level drawing commands and the lower-level GraphicsContext rendering engine. It translates drawing commands, such as those for creating lines, arcs, ellipses, rectangles, and complex polygons, into a format that can be efficiently processed by a GraphicsContext. This includes handling path starts, ends, and transformations for shapes.

It is used internally by GraphicsPath to build up the path.

Members

bounds Bounds

Gets the bounds of the path.

shapePrimitives { shape : ShapePrimitive, transform? : Matrix }[]

The list of shape primitives that make up the path.

Methods

addPath (path, transform) this

ts:242

Adds another path to the current path. This method allows for the combination of multiple paths into one.

Name Type Attributes Description
path GraphicsPath

The GraphicsPath object representing the path to add.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the path before adding it.
Returns:
Type Description
this The instance of the current object for chaining.

arc (x, y, radius, startAngle, endAngle, counterclockwise) this

ts:83

Adds an arc to the path. The arc is centered at (x, y) position with radius radius starting at startAngle and ending at endAngle.

Name Type Description
x number

The x-coordinate of the arc's center.
y number

The y-coordinate of the arc's center.
radius number

The radius of the arc.
startAngle number

The starting angle of the arc, in radians.
endAngle number

The ending angle of the arc, in radians.
counterclockwise boolean

Specifies whether the arc should be drawn in the anticlockwise direction. False by default.
Returns:
Type Description
this The instance of the current object for chaining.

arcTo (x1, y1, x2, y2, radius) this

ts:107

Adds an arc to the path with the arc tangent to the line joining two specified points. The arc radius is specified by radius.

Name Type Description
x1 number

The x-coordinate of the first point.
y1 number

The y-coordinate of the first point.
x2 number

The x-coordinate of the second point.
y2 number

The y-coordinate of the second point.
radius number

The radius of the arc.
Returns:
Type Description
this The instance of the current object for chaining.

arcToSvg (rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) this

ts:128

Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.

Name Type Description
rx number

The x-radius of the ellipse.
ry number

The y-radius of the ellipse.
xAxisRotation number

The rotation of the ellipse's x-axis relative to the x-axis of the coordinate system, in degrees.
largeArcFlag number

Determines if the arc should be greater than or less than 180 degrees.
sweepFlag number

Determines if the arc should be swept in a positive angle direction.
x number

The x-coordinate of the arc's end point.
y number

The y-coordinate of the arc's end point.
Returns:
Type Description
this The instance of the current object for chaining.

bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y, smoothness) this

ts:165

Adds a cubic Bezier curve to the path. It requires three points: the first two are control points and the third one is the end point. The starting point is the last point in the current path.

Name Type Attributes Description
cp1x number

The x-coordinate of the first control point.
cp1y number

The y-coordinate of the first control point.
cp2x number

The x-coordinate of the second control point.
cp2y number

The y-coordinate of the second control point.
x number

The x-coordinate of the end point.
y number

The y-coordinate of the end point.
smoothness number <optional>

Optional parameter to adjust the smoothness of the curve.
Returns:
Type Description
this The instance of the current object for chaining.

buildPath ()

ts:672

Builds the path.

chamferRect (x, y, width, height, chamfer, transform) this

ts:489

Draw Rectangle with chamfer corners. These are angled corners.

Name Type Attributes Description
x number

Upper left corner of rect
y number

Upper right corner of rect
width number

Width of rect
height number

Height of rect
chamfer number

non-zero real number, size of corner cutout
transform Matrix <optional>
Returns:
Type Description
this

circle (x, y, radius, transform) this

ts:295

Draws a circle shape. This method adds a new circle path to the current drawing.

Name Type Attributes Description
x number

The x-coordinate of the center of the circle.
y number

The y-coordinate of the center of the circle.
radius number

The radius of the circle.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the circle.
Returns:
Type Description
this The instance of the current object for chaining.

closePath () this

ts:230

Closes the current path by drawing a straight line back to the start. If the shape is already closed or there are no points in the path, this method does nothing.

Returns:
Type Description
this The instance of the current object for chaining.

drawShape (shape, matrix) this

ts:569

Draws a given shape on the canvas. This is a generic method that can draw any type of shape specified by the ShapePrimitive parameter. An optional transformation matrix can be applied to the shape, allowing for complex transformations.

Name Type Attributes Description
shape ShapePrimitive

The shape to draw, defined as a ShapePrimitive object.
matrix Matrix <optional>

An optional Matrix for transforming the shape. This can include rotations, scaling, and translations.
Returns:
Type Description
this The instance of the current object for chaining.

ellipse (x, y, radiusX, radiusY, transform) this

ts:531

Draws an ellipse at the specified location and with the given x and y radii. An optional transformation can be applied, allowing for rotation, scaling, and translation.

Name Type Attributes Description
x number

The x-coordinate of the center of the ellipse.
y number

The y-coordinate of the center of the ellipse.
radiusX number

The horizontal radius of the ellipse.
radiusY number

The vertical radius of the ellipse.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the ellipse. This can include rotations.
Returns:
Type Description
this The instance of the current object for chaining.

endPoly (closePath) this

ts:612

Ends the current polygon path. If closePath is set to true, the path is closed by connecting the last point to the first one. This method finalizes the current polygon and prepares it for drawing or adding to the shape primitives.

Name Type Default Description
closePath boolean false

A boolean indicating whether to close the polygon by connecting the last point back to the starting point. False by default.
Returns:
Type Description
this The instance of the current object for chaining.

filletRect (x, y, width, height, fillet) this

ts:454

Draw Rectangle with fillet corners. This is much like rounded rectangle however it support negative numbers as well for the corner radius.

Name Type Description
x number

Upper left corner of rect
y number

Upper right corner of rect
width number

Width of rect
height number

Height of rect
fillet number

accept negative or positive values
Returns:
Type Description
this

finish (closePath)

ts:270

Finalizes the drawing of the current path. Optionally, it can close the path.

Name Type Default Description
closePath boolean false

A boolean indicating whether to close the path after finishing. False by default.

lineTo (x, y) this

ts:60

Connects the current point to a new point with a straight line. This method updates the current path.

Name Type Description
x number

The x-coordinate of the new point to connect to.
y number

The y-coordinate of the new point to connect to.
Returns:
Type Description
this The instance of the current object for chaining.

moveTo (x, y) this

ts:47

Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.

Name Type Description
x number

The x-coordinate for the starting point.
y number

The y-coordinate for the starting point.
Returns:
Type Description
this The instance of the current object for chaining.

poly (points, close, transform) this

ts:310

Draws a polygon shape. This method allows for the creation of complex polygons by specifying a sequence of points.

Name Type Attributes Description
points number[] | PointData[]

An array of numbers, or or an array of PointData objects eg [{x,y}, {x,y}, {x,y}] representing the x and y coordinates of the polygon's vertices, in sequence.
close boolean <optional>

A boolean indicating whether to close the polygon path. True by default.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the polygon.
Returns:
Type Description
this The instance of the current object for chaining.

quadraticCurveTo (cp1x, cp1y, x, y, smoothing) this

ts:201

Adds a quadratic curve to the path. It requires two points: the control point and the end point. The starting point is the last point in the current path.

Name Type Attributes Description
cp1x number

The x-coordinate of the control point.
cp1y number

The y-coordinate of the control point.
x number

The x-coordinate of the end point.
y number

The y-coordinate of the end point.
smoothing number <optional>

Optional parameter to adjust the smoothness of the curve.
Returns:
Type Description
this The instance of the current object for chaining.

rect (x, y, w, h, transform) this

ts:279

Draws a rectangle shape. This method adds a new rectangle path to the current drawing.

Name Type Attributes Description
x number

The x-coordinate of the top-left corner of the rectangle.
y number

The y-coordinate of the top-left corner of the rectangle.
w number

The width of the rectangle.
h number

The height of the rectangle.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the rectangle.
Returns:
Type Description
this The instance of the current object for chaining.

regularPoly (x, y, radius, sides, rotation, transform) this

ts:329

Draws a regular polygon with a specified number of sides. All sides and angles are equal.

Name Type Attributes Default Description
x number

The x-coordinate of the center of the polygon.
y number

The y-coordinate of the center of the polygon.
radius number

The radius of the circumscribed circle of the polygon.
sides number

The number of sides of the polygon. Must be 3 or more.
rotation number 0

The rotation angle of the polygon, in radians. Zero by default.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the polygon.
Returns:
Type Description
this The instance of the current object for chaining.

roundPoly (x, y, radius, sides, corner, rotation, smoothness) this

ts:361

Draws a polygon with rounded corners. Similar to regularPoly but with the ability to round the corners of the polygon.

Name Type Attributes Default Description
x number

The x-coordinate of the center of the polygon.
y number

The y-coordinate of the center of the polygon.
radius number

The radius of the circumscribed circle of the polygon.
sides number

The number of sides of the polygon. Must be 3 or more.
corner number

The radius of the rounding of the corners.
rotation number 0

The rotation angle of the polygon, in radians. Zero by default.
smoothness number <optional>

Optional parameter to adjust the smoothness of the rounding.
Returns:
Type Description
this The instance of the current object for chaining.

roundRect (x, y, w, h, radius, transform) this

ts:550

Draws a rectangle with rounded corners. The corner radius can be specified to determine how rounded the corners should be. An optional transformation can be applied, which allows for rotation, scaling, and translation of the rectangle.

Name Type Attributes Description
x number

The x-coordinate of the top-left corner of the rectangle.
y number

The y-coordinate of the top-left corner of the rectangle.
w number

The width of the rectangle.
h number

The height of the rectangle.
radius number <optional>

The radius of the rectangle's corners. If not specified, corners will be sharp.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the rectangle.
Returns:
Type Description
this The instance of the current object for chaining.

roundShape (points, radius, useQuadratic, smoothness) this

ts:422

Draws a shape with rounded corners. This function supports custom radius for each corner of the shape. Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.

Name Type Attributes Default Description
points RoundedPoint[]

An array of RoundedPoint representing the corners of the shape to draw. A minimum of 3 points is required.
radius number

The default radius for the corners. This radius is applied to all corners unless overridden in points.
useQuadratic boolean false

If set to true, rounded corners are drawn using a quadraticCurve method instead of an arc method. Defaults to false.
smoothness number <optional>

Specifies the smoothness of the curve when useQuadratic is true. Higher values make the curve smoother.
Returns:
Type Description
this The instance of the current object for chaining.

startPoly (x, y) this

ts:587

Starts a new polygon path from the specified starting point. This method initializes a new polygon or ends the current one if it exists.

Name Type Description
x number

The x-coordinate of the starting point of the new polygon.
y number

The y-coordinate of the starting point of the new polygon.
Returns:
Type Description
this The instance of the current object for chaining.