LogoPixi’VN
pixi-jsClasses

Class: Rectangle

pixi-vn on GitHubPatreon

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:5

The Rectangle object represents a rectangular area defined by its position and dimensions. Used for hit testing, bounds calculation, and general geometric operations.

Example

// Basic rectangle creation
const rect = new Rectangle(100, 100, 200, 150);

// Use as container bounds
container.hitArea = new Rectangle(0, 0, 100, 100);

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

// Manipulate dimensions
rect.width *= 2;
rect.height += 50;

Remarks

  • Position defined by top-left corner (x,y)
  • Dimensions defined by width and height
  • Supports point and rectangle containment
  • Common in UI and layout calculations

See

Standard

Extends

  • Rectangle

Implements

Constructors

Constructor

> new Rectangle(x?, y?, width?, height?): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:105

Parameters

x?

string | number

The X coordinate of the upper-left corner of the rectangle

y?

string | number

The Y coordinate of the upper-left corner of the rectangle

width?

string | number

The overall width of the rectangle

height?

string | number

The overall height of the rectangle

Returns

Rectangle

Inherited from

PixiMixins.Rectangle.constructor

Properties

height

> height: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:98

The overall height of this rectangle

Example

// Basic height setting
const rect = new Rectangle();
rect.height = 150;

Default

0

type

> readonly type: SHAPE_PRIMITIVE

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:54

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

Example

// Check shape type
const shape = new Rectangle(0, 0, 100, 100);
console.log(shape.type); // 'rectangle'

// Use in type guards
if (shape.type === 'rectangle') {
    console.log(shape.width, shape.height);
}

Default

'rectangle'

See

SHAPE_PRIMITIVE For all shape types

Implementation of

ShapePrimitive.type

width

> width: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:87

The overall width of this rectangle

Example

// Basic width setting
const rect = new Rectangle();
rect.width = 200;

Default

0

x

> x: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:65

The X coordinate of the upper-left corner of the rectangle

Example

// Basic x position
const rect = new Rectangle();
rect.x = 100;

Default

0

Implementation of

ShapePrimitive.x

y

> y: number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:76

The Y coordinate of the upper-left corner of the rectangle

Example

// Basic y position
const rect = new Rectangle();
rect.y = 100;

Default

0

Implementation of

ShapePrimitive.y

Accessors

bottom

Get Signature

> get bottom(): number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:193

Returns the bottom edge (y + height) of the rectangle.

Example
// Get bottom edge position
const rect = new Rectangle(100, 100, 200, 150);
console.log(rect.bottom); // 250

// Stack below rectangle
sprite.y = rect.bottom + margin;

// Check vertical bounds
if (point.y < rect.bottom) {
    console.log('Point is above bottom edge');
}
See
Returns

number

The y-coordinate of the bottom edge

left

Get Signature

> get left(): number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:127

Returns the left edge (x-coordinate) of the rectangle.

Example
// Get left edge position
const rect = new Rectangle(100, 100, 200, 150);
console.log(rect.left); // 100

// Use in alignment calculations
sprite.x = rect.left + padding;

// Compare positions
if (point.x > rect.left) {
    console.log('Point is right of rectangle');
}
See
Returns

number

The x-coordinate of the left edge

right

Get Signature

> get right(): number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:149

Returns the right edge (x + width) of the rectangle.

Example
// Get right edge position
const rect = new Rectangle(100, 100, 200, 150);
console.log(rect.right); // 300

// Align to right edge
sprite.x = rect.right - sprite.width;

// Check boundaries
if (point.x < rect.right) {
    console.log('Point is inside right bound');
}
See
Returns

number

The x-coordinate of the right edge

top

Get Signature

> get top(): number

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:171

Returns the top edge (y-coordinate) of the rectangle.

Example
// Get top edge position
const rect = new Rectangle(100, 100, 200, 150);
console.log(rect.top); // 100

// Position above rectangle
sprite.y = rect.top - sprite.height;

// Check vertical position
if (point.y > rect.top) {
    console.log('Point is below top edge');
}
See
Returns

number

The y-coordinate of the top edge

EMPTY

Get Signature

> get static EMPTY(): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:218

A constant empty rectangle. This is a new object every time the property is accessed.

Example
// Get fresh empty rectangle
const empty = Rectangle.EMPTY;
console.log(empty.isEmpty()); // true
See

Rectangle.isEmpty For empty state testing

Returns

Rectangle

A new empty rectangle instance

Methods

ceil()

> ceil(resolution?, eps?): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:440

Enlarges rectangle so that its corners lie on a grid defined by resolution.

Parameters

resolution?

number

The grid size to align to (1 = whole pixels)

eps?

number

Small number to prevent floating point errors

Returns

this

Returns itself

Example

// Basic grid alignment
const rect = new Rectangle(10.2, 10.6, 100.8, 100.4);
rect.ceil(); // Aligns to whole pixels

// Custom resolution grid
const uiRect = new Rectangle(5.3, 5.7, 50.2, 50.8);
uiRect.ceil(0.5); // Aligns to half pixels

// Use with precision value
const preciseRect = new Rectangle(20.001, 20.999, 100.001, 100.999);
preciseRect.ceil(1, 0.01); // Handles small decimal variations

See

clone()

> clone(): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:240

Creates a clone of this Rectangle

Returns

Rectangle

A copy of the rectangle

Example

// Basic cloning
const original = new Rectangle(100, 100, 200, 150);
const copy = original.clone();

// Clone and modify
const modified = original.clone();
modified.width *= 2;
modified.height += 50;

// Verify independence
console.log(original.width);  // 200
console.log(modified.width);  // 400

See

contains()

> contains(x, y): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:312

Checks whether the x and y coordinates given are contained within this Rectangle

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 Rectangle

Example

// Basic containment check
const rect = new Rectangle(100, 100, 200, 150);
const isInside = rect.contains(150, 125); // true
// Check edge cases
console.log(rect.contains(100, 100)); // true (on edge)
console.log(rect.contains(300, 250)); // false (outside)

See

containsRect()

> containsRect(other): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:528

Determines whether another Rectangle is fully contained within this Rectangle.

Rectangles that occupy the same space are considered to be containing each other.

Rectangles without area (width or height equal to zero) can't contain anything, not even other arealess rectangles.

Parameters

other

Rectangle

The Rectangle to check for containment

Returns

boolean

True if other is fully contained within this Rectangle

Example

// Check if one rectangle contains another
const container = new Rectangle(0, 0, 100, 100);
const inner = new Rectangle(25, 25, 50, 50);

console.log(container.containsRect(inner)); // true

// Check overlapping rectangles
const partial = new Rectangle(75, 75, 50, 50);
console.log(container.containsRect(partial)); // false

// Zero-area rectangles
const empty = new Rectangle(0, 0, 0, 100);
console.log(container.containsRect(empty)); // false

See

copyFrom()

> copyFrom(rectangle): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:274

Copies another rectangle to this one.

Parameters

rectangle

Rectangle

The rectangle to copy from

Returns

Rectangle

Returns itself

Example

// Basic copying
const source = new Rectangle(100, 100, 200, 150);
const target = new Rectangle();
target.copyFrom(source);

// Chain with other operations
const rect = new Rectangle()
    .copyFrom(source)
    .pad(10);

See

copyFromBounds()

> copyFromBounds(bounds): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:254

Converts a Bounds object to a Rectangle object.

Parameters

bounds

Bounds

The bounds to copy and convert to a rectangle

Returns

this

Returns itself

Example

// Convert bounds to rectangle
const bounds = container.getBounds();
const rect = new Rectangle().copyFromBounds(bounds);

See

copyTo()

> copyTo(rectangle): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:294

Copies this rectangle to another one.

Parameters

rectangle

Rectangle

The rectangle to copy to

Returns

Rectangle

Returns given parameter

Example

// Basic copying
const source = new Rectangle(100, 100, 200, 150);
const target = new Rectangle();
source.copyTo(target);

// Chain with other operations
const result = source
    .copyTo(new Rectangle())
    .getBounds();

See

enlarge()

> enlarge(rectangle): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:481

Enlarges this rectangle to include the passed rectangle.

Parameters

rectangle

Rectangle

The rectangle to include

Returns

this

Returns itself

Example

// Basic enlargement
const rect = new Rectangle(50, 50, 100, 100);
const other = new Rectangle(0, 0, 200, 75);
rect.enlarge(other);
// rect is now: x=0, y=0, width=200, height=150

// Use for bounding box calculation
const bounds = new Rectangle();
objects.forEach((obj) => {
    bounds.enlarge(obj.getBounds());
});

See

equals()

> equals(other): boolean

Defined in: node_modules/pixi.js/lib/math-extras/MathExtraMixins.d.ts:39

Accepts other Rectangle and returns true if the given Rectangle is equal to this Rectangle. > [!IMPORTANT] Only available with pixi.js/math-extras.

Parameters

other

Rectangle

The Rectangle to compare with this

Returns

boolean

Returns true if all x, y, width, and height are equal.

Example

// Basic equality check
const rect1 = new Rectangle(0, 0, 100, 100);
const rect2 = new Rectangle(0, 0, 100, 100);
console.log(rect1.equals(rect2)); // true

// Check after modifications
rect2.width = 200;
console.log(rect1.equals(rect2)); // false

// Compare with offset rectangle
const offset = new Rectangle(10, 10, 100, 100);
console.log(rect1.equals(offset)); // false

Inherited from

PixiMixins.Rectangle.equals

fit()

> fit(rectangle): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:417

Fits this rectangle around the passed one.

Parameters

rectangle

Rectangle

The rectangle to fit around

Returns

this

Returns itself

Example

// Basic fitting
const container = new Rectangle(0, 0, 100, 100);
const content = new Rectangle(25, 25, 200, 200);
content.fit(container); // Clips to container bounds

See

getBounds()

> getBounds(out?): Rectangle

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:499

Returns the framing rectangle of the rectangle as a Rectangle object

Parameters

out?

Rectangle

Optional rectangle to store the result

Returns

Rectangle

The framing rectangle

Example

// Basic bounds retrieval
const rect = new Rectangle(100, 100, 200, 150);
const bounds = rect.getBounds();

// Reuse existing rectangle
const out = new Rectangle();
rect.getBounds(out);

See

intersection()

> intersection<T>(other, outRect?): T

Defined in: node_modules/pixi.js/lib/math-extras/MathExtraMixins.d.ts:75

If the area of the intersection between the Rectangles other and this is not zero, returns the area of intersection as a Rectangle object. Otherwise, return an empty Rectangle with its properties set to zero.

Rectangles without area (width or height equal to zero) can't intersect or be intersected and will always return an empty rectangle with its properties set to zero.

> [!IMPORTANT] Only available with pixi.js/math-extras.

Type Parameters

T

T extends Rectangle = Rectangle

Parameters

other

Rectangle

The Rectangle to intersect with this.

outRect?

T

A Rectangle object in which to store the value, optional (otherwise will create a new Rectangle).

Returns

T

The intersection of this and other.

Example

// Basic intersection check
const rect1 = new Rectangle(0, 0, 100, 100);
const rect2 = new Rectangle(50, 50, 100, 100);

const overlap = rect1.intersection(rect2);
console.log(overlap); // Rectangle(50, 50, 50, 50)

// Using output rectangle
const out = new Rectangle();
rect1.intersection(rect2, out);

// Zero-area rectangles
const empty = new Rectangle(0, 0, 0, 100);
const result = rect1.intersection(empty);
console.log(result); // Rectangle(0, 0, 0, 0)

See

Inherited from

PixiMixins.Rectangle.intersection

intersects()

> intersects(other, transform?): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:376

Determines whether the other Rectangle transformed by transform intersects with this Rectangle object.

Returns true only if the area of the intersection is greater than 0. This means that rectangles sharing only a side are not considered intersecting.

Parameters

other

Rectangle

The Rectangle to intersect with this

transform?

Matrix

Optional transformation matrix of other

Returns

boolean

True if the transformed other Rectangle intersects with this

Example

// Basic intersection check
const rect1 = new Rectangle(0, 0, 100, 100);
const rect2 = new Rectangle(50, 50, 100, 100);
console.log(rect1.intersects(rect2)); // true

// With transformation matrix
const matrix = new Matrix();
matrix.rotate(Math.PI / 4); // 45 degrees
console.log(rect1.intersects(rect2, matrix)); // Checks with rotation

// Edge cases
const zeroWidth = new Rectangle(0, 0, 0, 100);
console.log(rect1.intersects(zeroWidth)); // false (no area)

Remarks

  • Returns true only if intersection area is > 0
  • Rectangles sharing only a side are not intersecting
  • Zero-area rectangles cannot intersect anything
  • Supports optional transformation matrix

