Class: Triangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:26

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.

Example

// 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();

See

• Rectangle For rectangular shapes
• Circle For circular shapes
• Polygon For complex shapes

Standard

Implements

• ShapePrimitive

Constructors

Constructor

> new Triangle(x?, y?, x2?, y2?, x3?, y3?): Triangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:121

Parameters

x?

number

The X coord of the first point.

y?

number

The Y coord of the first point.

x2?

number

The X coord of the second point.

y2?

number

The Y coord of the second point.

x3?

number

The X coord of the third point.

y3?

number

The Y coord of the third point.

Returns

Triangle

Properties

type

> readonly type: SHAPE_PRIMITIVE

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:44

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

Example

// 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);
}

Default

'triangle'

See

SHAPE_PRIMITIVE For all shape types

Implementation of

ShapePrimitive.type

x

> x: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:55

The X coordinate of the first point of the triangle.

Example

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

Default

0

Implementation of

ShapePrimitive.x

x2

> x2: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:77

The X coordinate of the second point of the triangle.

Example

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

Default

0

x3

> x3: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:100

The X coordinate of the third point of the triangle.

Example

// 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°)

Default

0

y

> y: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:66

The Y coordinate of the first point of the triangle.

Example

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

Default

0

Implementation of

ShapePrimitive.y

y2

> y2: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:88

The Y coordinate of the second point of the triangle.

Example

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

Default

0

y3

> y3: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:112

The Y coordinate of the third point of the triangle.

Example

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

Default

0

Methods

clone()

> clone(): Triangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:183

Creates a clone of this Triangle

Returns

Triangle

A copy of the triangle

Example

// 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

See

• Triangle.copyFrom For copying into existing triangle
• Triangle.copyTo For copying to another triangle

Implementation of

ShapePrimitive.clone

contains()

> contains(x, y): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:139

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

Example

// Basic containment check
const triangle = new Triangle(0, 0, 100, 0, 50, 100);
const isInside = triangle.contains(25, 25); // true

Remarks

• Uses barycentric coordinate system
• Works with any triangle shape

See

• Triangle.strokeContains For checking stroke intersection
• Triangle.getBounds For getting containing rectangle

Implementation of

ShapePrimitive.contains

copyFrom()

> copyFrom(triangle): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:203

Copies another triangle to this one.

Parameters

triangle

Triangle

The triangle to copy from

Returns

this

Returns itself

Example

// 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);

See

• Triangle.copyTo For copying to another triangle
• Triangle.clone For creating new triangle copy

Implementation of

ShapePrimitive.copyFrom

copyTo()

> copyTo(triangle): Triangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:228

Copies this triangle to another one.

Parameters

triangle

Triangle

The triangle to copy to

Returns

Triangle

Returns given parameter

Example

// 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();

Remarks

• Updates target triangle values
• Copies all point coordinates
• Returns target for chaining
• More efficient than clone()

See

• Triangle.copyFrom For copying from another triangle
• Triangle.clone For creating new triangle copy

Implementation of

ShapePrimitive.copyTo

getBounds()

> getBounds(out?): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:247

Returns the framing rectangle of the triangle as a Rectangle object

Parameters

out?

Rectangle

Optional rectangle to store the result

Returns

Rectangle

The framing rectangle

Example

// 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);

See

• Rectangle For rectangle properties
• Triangle.contains For checking if a point is inside

Implementation of

ShapePrimitive.getBounds

strokeContains()

> strokeContains(pointX, pointY, strokeWidth, _alignment?): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Triangle.d.ts:161

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

The alignment of the stroke (1 = inner, 0.5 = centered, 0 = outer)

Returns

boolean

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

Example

// 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, 1);   // Inside
const centerStroke = triangle.strokeContains(25, 25, 4, 0.5); // Centered
const outerStroke = triangle.strokeContains(25, 25, 4, 0);   // Outside

See

• Triangle.contains For checking fill containment
• Triangle.getBounds For getting stroke bounds

Implementation of

ShapePrimitive.strokeContains