Rectangle¶

Overview¶

A rectangular node that inherits Path, and allows for optimized drawing and improved rectangle handling.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class Rectangle¶

import { Rectangle } from 'scenerystack/scenery';

Constructor¶

new Rectangle( options? : RectangleOptions )¶

Instance Methods¶

setRect( x : number, y : number, width : number, height : number, cornerXRadius? : number, cornerYRadius? : number ) : this¶

Sets all of the shape-determining parameters for the rectangle.

@param x - The x-position of the left side of the rectangle. @param y - The y-position of the top side of the rectangle. @param width - The width of the rectangle. @param height - The height of the rectangle. @param [cornerXRadius] - The horizontal radius of curved corners (0 for sharp corners) @param [cornerYRadius] - The vertical radius of curved corners (0 for sharp corners)

setRectX( x : number ) : this¶

Sets the x coordinate of the left side of this rectangle (in the local coordinate frame).

getRectX() : number¶

Returns the x coordinate of the left side of this rectangle (in the local coordinate frame).

setRectY( y : number ) : this¶

Sets the y coordinate of the top side of this rectangle (in the local coordinate frame).

getRectY() : number¶

Returns the y coordinate of the top side of this rectangle (in the local coordinate frame).

setRectWidth( width : number ) : this¶

Sets the width of the rectangle (in the local coordinate frame).

getRectWidth() : number¶

Returns the width of the rectangle (in the local coordinate frame).

setRectHeight( height : number ) : this¶

Sets the height of the rectangle (in the local coordinate frame).

getRectHeight() : number¶

Returns the height of the rectangle (in the local coordinate frame).

setCornerXRadius( radius : number ) : this¶

Sets the horizontal corner radius of the rectangle (in the local coordinate frame).

If the cornerXRadius and cornerYRadius are the same, the corners will be rounded circular arcs with that radius (or a smaller radius if the rectangle is too small).

If the cornerXRadius and cornerYRadius are different, the corners will be elliptical arcs, and the horizontal radius will be equal to cornerXRadius (or a smaller radius if the rectangle is too small).

getCornerXRadius() : number¶

Returns the horizontal corner radius of the rectangle (in the local coordinate frame).

setCornerYRadius( radius : number ) : this¶

Sets the vertical corner radius of the rectangle (in the local coordinate frame).

If the cornerXRadius and cornerYRadius are the same, the corners will be rounded circular arcs with that radius (or a smaller radius if the rectangle is too small).

If the cornerXRadius and cornerYRadius are different, the corners will be elliptical arcs, and the vertical radius will be equal to cornerYRadius (or a smaller radius if the rectangle is too small).

getCornerYRadius() : number¶

Returns the vertical corner radius of the rectangle (in the local coordinate frame).

setRectBounds( bounds : Bounds2 ) : this¶

Sets the Rectangle's x/y/width/height from the Bounds2 passed in.

getRectBounds() : Bounds2¶

Returns a new Bounds2 generated from this Rectangle's x/y/width/height.

setRectSize( size : Dimension2 ) : this¶

Sets the Rectangle's width/height from the Dimension2 size passed in.

getRectSize() : Dimension2¶

Returns a new Dimension2 generated from this Rectangle's width/height.

setRectWidthFromRight( width : number ) : this¶

Sets the width of the rectangle while keeping its right edge (x + width) in the same position

setRectHeightFromBottom( height : number ) : this¶

Sets the height of the rectangle while keeping its bottom edge (y + height) in the same position

isRounded() : boolean¶

Returns whether this rectangle has any rounding applied at its corners. If either the x or y corner radius is 0, then there is no rounding applied.

computeShapeBounds() : Bounds2¶

Computes the bounds of the Rectangle, including any applied stroke. Overridden for efficiency.

invalidateRectangle()¶

(protected)

Notifies that the rectangle has changed, and invalidates path information and our cached shape.

invalidateStroke()¶

We need to detect stroke changes, since our preferred size computations depend on it.

containsPointSelf( point : Vector2 ) : boolean¶

Computes whether the provided point is "inside" (contained) in this Rectangle's self content, or "outside".

Handles axis-aligned optionally-rounded rectangles, although can only do optimized computation if it isn't rounded. If it IS rounded, we check if a corner computation is needed (usually isn't), and only need to check one corner for that test.

@param point - Considered to be in the local coordinate frame

intersectsBoundsSelf( bounds : Bounds2 ) : boolean¶

Returns whether this Rectangle's selfBounds is intersected by the specified bounds.

@param bounds - Bounds to test, assumed to be in the local coordinate frame.

canvasPaintSelf( wrapper : CanvasContextWrapper, matrix : Matrix3 )¶

(protected)

Draws the current Node's self representation, assuming the wrapper's Canvas context is already in the local coordinate frame of this node.

@param wrapper @param matrix - The transformation matrix already applied to the context.

setShape( shape : Shape | string | null ) : this¶

It is impossible to set another shape on this Path subtype, as its effective shape is determined by other parameters.

@param shape - Throws an error if it is not null.

getShape() : Shape¶

Returns an immutable copy of this Path subtype's representation.

NOTE: This is created lazily, so don't call it if you don't have to!

hasShape() : boolean¶

Returns whether this Path has an associated Shape (instead of no shape, represented by null)

setShapeProperty( newTarget : TReadOnlyProperty<Shape | string | null> | null ) : this¶

setCornerRadius( cornerRadius : number ) : this¶

Sets both of the corner radii to the same value, so that the rounded corners will be circular arcs.

getCornerRadius() : number¶

Returns the corner radius if both the horizontal and vertical corner radii are the same.

NOTE: If there are different horizontal and vertical corner radii, this will fail an assertion and return the horizontal radius.

mutate( options? : RectangleOptions ) : this¶

Static Methods¶

intersects( x : number, y : number, width : number, height : number, arcWidth : number, arcHeight : number, point : Vector2 ) : boolean¶

Returns whether a point is within a rounded rectangle.

@param x - X value of the left side of the rectangle @param y - Y value of the top side of the rectangle @param width - Width of the rectangle @param height - Height of the rectangle @param arcWidth - Horizontal corner radius of the rectangle @param arcHeight - Vertical corner radius of the rectangle @param point - The point that may or may not be in the rounded rectangle