See

isEmpty()

> isEmpty(): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:206

Determines whether the Rectangle is empty (has no area).

Returns

boolean

True if the rectangle has no area

Example

// Check zero dimensions
const rect = new Rectangle(100, 100, 0, 50);
console.log(rect.isEmpty()); // true

See

pad()

> pad(paddingX?, paddingY?): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:402

Pads the rectangle making it grow in all directions.

If paddingY is omitted, both paddingX and paddingY will be set to paddingX.

Parameters

paddingX?

number

The horizontal padding amount

paddingY?

number

The vertical padding amount

Returns

this

Returns itself

Example

// Basic padding
const rect = new Rectangle(100, 100, 200, 150);
rect.pad(10); // Adds 10px padding on all sides

// Different horizontal and vertical padding
const uiRect = new Rectangle(0, 0, 100, 50);
uiRect.pad(20, 10); // 20px horizontal, 10px vertical

Remarks

  • Adjusts x/y by subtracting padding
  • Increases width/height by padding * 2
  • Common in UI layout calculations
  • Chainable with other methods

See

scale()

> scale(x, y?): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:459

Scales the rectangle's dimensions and position by the specified factors.

Parameters

x

number

The factor by which to scale the horizontal properties (x, width).

y?

number

The factor by which to scale the vertical properties (y, height).

Returns

this

Returns itself

Example

const rect = new Rectangle(50, 50, 100, 100);

// Scale uniformly
rect.scale(0.5, 0.5);
// rect is now: x=25, y=25, width=50, height=50

// non-uniformly
rect.scale(0.5, 1);
// rect is now: x=25, y=50, width=50, height=100

set()

> set(x, y, width, height): this

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:550

Sets the position and dimensions of the rectangle.

Parameters

x

number

The X coordinate of the upper-left corner of the rectangle

y

number

The Y coordinate of the upper-left corner of the rectangle

width

number

The overall width of the rectangle

height

number

The overall height of the rectangle

Returns

this

Returns itself for method chaining

Example

// Basic usage
const rect = new Rectangle();
rect.set(100, 100, 200, 150);

// Chain with other operations
const bounds = new Rectangle()
    .set(0, 0, 100, 100)
    .pad(10);

See

strokeContains()

> strokeContains(x, y, strokeWidth, alignment?): boolean

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:334

Checks whether the x and y coordinates given are contained within this rectangle including the 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

The alignment of the stroke (1 = inner, 0.5 = centered, 0 = outer)

Returns

boolean

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

Example

// Basic stroke check
const rect = new Rectangle(100, 100, 200, 150);
const isOnStroke = rect.strokeContains(150, 100, 4); // 4px line width

// Check with different alignments
const innerStroke = rect.strokeContains(150, 100, 4, 1);   // Inside
const centerStroke = rect.strokeContains(150, 100, 4, 0.5); // Centered
const outerStroke = rect.strokeContains(150, 100, 4, 0);   // Outside

See

toString()

> toString(): string

Defined in: node_modules/pixi.js/lib/maths/shapes/Rectangle.d.ts:551

Returns a string representation of an object.

Returns

string

union()

> union<T>(other, outRect?): T

Defined in: node_modules/pixi.js/lib/math-extras/MathExtraMixins.d.ts:106

Adds this and other Rectangles together to create a new Rectangle object filling the horizontal and vertical space between the two rectangles. > [!IMPORTANT] Only available with pixi.js/math-extras.

Type Parameters

T

T extends Rectangle = Rectangle

Parameters

other

Rectangle

The Rectangle to unite with this

outRect?

T

Optional Rectangle to store the result

Returns

T

The union of this and other

Example

// Basic union
const rect1 = new Rectangle(0, 0, 100, 100);
const rect2 = new Rectangle(50, 50, 100, 100);
const combined = rect1.union(rect2);
console.log(combined); // Rectangle(0, 0, 150, 150)

// Using output rectangle
const out = new Rectangle();
rect1.union(rect2, out);

// Chain multiple unions
const rect3 = new Rectangle(200, 200, 50, 50);
const result = rect1.union(rect2).union(rect3);

See

Inherited from

PixiMixins.Rectangle.union

Class: QuadGeometry

Previous Page

~~Class: RenderableGCSystem~~

Next Page