The X coordinate of the center of this circle
The Y coordinate of the center of this circle
The radius of the circle
The radius of the circle
Readonly
typeThe 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);
}
The X coordinate of the center of this circle
The Y coordinate of the center of this circle
Creates a clone of this Circle instance.
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.
The X coordinate of the point to test
The Y coordinate of the point to test
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.
The circle to copy from
Returns itself
// Basic copying
const source = new Circle(100, 100, 50);
const target = new Circle();
target.copyFrom(source);
Copies this circle to another one.
The circle to copy to
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.
Optional
out: RectangleOptional Rectangle object to store the result
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.
The X coordinate of the point to test
The Y coordinate of the point to test
The width of the line to check
The alignment of the stroke, 0.5 by default
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.
The Circle object represents a circle shape in a two-dimensional coordinate system. Used for drawing graphics and specifying hit areas for containers.
Example
Remarks
See
Rectangle For rectangular shapes