pixi.js
    Preparing search index...

    Class Circle

    The Circle object represents a circle shape in a two-dimensional coordinate system. Used for drawing graphics and specifying hit areas for containers.

    // Basic circle creation
    const circle = new Circle(100, 100, 50);

    // Use as hit area
    container.hitArea = new Circle(0, 0, 100);

    // Check point containment
    const isInside = circle.contains(mouseX, mouseY);

    // Get bounding box
    const bounds = circle.getBounds();
    • Defined by center (x,y) and radius
    • Supports point containment tests
    • Can check stroke intersections

    Rectangle For rectangular shapes

    Implements

    Index

    Constructors

    • Parameters

      • x: number = 0

        The X coordinate of the center of this circle

      • y: number = 0

        The Y coordinate of the center of this circle

      • radius: number = 0

        The radius of the circle

      Returns Circle

    Properties

    radius: number

    The radius of the circle

    // Basic radius setting
    const circle = new Circle(100, 100);
    circle.radius = 50;

    // Calculate area
    const area = Math.PI * circle.radius * circle.radius;
    0
    
    type: SHAPE_PRIMITIVE = 'circle'

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

    // Check shape type
    const shape = new Circle(0, 0, 50);
    console.log(shape.type); // 'circle'

    // Use in type guards
    if (shape.type === 'circle') {
    console.log(shape.radius);
    }
    • Used for shape type checking
    • More efficient than instanceof
    • Read-only property
    'circle'
    
    x: number

    The X coordinate of the center of this circle

    // Basic x position
    const circle = new Circle();
    circle.x = 100;

    // Center circle on point
    circle.x = point.x;
    0
    
    y: number

    The Y coordinate of the center of this circle

    // Basic y position
    const circle = new Circle();
    circle.y = 200;

    // Center circle on point
    circle.y = point.y;
    0
    

    Methods

    • Creates a clone of this Circle instance.

      Returns Circle

      A copy of the Circle

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

      // Clone and modify
      const modified = original.clone();
      modified.radius = 75;

      // Verify independence
      console.log(original.radius); // 50
      console.log(modified.radius); // 75
    • Checks whether the x and y coordinates given are contained within this circle.

      Uses the distance formula to determine if a point is inside the circle's radius.

      Commonly used for hit testing in PixiJS events and graphics.

      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 Circle

      // Basic containment check
      const circle = new Circle(100, 100, 50);
      const isInside = circle.contains(120, 120);

      // Check mouse position
      const circle = new Circle(0, 0, 100);
      container.hitArea = circle;
      container.on('pointermove', (e) => {
      // only called if pointer is within circle
      });
    • Copies another circle to this one.

      Parameters

      • circle: Circle

        The circle to copy from

      Returns this

      Returns itself

      // Basic copying
      const source = new Circle(100, 100, 50);
      const target = new Circle();
      target.copyFrom(source);
    • Copies this circle to another one.

      Parameters

      • circle: Circle

        The circle to copy to

      Returns Circle

      Returns given parameter

      // Basic copying
      const source = new Circle(100, 100, 50);
      const target = new Circle();
      source.copyTo(target);
    • Returns the framing rectangle of the circle as a Rectangle object.

      Parameters

      • Optionalout: Rectangle

        Optional Rectangle object to store the result

      Returns Rectangle

      The framing rectangle

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

      // Reuse existing rectangle
      const rect = new Rectangle();
      circle.getBounds(rect);
    • Checks whether the x and y coordinates given are contained within this circle including the stroke.

      Parameters

      • x: number

        The X coordinate of the point to test

      • y: number

        The Y coordinate of the point to test

      • width: number

        The width of the line to check

      • alignment: number = 0.5

        The alignment of the stroke, 0.5 by default

      Returns boolean

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

      // Basic stroke check
      const circle = new Circle(100, 100, 50);
      const isOnStroke = circle.strokeContains(150, 100, 4); // 4px line width

      // Check with different alignments
      const innerStroke = circle.strokeContains(150, 100, 4, 1); // Inside
      const centerStroke = circle.strokeContains(150, 100, 4, 0.5); // Centered
      const outerStroke = circle.strokeContains(150, 100, 4, 0); // Outside
    • Returns a string representation of an object.

      Returns string