PixiJS

Class: GraphicsPath

GraphicsPath

The GraphicsPath class is designed to represent a graphical path consisting of multiple drawing instructions. This class serves as a collection of drawing commands that can be executed to render shapes and paths on a canvas or similar graphical context. It supports high-level drawing operations like lines, arcs, curves, and more, enabling complex graphic constructions with relative ease.

new GraphicsPath (instructions)

ts:59

Creates a GraphicsPath instance optionally from an SVG path string or an array of PathInstruction.

Name Type Attributes Description
instructions string | PathInstruction[] <optional>

An SVG path string or an array of PathInstruction objects.

Members

shapePath ShapePath

Provides access to the internal shape path, ensuring it is up-to-date with the current instructions.

Methods

addPath (path, transform) this

ts:75

Adds another GraphicsPath to this path, optionally applying a transformation.

Name Type Attributes Description
path GraphicsPath

The GraphicsPath to add.
transform Matrix <optional>

An optional transformation to apply to the added path.
Returns:
Type Description
this The instance of the current object for chaining.

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

ts:91

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, number, number, number, number, boolean]

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

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

The radius of the arc.
startAngle

The starting angle of the arc, in radians.
endAngle

The ending angle of the arc, in radians.
counterclockwise

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:112

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, number, number, number, number]

The x-coordinate of the first point.
y1

The y-coordinate of the first point.
x2

The x-coordinate of the second point.
y2

The y-coordinate of the second point.
radius

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:132

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

Name Type Description
rx [number, number, number, number, number, number, number]

The x-radius of the ellipse.
ry

The y-radius of the ellipse.
xAxisRotation

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

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

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

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

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:155

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 Description
cp1x [number, number, number, number, number, number, number]

The x-coordinate of the first control point.
cp1y

The y-coordinate of the first control point.
cp2x

The x-coordinate of the second control point.
cp2y

The y-coordinate of the second control point.
x

The x-coordinate of the end point.
y

The y-coordinate of the end point.
smoothness

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

bezierCurveToShort (cp2x, cp2y, x, y, smoothness) this

ts:182

Adds a cubic Bezier curve to the path. It requires two points: the second control point and the end point. The first control point is assumed to be The starting point is the last point in the current path.

Name Type Attributes Description
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.

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

ts:512

Draw Rectangle with chamfer corners. These are angled corners.

Name Type Description
x [number, number, number, number, number]

Upper left corner of rect
y

Upper right corner of rect
width

Width of rect
height

Height of rect
chamfer

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

circle (x, y, radius, transform) this

ts:371

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.

clone (deep) GraphicsPath

ts:575

Creates a copy of the current GraphicsPath instance. This method supports both shallow and deep cloning. A shallow clone copies the reference of the instructions array, while a deep clone creates a new array and copies each instruction individually, ensuring that modifications to the instructions of the cloned GraphicsPath do not affect the original GraphicsPath and vice versa.

Name Type Default Description
deep boolean false

A boolean flag indicating whether the clone should be deep.
Returns:
Type Description
GraphicsPath A new GraphicsPath instance that is a clone of the current instance.

closePath () this

ts:226

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.

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

ts:240

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 Description
x [number, number, number, number, Matrix]

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

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

The horizontal radius of the ellipse.
radiusY

The vertical radius of the ellipse.
transform

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.

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

ts:493

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, number, number, number, number]

Upper left corner of rect
y

Upper right corner of rect
width

Width of rect
height

Height of rect
fillet

accept negative or positive values
Returns:
Type Description
this

getLastPoint (out) Point

ts:752

Retrieves the last point from the current drawing instructions in the GraphicsPath. This method is useful for operations that depend on the path's current endpoint, such as connecting subsequent shapes or paths. It supports various drawing instructions, ensuring the last point's position is accurately determined regardless of the path's complexity.

