Rect

An axis-aligned rectangle defined by a centre position and a size, with cached corners.

Move the pointer around the rectangle. The ghost is the unconstrained point; the filled circle is that same Vec2 after clamp() against the inner box, so the disc never crosses the outer edge. The caption is getDistance() from the pointer to the rectangle centre.

The constructor takes width and height first, then the centre. topLeftCorner and bottomRightCorner are recomputed whenever you move or resize it, so containment tests and clamping read them directly instead of deriving them every frame.

As with Circ, occupancy is opt-in through setGrid(), after which gridCells lists every cell the rectangle covers. Vec2.clamp() takes a Rect, which makes it the natural type for bounds.

import { Rect, Vec2 } from '@1pizzateam/spock';

const bounds = new Rect(640, 360, 320, 180);

const pointer = new Vec2(700, -20).clamp(bounds);
const distance = pointer.getDistance(bounds.position);
const inside = bounds.isIn(pointer); // true

Constructor

Rect of width × height centered at (positionX, positionY).

Takes width and height first, then the centre — not the top-left corner. The corners are derived for you.

new Rect(width: number, height: number, positionX: number, positionY: number)

Parameters

• width — number.
• height — number.
• positionX — number.
• positionY — number.

Returns

Rect

Example

import { Rect } from '@1pizzateam/spock';

const value = new Rect(100, 100, 1, 1);

Rect.clone()

Copy with the same grid.

Returns a new rectangle with the same size, position, and grid.

clone(): Rect

Parameters

None.

Returns

Rect — the new rectangle

Example

import { Rect } from '@1pizzateam/spock';


const result = new Rect(20, 10, 0, 0).clone();

Rect.copy()

Copy size, position, and grid from another rectangle.

Overwrites this rectangle from another one, grid included, and reuses the instance.

copy(rect: Rect): Rect

Parameters

• rect — Rect.

Returns

Rect — the rectangle with its new values

Example

import { Rect } from '@1pizzateam/spock';


const result = new Rect(20, 10, 0, 0).copy(new Rect(10, 10, 0, 0));

Rect.setGrid()

Attach a grid for occupancy, or clear it.

Attaches a Grid and fills gridCells with every cell the rectangle covers. Pass null to detach.

setGrid(grid: Grid | null): Rect

Parameters

• grid — Grid | null.

Returns

Rect

Example

import { Rect, Grid } from '@1pizzateam/spock';


const result = new Rect(20, 10, 0, 0).setGrid(new Grid(100, 100, 10));

Rect.setPosition()

Move the center to a position vector and refresh corners and occupancy together, so nothing goes stale.

setPosition(position: Vec2): Rect

Parameters

• position — Vec2. Center position vector.

Returns

Rect — the rectangle with its new values

Example

import { Rect, Vec2 } from '@1pizzateam/spock';

const rect = new Rect(20, 10, 0, 0);
rect.setPosition(new Vec2(15, 20));

Rect.translate()

Translate center and corners by an offset vector in-place and refresh occupancy.

translate(offset: Vec2): Rect

Parameters

• offset — Vec2. Displacement vector.

Returns

Rect

Example

import { Rect, Vec2 } from '@1pizzateam/spock';

const rect = new Rect(20, 10, 0, 0);
rect.translate(new Vec2(5, 10));

Rect.getClosestPoint()

Closest point on or within the rectangle to an external point.

getClosestPoint(point: Vec2, target?: Vec2): Vec2

Parameters

• point — Vec2.
• target — Vec2. Optional.

Returns

Vec2

Rect.setSize()

Resize and refresh corners and occupancy.

Resizes about the centre, refreshing the half-size, the corners, and occupancy.

setSize(width: number, height: number): Rect

Parameters

• width — number.
• height — number.

Returns

Rect — the rectangle with its new values

Example

import { Rect } from '@1pizzateam/spock';


const result = new Rect(20, 10, 0, 0).setSize(100, 100);

Rect.isIn()

True if the point lies inside or on the rectangle.

Inclusive point test against the cached corners, so points on the edge count as inside.

isIn(vector: Vec2): boolean

Parameters

• vector — Vec2.

Returns

boolean — The result of the test

Example

import { Rect, Vec2 } from '@1pizzateam/spock';


const result = new Rect(20, 10, 0, 0).isIn(new Vec2(1, 2));

Rect.draw()

Draw the rectangle on a canvas.

Draws from the top-left corner at the current size. An empty colour string skips the fill or the stroke.

draw(context: CanvasRenderingContext2D, fillColor: string, strokeColor: string, strokeWidth: number): void

Parameters

• context — CanvasRenderingContext2D.
• fillColor — string.
• strokeColor — string.
• strokeWidth — number.

Returns

void

Example

import { Rect } from '@1pizzateam/spock';

const context = document.querySelector('canvas').getContext('2d');

const result = new Rect(20, 10, 0, 0).draw(context, '#5b8cff', '#5b8cff', 1);