UNPKG

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

222 lines (221 loc) 7.54 kB
import { Rectangle } from './Rectangle'; import type { ShapePrimitive } from './ShapePrimitive'; /** * The Ellipse object is used to help draw graphics and can also be used to specify a hit area for containers. * @example * ```ts * // Basic ellipse creation * const ellipse = new Ellipse(100, 100, 20, 10); * * // Use as a hit area * container.hitArea = new Ellipse(0, 0, 50, 25); * * // Check point containment * const isInside = ellipse.contains(mouseX, mouseY); * * // Get bounding box * const bounds = ellipse.getBounds(); * ``` * @remarks * - Defined by center (x,y) and half dimensions * - Total width = halfWidth * 2 * - Total height = halfHeight * 2 * @see {@link Rectangle} For rectangular shapes * @see {@link Circle} For circular shapes * @category maths * @standard */ export declare class Ellipse implements ShapePrimitive { /** * The X coordinate of the center of this ellipse * @example * ```ts * // Basic x position * const ellipse = new Ellipse(); * ellipse.x = 100; * ``` * @default 0 */ x: number; /** * The Y coordinate of the center of this ellipse * @example * ```ts * // Basic y position * const ellipse = new Ellipse(); * ellipse.y = 200; * ``` * @default 0 */ y: number; /** * The half width of this ellipse * @example * ```ts * // Set half width * const ellipse = new Ellipse(100, 100); * ellipse.halfWidth = 50; // Total width will be 100 * ``` * @default 0 */ halfWidth: number; /** * The half height of this ellipse * @example * ```ts * // Set half height * const ellipse = new Ellipse(100, 100); * ellipse.halfHeight = 25; // Total height will be 50 * ``` * @default 0 */ halfHeight: number; /** * The type of the object, mainly used to avoid `instanceof` checks * @example * ```ts * // Check shape type * const shape = new Ellipse(0, 0, 50, 25); * console.log(shape.type); // 'ellipse' * * // Use in type guards * if (shape.type === 'ellipse') { * console.log(shape.halfWidth, shape.halfHeight); * } * ``` * @readonly * @default 'ellipse' * @see {@link SHAPE_PRIMITIVE} For all shape types */ readonly type = "ellipse"; /** * @param x - The X coordinate of the center of this ellipse * @param y - The Y coordinate of the center of this ellipse * @param halfWidth - The half width of this ellipse * @param halfHeight - The half height of this ellipse */ constructor(x?: number, y?: number, halfWidth?: number, halfHeight?: number); /** * Creates a clone of this Ellipse instance. * @example * ```ts * // Basic cloning * const original = new Ellipse(100, 100, 50, 25); * const copy = original.clone(); * * // Clone and modify * const modified = original.clone(); * modified.halfWidth *= 2; * modified.halfHeight *= 2; * * // Verify independence * console.log(original.halfWidth); // 50 * console.log(modified.halfWidth); // 100 * ``` * @returns A copy of the ellipse * @see {@link Ellipse.copyFrom} For copying into existing ellipse * @see {@link Ellipse.copyTo} For copying to another ellipse */ clone(): Ellipse; /** * Checks whether the x and y coordinates given are contained within this ellipse. * Uses normalized coordinates and the ellipse equation to determine containment. * @example * ```ts * // Basic containment check * const ellipse = new Ellipse(100, 100, 50, 25); * const isInside = ellipse.contains(120, 110); * ``` * @remarks * - Uses ellipse equation (x²/a² + y²/b² ≤ 1) * - Returns false if dimensions are 0 or negative * - Normalized to center (0,0) for calculation * @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 coords are within this ellipse * @see {@link Ellipse.strokeContains} For checking stroke intersection * @see {@link Ellipse.getBounds} For getting containing rectangle */ contains(x: number, y: number): boolean; /** * Checks whether the x and y coordinates given are contained within this ellipse including stroke. * @example * ```ts * // Basic stroke check * const ellipse = new Ellipse(100, 100, 50, 25); * const isOnStroke = ellipse.strokeContains(150, 100, 4); // 4px line width * * // Check with different alignments * const innerStroke = ellipse.strokeContains(150, 100, 4, 0); // Inside * const centerStroke = ellipse.strokeContains(150, 100, 4, 0.5); // Centered * const outerStroke = ellipse.strokeContains(150, 100, 4, 1); // Outside * ``` * @remarks * - Uses normalized ellipse equations * - Considers stroke alignment * - Returns false if dimensions are 0 * @param x - The X coordinate of the point to test * @param y - 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 coords are within this ellipse's stroke * @see {@link Ellipse.contains} For checking fill containment * @see {@link Ellipse.getBounds} For getting stroke bounds */ strokeContains(x: number, y: number, strokeWidth: number, alignment?: number): boolean; /** * Returns the framing rectangle of the ellipse as a Rectangle object. * @example * ```ts * // Basic bounds calculation * const ellipse = new Ellipse(100, 100, 50, 25); * const bounds = ellipse.getBounds(); * // bounds: x=50, y=75, width=100, height=50 * * // Reuse existing rectangle * const rect = new Rectangle(); * ellipse.getBounds(rect); * ``` * @remarks * - Creates Rectangle if none provided * - Top-left is (x-halfWidth, y-halfHeight) * - Width is halfWidth * 2 * - Height is halfHeight * 2 * @param out - Optional Rectangle object to store the result * @returns The framing rectangle * @see {@link Rectangle} For rectangle properties * @see {@link Ellipse.contains} For checking if a point is inside */ getBounds(out?: Rectangle): Rectangle; /** * Copies another ellipse to this one. * @example * ```ts * // Basic copying * const source = new Ellipse(100, 100, 50, 25); * const target = new Ellipse(); * target.copyFrom(source); * ``` * @param ellipse - The ellipse to copy from * @returns Returns itself * @see {@link Ellipse.copyTo} For copying to another ellipse * @see {@link Ellipse.clone} For creating new ellipse copy */ copyFrom(ellipse: Ellipse): this; /** * Copies this ellipse to another one. * @example * ```ts * // Basic copying * const source = new Ellipse(100, 100, 50, 25); * const target = new Ellipse(); * source.copyTo(target); * ``` * @param ellipse - The ellipse to copy to * @returns Returns given parameter * @see {@link Ellipse.copyFrom} For copying from another ellipse * @see {@link Ellipse.clone} For creating new ellipse copy */ copyTo(ellipse: Ellipse): Ellipse; toString(): string; }