pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
249 lines (248 loc) • 8.49 kB
TypeScript
import { Rectangle } from './Rectangle';
import type { SHAPE_PRIMITIVE } from '../misc/const';
import type { ShapePrimitive } from './ShapePrimitive';
/**
* 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
* ```ts
* // 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 {@link Rectangle} For rectangular shapes
* @see {@link Circle} For circular shapes
* @see {@link Polygon} For complex shapes
* @category maths
* @standard
*/
export declare class Triangle implements ShapePrimitive {
/**
* The type of the object, mainly used to avoid `instanceof` checks
* @example
* ```ts
* // 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);
* }
* ```
* @readonly
* @default 'triangle'
* @see {@link SHAPE_PRIMITIVE} For all shape types
*/
readonly type: SHAPE_PRIMITIVE;
/**
* The X coordinate of the first point of the triangle.
* @example
* ```ts
* // Set first point x position
* const triangle = new Triangle();
* triangle.x = 100;
* ```
* @default 0
*/
x: number;
/**
* The Y coordinate of the first point of the triangle.
* @example
* ```ts
* // Set first point y position
* const triangle = new Triangle();
* triangle.y = 100;
* ```
* @default 0
*/
y: number;
/**
* The X coordinate of the second point of the triangle.
* @example
* ```ts
* // Create horizontal line for second point
* const triangle = new Triangle(0, 0);
* triangle.x2 = triangle.x + 100; // 100 units to the right
* ```
* @default 0
*/
x2: number;
/**
* The Y coordinate of the second point of the triangle.
* @example
* ```ts
* // Create vertical line for second point
* const triangle = new Triangle(0, 0);
* triangle.y2 = triangle.y + 100; // 100 units down
* ```
* @default 0
*/
y2: number;
/**
* The X coordinate of the third point of the triangle.
* @example
* ```ts
* // 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
*/
x3: number;
/**
* The Y coordinate of the third point of the triangle.
* @example
* ```ts
* // 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
*/
y3: number;
/**
* @param x - The X coord of the first point.
* @param y - The Y coord of the first point.
* @param x2 - The X coord of the second point.
* @param y2 - The Y coord of the second point.
* @param x3 - The X coord of the third point.
* @param y3 - The Y coord of the third point.
*/
constructor(x?: number, y?: number, x2?: number, y2?: number, x3?: number, y3?: number);
/**
* Checks whether the x and y coordinates given are contained within this triangle
* @example
* ```ts
* // 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
* @param x - The X coordinate of the point to test
* @param y - The Y coordinate of the point to test
* @returns Whether the x/y coordinates are within this Triangle
* @see {@link Triangle.strokeContains} For checking stroke intersection
* @see {@link Triangle.getBounds} For getting containing rectangle
*/
contains(x: number, y: number): boolean;
/**
* Checks whether the x and y coordinates given are contained within this triangle including the stroke.
* @example
* ```ts
* // 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
* ```
* @param pointX - The X coordinate of the point to test
* @param pointY - The Y coordinate of the point to test
* @param strokeWidth - The width of the line to check
* @param _alignment - The alignment of the stroke (0 = inner, 0.5 = centered, 1 = outer)
* @returns Whether the x/y coordinates are within this triangle's stroke
* @see {@link Triangle.contains} For checking fill containment
* @see {@link Triangle.getBounds} For getting stroke bounds
*/
strokeContains(pointX: number, pointY: number, strokeWidth: number, _alignment?: number): boolean;
/**
* Creates a clone of this Triangle
* @example
* ```ts
* // 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
* ```
* @returns A copy of the triangle
* @see {@link Triangle.copyFrom} For copying into existing triangle
* @see {@link Triangle.copyTo} For copying to another triangle
*/
clone(): Triangle;
/**
* Copies another triangle to this one.
* @example
* ```ts
* // 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);
* ```
* @param triangle - The triangle to copy from
* @returns Returns itself
* @see {@link Triangle.copyTo} For copying to another triangle
* @see {@link Triangle.clone} For creating new triangle copy
*/
copyFrom(triangle: Triangle): this;
/**
* Copies this triangle to another one.
* @example
* ```ts
* // 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()
* @param triangle - The triangle to copy to
* @returns Returns given parameter
* @see {@link Triangle.copyFrom} For copying from another triangle
* @see {@link Triangle.clone} For creating new triangle copy
*/
copyTo(triangle: Triangle): Triangle;
/**
* Returns the framing rectangle of the triangle as a Rectangle object
* @example
* ```ts
* // 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);
* ```
* @param out - Optional rectangle to store the result
* @returns The framing rectangle
* @see {@link Rectangle} For rectangle properties
* @see {@link Triangle.contains} For checking if a point is inside
*/
getBounds(out?: Rectangle): Rectangle;
}