If the last instruction is a closePath, the method iterates backward through the instructions until it finds an actionable instruction that defines a point (e.g., moveTo, lineTo, quadraticCurveTo, etc.). For compound paths added via addPath, it recursively retrieves the last point from the nested path.

Name Type Description
out Point

A Point object where the last point's coordinates will be stored. This object is modified directly to contain the result.
Returns:
Type Description
Point The Point object containing the last point's coordinates.

lineTo (…x, y) this

ts:262

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

Name Type Description
x [number, number]

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

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:278

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

Name Type Description
x [number, number]

The x-coordinate for the starting point.
y

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:410

Draws a polygon shape by specifying a sequence of points. This method allows for the creation of complex polygons, which can be both open and closed. An optional transformation can be applied, enabling the polygon to be scaled, rotated, or translated as needed.

Name Type Description
points [number[] | PointData[], boolean, unknown]

An array of numbers representing the x and y coordinates of the polygon's vertices, in sequence.
close

A boolean indicating whether to close the polygon path. True by default.
transform

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

quadraticCurveTo (…cp1x, cp1y, x, y, smoothness) this

ts:292

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 Description
cp1x [number, number, number, number, number]

The x-coordinate of the control point.
cp1y

The y-coordinate of the control point.
x

The x-coordinate of the end point.
y

The y-coordinate of the end point.
smoothness

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

quadraticCurveToShort (x, y, smoothness) this

ts:312

Adds a quadratic curve to the path. It uses the previous point as the control point.

Name Type Attributes Description
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.

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

ts:353

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:429

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

Name Type Description
x [number, number, number, number, number]

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

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

The radius of the circumscribed circle of the polygon.
sides

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

The rotation angle of the polygon, in radians. Zero by default.
transform

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) this

ts:449

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

Name Type Description
x [number, number, number, number, number, number]

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

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

The radius of the circumscribed circle of the polygon.
sides

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

The radius of the rounding of the corners.
rotation

The rotation angle of the polygon, in radians. Zero by default.
Returns:
Type Description
this The instance of the current object for chaining.

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

ts:388

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 Description
x [number, number, number, number, number, unknown]

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

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

The width of the rectangle.
h

The height of the rectangle.
radius

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

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:470

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 Description
points [RoundedPoint[], number, boolean, number]

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

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

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

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.

star (x, y, points, radius, innerRadius, rotation, transform) this

ts:531

Draws a star shape centered at a specified location. This method allows for the creation of stars with a variable number of points, outer radius, optional inner radius, and rotation. The star is drawn as a closed polygon with alternating outer and inner vertices to create the star's points. An optional transformation can be applied to scale, rotate, or translate the star as needed.

Name Type Attributes Description
x number

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

The y-coordinate of the center of the star.
points number

The number of points of the star.
radius number

The outer radius of the star (distance from the center to the outer points).
innerRadius number <optional>

Optional. The inner radius of the star (distance from the center to the inner points between the outer points). If not provided, defaults to half of the radius.
rotation number <optional>

Optional. The rotation of the star in radians, where 0 is aligned with the y-axis. Defaults to 0, meaning one point is directly upward.
transform Matrix <optional>

An optional Matrix object to apply a transformation to the star. This can include rotations, scaling, and translations.
Returns:
Type Description
this The instance of the current object for chaining further drawing commands.

transform (matrix) this

ts:612

Applies a transformation matrix to all drawing instructions within the GraphicsPath. This method enables the modification of the path's geometry according to the provided transformation matrix, which can include translations, rotations, scaling, and skewing.

Each drawing instruction in the path is updated to reflect the transformation, ensuring the visual representation of the path is consistent with the applied matrix.

Note: The transformation is applied directly to the coordinates and control points of the drawing instructions, not to the path as a whole. This means the transformation's effects are baked into the individual instructions, allowing for fine-grained control over the path's appearance.

Name Type Description
matrix Matrix

A Matrix object representing the transformation to apply.
Returns:
Type Description
this The instance of the current object for chaining further operations.