The X coordinate of the upper-left corner of the rounded rectangle
The Y coordinate of the upper-left corner of the rounded rectangle
The overall width of this rounded rectangle
The overall height of this rounded rectangle
Controls the radius of the rounded corners
The overall height of this rounded rectangle
Controls the radius of the rounded corners
// Basic radius setting
const rect = new RoundedRectangle(0, 0, 200, 150);
rect.radius = 20;
// Clamp to maximum safe radius
rect.radius = Math.min(rect.width, rect.height) / 2;
// Create pill shape
rect.radius = rect.height / 2;
ReadonlytypeThe type of the object, mainly used to avoid instanceof checks
// Check shape type
const shape = new RoundedRectangle(0, 0, 100, 100, 20);
console.log(shape.type); // 'roundedRectangle'
// Use in type guards
if (shape.type === 'roundedRectangle') {
console.log(shape.radius);
}
SHAPE_PRIMITIVE For all shape types
The overall width of this rounded rectangle
The X coordinate of the upper-left corner of the rounded rectangle
The Y coordinate of the upper-left corner of the rounded rectangle
Creates a clone of this Rounded Rectangle.
A copy of the rounded rectangle
// Basic cloning
const original = new RoundedRectangle(100, 100, 200, 150, 20);
const copy = original.clone();
// Clone and modify
const modified = original.clone();
modified.radius = 30;
modified.width *= 2;
// Verify independence
console.log(original.radius); // 20
console.log(modified.radius); // 30
Checks whether the x and y coordinates given are contained within this Rounded Rectangle
The X coordinate of the point to test
The Y coordinate of the point to test
Whether the x/y coordinates are within this Rounded Rectangle
// Basic containment check
const rect = new RoundedRectangle(100, 100, 200, 150, 20);
const isInside = rect.contains(150, 125); // true
// Check corner radius
const corner = rect.contains(100, 100); // false if within corner curve
Copies another rectangle to this one.
The rectangle to copy from
Returns itself
// Basic copying
const source = new RoundedRectangle(100, 100, 200, 150, 20);
const target = new RoundedRectangle();
target.copyFrom(source);
// Chain with other operations
const rect = new RoundedRectangle()
.copyFrom(source)
.getBounds(rect);
Copies this rectangle to another one.
The rectangle to copy to
Returns given parameter
// Basic copying
const source = new RoundedRectangle(100, 100, 200, 150, 20);
const target = new RoundedRectangle();
source.copyTo(target);
// Chain with other operations
const result = source
.copyTo(new RoundedRectangle())
.getBounds();
Returns the framing rectangle of the rounded rectangle as a Rectangle object
Optionalout: RectangleOptional rectangle to store the result
The framing rectangle
// Basic bounds calculation
const rect = new RoundedRectangle(100, 100, 200, 150, 20);
const bounds = rect.getBounds();
// bounds: x=100, y=100, width=200, height=150
// Reuse existing rectangle
const out = new Rectangle();
rect.getBounds(out);
Checks whether the x and y coordinates given are contained within this rectangle 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 (1 = inner, 0.5 = centered, 0 = outer)
Whether the x/y coordinates are within this rectangle's stroke
// Basic stroke check
const rect = new RoundedRectangle(100, 100, 200, 150, 20);
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
Returns a string representation of an object.
The
RoundedRectangleobject represents a rectangle with rounded corners. Defined by position, dimensions and corner radius.Example
Remarks
See
Rectangle For non-rounded rectangles