Rectangle
A Rectangle specifies an area that is enclosed by it’s top-left point (x, y), its width, and its height. It should not be confused with a rectangular path, it is not an item.
Constructors
Creates a Rectangle object.
- object: Object — an object containing properties to be set on the rectangle
Parameters:
- Rectangle
Returns:
Example:Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
var rectangle = new Rectangle({
point: [20, 20],
size: [60, 60]
});Example:Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
var rectangle = new Rectangle({
from: [20, 20],
to: [80, 80]
});Creates a rectangle object.
- x: Number — the left coordinate
- y: Number — the top coordinate
- width: Number
- height: Number
Parameters:
- Rectangle
Returns:
Creates a rectangle object from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them.
- from: Point — the first point defining the rectangle
- to: Point — the second point defining the rectangle
Parameters:
- Rectangle
Returns:
Properties
The x position of the rectangle.
- Number
Type:
The y position of the rectangle.
- Number
Type:
The width of the rectangle.
- Number
Type:
The height of the rectangle.
- Number
Type:
Side Positions
The position of the left hand side of the rectangle. Note that this doesn’t move the whole rectangle; the right hand side stays where it was.
- Number
Type:
The top coordinate of the rectangle. Note that this doesn’t move the whole rectangle: the bottom won’t move.
- Number
Type:
The position of the right hand side of the rectangle. Note that this doesn’t move the whole rectangle; the left hand side stays where it was.
- Number
Type:
The bottom coordinate of the rectangle. Note that this doesn’t move the whole rectangle: the top won’t move.
- Number
Type:
Corner and Center Point Positions
The bottom-left point of the rectangle.
- Point
Type:
The bottom-right point of the rectangle.
- Point
Type:
The left-center point of the rectangle.
- Point
Type:
The right-center point of the rectangle.
- Point
Type:
The bottom-center point of the rectangle.
- Point
Type:
The area of the rectangle.
Read only.
- Number
Type:
Item Bounds
Specifies whether an item’s bounds are to appear as selected.
Paper.js draws the bounds of items with selected bounds on top of your project. This is very useful when debugging.
- false
Default:
- Boolean
Type:
Example:
Methods
Checks whether the coordinates and size of the rectangle are equal to that of the supplied rectangle.
- rect: Rectangle
Parameters:
- Boolean — true if the rectangles are equal, false otherwise
Returns:
- String — a string representation of this rectangle
Returns:
- Boolean — true if the rectangle is empty, false otherwise
Returns:
Geometric Tests
Tests if the specified point is inside the boundary of the rectangle.
- point: Point — the specified point
Parameters:
- Boolean — true if the point is inside the rectangle’s boundary, false otherwise
Returns:
Example:Checking whether the mouse position falls within the bounding rectangle of an item:
Tests if the interior of the rectangle entirely contains the specified rectangle.
- rect: Rectangle — the specified rectangle
Parameters:
- Boolean — true if the rectangle entirely contains the specified rectangle, false otherwise
Returns:
Example:Checking whether the bounding box of one item is contained within that of another item:
Tests if the interior of this rectangle intersects the interior of another rectangle. Rectangles just touching each other are considered as non-intersecting, except if a epsilon value is specified by which this rectangle’s dimensions are increased before comparing.
- rect: Rectangle — the specified rectangle
- epsilon: Number — the epsilon against which to compare the rectangle’s dimensions — optional, default: 0
Parameters:
- Boolean — true if the rectangle and the specified rectangle intersect each other, false otherwise
Returns:
Example:Checking whether the bounding box of one item intersects with that of another item:
Boolean Operations
Returns a new rectangle representing the intersection of this rectangle with the specified rectangle.
- rect: Rectangle — the rectangle to be intersected with this rectangle
Parameters:
- Rectangle — the largest rectangle contained in both the specified rectangle and in this rectangle
Returns:
Example:Intersecting two rectangles and visualizing the result using rectangle shaped paths:
Adds a point to this rectangle. The resulting rectangle is the smallest rectangle that contains both the original rectangle and the specified point.
After adding a point, a call to contains(point) with the added point as an argument does not necessarily return true. The rectangle.contains(point) method does not return true for points on the right or bottom edges of a rectangle. Therefore, if the added point falls on the left or bottom edge of the enlarged rectangle, rectangle.contains(point) returns false for that point.
- point: Point
Parameters:
- Rectangle — the smallest rectangle that contains both the original rectangle and the specified point
Returns:
Returns a new rectangle expanded by the specified amounts in horizontal and vertical directions.
- hor: Number — the amount to expand the rectangle in horizontal direction
- ver: Number — the amount to expand the rectangle in vertical direction
Parameters:
- Rectangle — the expanded rectangle
Returns:
Returns a new rectangle scaled by the specified amount from its center.
- amount: Number
Parameters:
- Rectangle — the scaled rectangle
Returns:
Returns a new rectangle scaled in horizontal direction by the specified hor amount and in vertical direction by the specified ver amount from its center.
- hor: Number
- ver: Number
Parameters:
- Rectangle — the scaled rectangle