pixi.js
    Preparing search index...

    Class Polygon

    A class to define a shape via user defined coordinates. Used for creating complex shapes and hit areas with custom points.

    // Create polygon from array of points
    const polygon1 = new Polygon([
        new Point(0, 0),
        new Point(0, 100),
        new Point(100, 100)
    ]);

    // Create from array of coordinates
    const polygon2 = new Polygon([0, 0, 0, 100, 100, 100]);

    // Create from sequence of points
    const polygon3 = new Polygon(
        new Point(0, 0),
        new Point(0, 100),
        new Point(100, 100)
    );

    // Create from sequence of coordinates
    const polygon4 = new Polygon(0, 0, 0, 100, 100, 100);

    // Use as container hit area
    container.hitArea = new Polygon([0, 0, 100, 0, 50, 100]);

    Point For point objects used in construction

    Implements

    Index

    Constructors

    constructor

    Properties

    closePath points type

    Accessors

    lastX lastY x y

    Methods

    clone contains containsPolygon copyFrom copyTo getBounds isClockwise strokeContains toString

    Constructors

    Properties

    closePath: boolean

    Indicates if the polygon path is closed.

    // Create open polygon
    const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
    polygon.closePath = false;

    // Check path state
    if (polygon.closePath) {
        // Last point connects to first
    }
    • True by default
    • False after moveTo
    • True after closePath
    true
    points: number[]

    An array of the points of this polygon stored as a flat array of numbers.

    // Access points directly
    const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
    console.log(polygon.points); // [0, 0, 100, 0, 50, 100]

    // Modify points
    polygon.points[0] = 10; // Move first x coordinate
    polygon.points[1] = 10; // Move first y coordinate
    • Stored as [x1, y1, x2, y2, ...]
    • Each pair represents a vertex
    • Length is always even
    • Can be modified directly
    type: SHAPE_PRIMITIVE = 'polygon'

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

    // Check shape type
    const shape = new Polygon([0, 0, 100, 0, 50, 100]);
    console.log(shape.type); // 'polygon'

    // Use in type guards
    if (shape.type === 'polygon') {
        // TypeScript knows this is a Polygon
        console.log(shape.points.length);
    }

    'polygon'

    SHAPE_PRIMITIVE For all shape types

    Accessors

    • get lastX(): number

      Get the last X coordinate of the polygon.

      Returns number

      The x-coordinate of the last vertex

      // Basic coordinate access
      const polygon = new Polygon([0, 0, 100, 200, 300, 400]);
      console.log(polygon.lastX); // 300
    • get lastY(): number

      Get the last Y coordinate of the polygon.

      Returns number

      The y-coordinate of the last vertex

      // Basic coordinate access
      const polygon = new Polygon([0, 0, 100, 200, 300, 400]);
      console.log(polygon.lastY); // 400
    • get x(): number

      Get the first X coordinate of the polygon

      Returns number

    • get y(): number

      Get the first Y coordinate of the polygon

      Returns number

    Methods

    • Creates a clone of this polygon.

      Returns Polygon

      A copy of the polygon

      // Basic cloning
      const original = new Polygon([0, 0, 100, 0, 50, 100]);
      const copy = original.clone();

      // Clone and modify
      const modified = original.clone();
      modified.points[0] = 10; // Modify first x coordinate

    • Checks whether the x and y coordinates passed to this function are contained within this polygon. Uses raycasting algorithm for point-in-polygon testing.

      Parameters

      • x: number

        The X coordinate of the point to test

      • y: number

        The Y coordinate of the point to test

      Returns boolean

      Whether the x/y coordinates are within this polygon

      // Basic containment check
      const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
      const isInside = polygon.contains(25, 25); // true

    • Checks if this polygon completely contains another polygon. Used for detecting holes in shapes, like when parsing SVG paths.

      Parameters

      • polygon: Polygon

        The polygon to test for containment

      Returns boolean

      True if this polygon completely contains the other polygon

      // Basic containment check
      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
      • Uses bounds check for quick rejection
      • Tests all points for containment

    • Copies another polygon to this one.

      Parameters

      • polygon: Polygon

        The polygon to copy from

      Returns this

      Returns itself

      // Basic copying
      const source = new Polygon([0, 0, 100, 0, 50, 100]);
      const target = new Polygon();
      target.copyFrom(source);

    • Copies this polygon to another one.

      Parameters

      • polygon: Polygon

        The polygon to copy to

      Returns Polygon

      Returns given parameter

      // Basic copying
      const source = new Polygon([0, 0, 100, 0, 50, 100]);
      const target = new Polygon();
      source.copyTo(target);

    • Returns the framing rectangle of the polygon as a Rectangle object.

      Parameters

      • Optionalout: Rectangle

        Optional rectangle to store the result

      Returns Rectangle

      The framing rectangle

      // Basic bounds calculation
      const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
      const bounds = polygon.getBounds();
      // bounds: x=0, y=0, width=100, height=100

      // Reuse existing rectangle
      const rect = new Rectangle();
      polygon.getBounds(rect);

    • Determines whether the polygon's points are arranged in a clockwise direction. Uses the shoelace formula (surveyor's formula) to calculate 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 boolean

      true if the polygon's points are arranged clockwise, false if counter-clockwise

      // Check polygon winding
      const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
      console.log(polygon.isClockwise()); // Check direction

      // Use in path construction
      const hole = new Polygon([25, 25, 75, 25, 75, 75, 25, 75]);
      if (hole.isClockwise() === shape.isClockwise()) {
          hole.points.reverse(); // Reverse for proper hole winding
      }

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

      Parameters

      • 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 = inner, 0.5 = centered, 1 = outer)

      Returns boolean

      Whether the x/y coordinates are within this polygon's stroke

      // Basic stroke check
      const polygon = new Polygon([0, 0, 100, 0, 50, 100]);
      const isOnStroke = polygon.strokeContains(25, 25, 4); // 4px line width

      // Check with different alignments
      const innerStroke = polygon.strokeContains(25, 25, 4, 0);   // Inside
      const centerStroke = polygon.strokeContains(25, 25, 4, 0.5); // Centered
      const outerStroke = polygon.strokeContains(25, 25, 4, 1);   // Outside

    • Returns a string representation of an object.

      Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods