pixi.js
    Preparing search index...

    Class Triangle

    A class to define a shape of a triangle via user defined coordinates.

    Used for creating triangular shapes and hit areas with three points (x,y), (x2,y2), (x3,y3). Points are stored in counter-clockwise order.

    // Basic triangle creation
    const triangle = new Triangle(0, 0, 100, 0, 50, 50);
    // Use as hit area
    container.hitArea = new Triangle(0, 0, 100, 0, 50, 100);
    // Check point containment
    const isInside = triangle.contains(mouseX, mouseY);
    // Get bounding box
    const bounds = triangle.getBounds();

    Implements

    Index

    Constructors

    constructor

    Properties

    type x x2 x3 y y2 y3

    Methods

    clone contains copyFrom copyTo getBounds strokeContains

    Constructors

    • Parameters

      • x: number = 0

        The X coord of the first point.

      • y: number = 0

        The Y coord of the first point.

      • x2: number = 0

        The X coord of the second point.

      • y2: number = 0

        The Y coord of the second point.

      • x3: number = 0

        The X coord of the third point.

      • y3: number = 0

        The Y coord of the third point.

      Returns Triangle

    Properties

    type: SHAPE_PRIMITIVE = 'triangle'

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

    // Check shape type
    const shape = new Triangle(0, 0, 100, 0, 50, 100);
    console.log(shape.type); // 'triangle'

    // Use in type guards
    if (shape.type === 'triangle') {
        console.log(shape.x2, shape.y2);
    }

    'triangle'

    SHAPE_PRIMITIVE For all shape types

    x: number

    The X coordinate of the first point of the triangle.

    // Set first point x position
    const triangle = new Triangle();
    triangle.x = 100;

    0
    x2: number

    The X coordinate of the second point of the triangle.

    // Create horizontal line for second point
    const triangle = new Triangle(0, 0);
    triangle.x2 = triangle.x + 100; // 100 units to the right

    0
    x3: number

    The X coordinate of the third point of the triangle.

    // Create equilateral triangle
    const triangle = new Triangle(0, 0, 100, 0);
    triangle.x3 = 50;  // Middle point x
    triangle.y3 = 86.6; // Height using sin(60°)

    0
    y: number

    The Y coordinate of the first point of the triangle.

    // Set first point y position
    const triangle = new Triangle();
    triangle.y = 100;

    0
    y2: number

    The Y coordinate of the second point of the triangle.

    // Create vertical line for second point
    const triangle = new Triangle(0, 0);
    triangle.y2 = triangle.y + 100; // 100 units down

    0
    y3: number

    The Y coordinate of the third point of the triangle.

    // Create right triangle
    const triangle = new Triangle(0, 0, 100, 0);
    triangle.x3 = 0;   // Align with first point
    triangle.y3 = 100; // 100 units down

    0

    Methods

    • Creates a clone of this Triangle

      Returns Triangle

      A copy of the triangle

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

      // Clone and modify
      const modified = original.clone();
      modified.x3 = 75;
      modified.y3 = 150;

      // Verify independence
      console.log(original.y3);  // 100
      console.log(modified.y3);  // 150

    • Checks whether the x and y coordinates given are contained within this triangle

      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 Triangle

      // Basic containment check
      const triangle = new Triangle(0, 0, 100, 0, 50, 100);
      const isInside = triangle.contains(25, 25); // true
      • Uses barycentric coordinate system
      • Works with any triangle shape

    • Copies another triangle to this one.

      Parameters

      • triangle: Triangle

        The triangle to copy from

      Returns this

      Returns itself

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

      // Chain with other operations
      const triangle = new Triangle()
          .copyFrom(source)
          .getBounds(rect);

    • Copies this triangle to another one.

      Parameters

      • triangle: Triangle

        The triangle to copy to

      Returns Triangle

      Returns given parameter

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

      // Chain with other operations
      const result = source
          .copyTo(new Triangle())
          .getBounds();
      • Updates target triangle values
      • Copies all point coordinates
      • Returns target for chaining
      • More efficient than clone()

    • Returns the framing rectangle of the triangle as a Rectangle object

      Parameters

      • Optionalout: Rectangle

        Optional rectangle to store the result

      Returns Rectangle

      The framing rectangle

      // Basic bounds calculation
      const triangle = new Triangle(0, 0, 100, 0, 50, 100);
      const bounds = triangle.getBounds();
      // bounds: x=0, y=0, width=100, height=100

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

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

      Parameters

      • pointX: number

        The X coordinate of the point to test

      • pointY: 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 triangle's stroke

      // Basic stroke check
      const triangle = new Triangle(0, 0, 100, 0, 50, 100);
      const isOnStroke = triangle.strokeContains(25, 25, 4); // 4px line width

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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods