Rectangle

Kind: class Extends: GraphicNode

Rectangle leaf node shape, with or without rounded corners. Like all shape nodes, has no fill or stroke by default unless you set one.

Example

let rect = new Rectangle();
rect.width = 100;
rect.height = 25;
rect.fill = new Color("red");
selection.insertionParent.addChild(rect);
selection.items = [rect];
CopyCopied to your clipboard
1let rect = new Rectangle();
2rect.width = 100;
3rect.height = 25;
4rect.fill = new Color("red");
5selection.insertionParent.addChild(rect);
6selection.items = [rect];

width

▸ width: number > 0

Kind: instance property of Rectangle

height

▸ height: number > 0

Kind: instance property of Rectangle

cornerRadii

▸ cornerRadii: {topLeft:number, topRight:number, bottomRight:number, bottomLeft:number}

All numbers >= 0.

Default: {topLeft:0, topRight:0, bottomRight:0, bottomLeft:0}

The actual corner radius that is rendered is capped based on the size of the rectangle even if the radius value set here is higher (see effectiveCornerRadii.

To set all corners to the same value, use setAllCornerRadii.

Kind: instance property of Rectangle

hasRoundedCorners

▸ hasRoundedCorners: boolean

True if any of the Rectangle's four corners is rounded (corner radius > 0).

Kind: instance property of Rectangle Read only: true

setAllCornerRadii()

▸ setAllCornerRadii(radius)

Set the rounding radius of all four corners of the Rectangle to the same value. The actual corner radius that is rendered is capped based on the size of the rectangle even if the radius value set here is higher (see effectiveCornerRadii.

To set the corners to different radius values, use cornerRadii.

Kind: instance method of Rectangle

effectiveCornerRadii

▸ effectiveCornerRadii: {topLeft:number, topRight:number, bottomRight:number, bottomLeft:number}

The actual corner radius that is rendered may be capped by the size of the rectangle. Returns the actual radii that are currently in effect, which may be smaller than the cornerRadii values as a result.

Kind: instance property of Rectangle Read only: true

Last updated 8/10/2021

Was this helpful?

Yes

No