PixiJS

Class: Polygon

Polygon

A class to define a shape via user defined coordinates.

Polygon can accept the following different constructor arguments:

  • An array of Point objects
  • An array of coordinate pairs

These can be passed as a single array, or as a sequence of arguments.

import { Polygon } from 'pixi.js';

// create a polygon object from an array of points, or an array of coordinate pairs
const polygon1 = new Polygon([ new Point(0, 0), new Point(0, 100), new Point(100, 100) ]);
const polygon2 = new Polygon([ 0, 0, 0, 100, 100, 100 ]);

// or create a polygon object from a sequence of points, or coordinate pairs
const polygon3 = new Polygon(new Point(0, 0), new Point(0, 100), new Point(100, 100));
const polygon4 = new Polygon(0, 0, 0, 100, 100, 100);

new Polygon (…points)

ts:50
Name Type Description
points (PointData[] | number[])[] | PointData[] | number[]

This can be an array of Points that form the polygon, a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be all the points of the polygon e.g. new Polygon(new Point(), new Point(), ...), or the arguments passed can be flat x,y values e.g. new Polygon(x,y, x,y, x,y, ...) where x and y are Numbers.

Implements

Members

closePath boolean

false after moveTo, true after closePath. In all other cases it is true.

lastX number readonly

Get the last X coordinate of the polygon

lastY number readonly

Get the last Y coordinate of the polygon

points number[]

An array of the points of this polygon.

type SHAPE_PRIMITIVE readonly

The type of the object, mainly used to avoid instanceof checks

Default Value:
  • 'polygon'

x number readonly

Get the first X coordinate of the polygon

y number readonly

Get the first Y coordinate of the polygon

Methods

clone () Polygon

ts:152

Creates a clone of this polygon.

Returns:
Type Description
Polygon
  • A copy of the polygon.

contains (x, y) boolean

ts:166

Checks whether the x and y coordinates passed to this function are contained within this polygon.

Name Type Description
x number

The X coordinate of the point to test.
y number

The Y coordinate of the point to test.
Returns:
Type Description
boolean
  • Whether the x/y coordinates are within this polygon.

containsPolygon (polygon) boolean

ts:108

Checks if this polygon completely contains another polygon.

This is useful for detecting holes in shapes, like when parsing SVG paths. For example, if you have two polygons:

const outerSquare = new Polygon([0,0, 100,0, 100,100, 0,100]); // A square
const innerSquare = new Polygon([25,25, 75,25, 75,75, 25,75]); // A smaller square inside

outerSquare.containsPolygon(innerSquare); // Returns true
innerSquare.containsPolygon(outerSquare); // Returns false
Name Type Description
polygon Polygon

The polygon to test for containment
Returns:
Type Description
boolean True if this polygon completely contains the other polygon

copyFrom (polygon) this

ts:272

Copies another polygon to this one.

Name Type Description
polygon Polygon

The polygon to copy from.
Returns:
Type Description
this Returns itself.

copyTo (polygon) Polygon

ts:285

Copies this polygon to another one.

Name Type Description
polygon Polygon

The polygon to copy to.
Returns:
Type Description
Polygon Returns given parameter.

getBounds (out) Rectangle

ts:234

Returns the framing rectangle of the polygon as a Rectangle object

Name Type Attributes Description
out Rectangle <optional>

optional rectangle to store the result
Returns:
Type Description
Rectangle The framing rectangle

isClockwise () boolean

ts:79

Determines whether the polygon's points are arranged in a clockwise direction. This is calculated using the "shoelace formula" (also known as surveyor's formula) to find the signed area. A positive area indicates clockwise winding, while negative indicates counter-clockwise.

The formula sums up the cross products of adjacent vertices: For each pair of adjacent points (x1,y1) and (x2,y2), we calculate (x1y2 - x2y1) The final sum divided by 2 gives the signed area - positive for clockwise.

Returns:
Type Description
boolean true if the polygon's points are arranged clockwise, false if counter-clockwise

strokeContains (x, y, strokeWidth, alignment) boolean

ts:197

Checks whether the x and y coordinates given are contained within this polygon including the stroke.

Name Type Default Description
x number

The X coordinate of the point to test
y number

The Y coordinate of the point to test
strokeWidth number

The width of the line to check
alignment number 0.5

The alignment of the stroke, 0.5 by default
Returns:
Type Description
boolean Whether the x/y coordinates are within this polygon