pixi.js
    Preparing search index...

    Class Ellipse

    The Ellipse object is used to help draw graphics and can also be used to specify a hit area for containers.

    // 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();
    • Defined by center (x,y) and half dimensions
    • Total width = halfWidth * 2
    • Total height = halfHeight * 2

    Implements

    Index

    Constructors

    constructor

    Properties

    halfHeight halfWidth type x y

    Methods

    clone contains copyFrom copyTo getBounds strokeContains toString

    Constructors

    • Parameters

      • x: number = 0

        The X coordinate of the center of this ellipse

      • y: number = 0

        The Y coordinate of the center of this ellipse

      • halfWidth: number = 0

        The half width of this ellipse

      • halfHeight: number = 0

        The half height of this ellipse

      Returns Ellipse

    Properties

    halfHeight: number

    The half height of this ellipse

    // Set half height
    const ellipse = new Ellipse(100, 100);
    ellipse.halfHeight = 25; // Total height will be 50

    0
    halfWidth: number

    The half width of this ellipse

    // Set half width
    const ellipse = new Ellipse(100, 100);
    ellipse.halfWidth = 50; // Total width will be 100

    0
    type: "ellipse" = 'ellipse'

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

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

    'ellipse'

    SHAPE_PRIMITIVE For all shape types

    x: number

    The X coordinate of the center of this ellipse

    // Basic x position
    const ellipse = new Ellipse();
    ellipse.x = 100;

    0
    y: number

    The Y coordinate of the center of this ellipse

    // Basic y position
    const ellipse = new Ellipse();
    ellipse.y = 200;

    0

    Methods

    • Creates a clone of this Ellipse instance.

      Returns Ellipse

      A copy of the ellipse

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

    • Checks whether the x and y coordinates given are contained within this ellipse. Uses normalized coordinates and the ellipse equation to determine containment.

      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 coords are within this ellipse

      // Basic containment check
      const ellipse = new Ellipse(100, 100, 50, 25);
      const isInside = ellipse.contains(120, 110);
      • Uses ellipse equation (x²/a² + y²/b² ≤ 1)
      • Returns false if dimensions are 0 or negative
      • Normalized to center (0,0) for calculation

    • Copies another ellipse to this one.

      Parameters

      • ellipse: Ellipse

        The ellipse to copy from

      Returns this

      Returns itself

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

    • Copies this ellipse to another one.

      Parameters

      • ellipse: Ellipse

        The ellipse to copy to

      Returns Ellipse

      Returns given parameter

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

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

      Parameters

      • Optionalout: Rectangle

        Optional Rectangle object to store the result

      Returns Rectangle

      The framing rectangle

      // 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);
      • Creates Rectangle if none provided
      • Top-left is (x-halfWidth, y-halfHeight)
      • Width is halfWidth * 2
      • Height is halfHeight * 2

    • Checks whether the x and y coordinates given are contained within this ellipse including 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 (1 = inner, 0.5 = centered, 0 = outer)

      Returns boolean

      Whether the x/y coords are within this ellipse's stroke

      // 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, 1);   // Inside
      const centerStroke = ellipse.strokeContains(150, 100, 4, 0.5); // Centered
      const outerStroke = ellipse.strokeContains(150, 100, 4, 0);   // Outside
      • Uses normalized ellipse equations
      • Considers stroke alignment
      • Returns false if dimensions are 0

    • Returns a string representation of an object.

      Returns string

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods