2016-01-30 07:48:16 -05:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title > Rectangle< / title >
< base target = "class-frame" >
< link href = "../assets/css/docs.css" rel = "stylesheet" type = "text/css" >
< script src = "../assets/js/paper.js" > < / script >
< script src = "../assets/js/jquery.js" > < / script >
< script src = "../assets/js/codemirror.js" > < / script >
< script src = "../assets/js/docs.js" > < / script >
< / head >
< body >
< article class = "reference" >
< div class = "reference-class" >
< h1 > Rectangle< / h1 >
< p > 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.< / p >
< / div >
<!-- =============================== constructors ========================== -->
< div class = "reference-members" >
< h2 > Constructors< / h2 >
< div id = "rectangle-point-size" class = "member" >
< div class = "member-link" >
< a name = "rectangle-point-size" href = "#rectangle-point-size" > < tt > < b > Rectangle< / b > (point, size)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Creates a Rectangle object.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the top-left point of the rectangle
< / li >
< li >
< tt > size:< / tt >
< a href = "../classes/Size.html" > < tt > Size< / tt > < / a >
— the size of the rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "rectangle-object" class = "member" >
< div class = "member-link" >
< a name = "rectangle-object" href = "#rectangle-object" > < tt > < b > Rectangle< / b > (object)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Creates a Rectangle object.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > object:< / tt >
< tt > Object< / tt >
— an object containing properties to be set on the rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< h4 > Example:< span class = "description" > Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}< / span > < / h4 >
< pre > < code > var rectangle = new Rectangle({
point: [20, 20],
size: [60, 60]
});< / code > < / pre >
< h4 > Example:< span class = "description" > Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}< / span > < / h4 >
< pre > < code > var rectangle = new Rectangle({
from: [20, 20],
to: [80, 80]
});< / code > < / pre >
< / div >
< / div >
< / div >
< div id = "rectangle-x-y-width-height" class = "member" >
< div class = "member-link" >
< a name = "rectangle-x-y-width-height" href = "#rectangle-x-y-width-height" > < tt > < b > Rectangle< / b > (x, y, width, height)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Creates a rectangle object.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > x:< / tt >
< tt > Number< / tt >
— the left coordinate
< / li >
< li >
< tt > y:< / tt >
< tt > Number< / tt >
— the top coordinate
< / li >
< li >
< tt > width:< / tt >
< tt > Number< / tt >
< / li >
< li >
< tt > height:< / tt >
< tt > Number< / tt >
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "rectangle-from-to" class = "member" >
< div class = "member-link" >
< a name = "rectangle-from-to" href = "#rectangle-from-to" > < tt > < b > Rectangle< / b > (from, to)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > 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.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > from:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the first point defining the rectangle
< / li >
< li >
< tt > to:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the second point defining the rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
2023-10-30 15:39:12 -04:00
< div id = "rectangle-rectangle" class = "member" >
2016-01-30 07:48:16 -05:00
< div class = "member-link" >
2023-10-30 15:39:12 -04:00
< a name = "rectangle-rectangle" href = "#rectangle-rectangle" > < tt > < b > Rectangle< / b > (rectangle)< / tt > < / a >
2016-01-30 07:48:16 -05:00
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Creates a new rectangle object from the passed rectangle object.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
2023-10-30 15:39:12 -04:00
< tt > rectangle:< / tt >
2016-01-30 07:48:16 -05:00
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
<!-- ================================ properties =========================== -->
< div class = "reference-members" >
< h2 > Properties< / h2 >
< div id = "x" class = "member" >
< div class = "member-link" >
< a name = "x" href = "#x" > < tt > < b > x< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The x position of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "y" class = "member" >
< div class = "member-link" >
< a name = "y" href = "#y" > < tt > < b > y< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The y position of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "width" class = "member" >
< div class = "member-link" >
< a name = "width" href = "#width" > < tt > < b > width< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The width of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "height" class = "member" >
< div class = "member-link" >
< a name = "height" href = "#height" > < tt > < b > height< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The height of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "point" class = "member" >
< div class = "member-link" >
< a name = "point" href = "#point" > < tt > < b > point< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The top-left point of the rectangle< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "size" class = "member" >
< div class = "member-link" >
< a name = "size" href = "#size" > < tt > < b > size< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The size of the rectangle< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Size.html" > < tt > Size< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Side Positions< / h3 >
< div id = "left" class = "member" >
< div class = "member-link" >
< a name = "left" href = "#left" > < tt > < b > left< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > 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.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "top" class = "member" >
< div class = "member-link" >
< a name = "top" href = "#top" > < tt > < b > top< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The top coordinate of the rectangle. Note that this doesn’ t move the whole rectangle: the bottom won’ t move.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "right" class = "member" >
< div class = "member-link" >
< a name = "right" href = "#right" > < tt > < b > right< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > 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.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottom" class = "member" >
< div class = "member-link" >
< a name = "bottom" href = "#bottom" > < tt > < b > bottom< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The bottom coordinate of the rectangle. Note that this doesn’ t move the whole rectangle: the top won’ t move.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Corner and Center Point Positions< / h3 >
< div id = "center" class = "member" >
< div class = "member-link" >
< a name = "center" href = "#center" > < tt > < b > center< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The center point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topleft" class = "member" >
< div class = "member-link" >
< a name = "topleft" href = "#topleft" > < tt > < b > topLeft< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The top-left point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topright" class = "member" >
< div class = "member-link" >
< a name = "topright" href = "#topright" > < tt > < b > topRight< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The top-right point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomleft" class = "member" >
< div class = "member-link" >
< a name = "bottomleft" href = "#bottomleft" > < tt > < b > bottomLeft< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The bottom-left point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomright" class = "member" >
< div class = "member-link" >
< a name = "bottomright" href = "#bottomright" > < tt > < b > bottomRight< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The bottom-right point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "leftcenter" class = "member" >
< div class = "member-link" >
< a name = "leftcenter" href = "#leftcenter" > < tt > < b > leftCenter< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The left-center point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topcenter" class = "member" >
< div class = "member-link" >
< a name = "topcenter" href = "#topcenter" > < tt > < b > topCenter< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The top-center point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "rightcenter" class = "member" >
< div class = "member-link" >
< a name = "rightcenter" href = "#rightcenter" > < tt > < b > rightCenter< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The right-center point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomcenter" class = "member" >
< div class = "member-link" >
< a name = "bottomcenter" href = "#bottomcenter" > < tt > < b > bottomCenter< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The bottom-center point of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "area" class = "member" >
< div class = "member-link" >
< a name = "area" href = "#area" > < tt > < b > area< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > The area of the rectangle.< / p >
< p > Read only.< / p >
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Number< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Item Bounds< / h3 >
< div id = "selected" class = "member" >
< div class = "member-link" >
< a name = "selected" href = "#selected" > < tt > < b > selected< / b > < / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2016-03-17 09:19:37 -04:00
< p > Specifies whether an item’ s bounds are to appear as selected.< / p >
< p > Paper.js draws the bounds of items with selected bounds on top of your project. This is very useful when debugging.< / p >
2016-01-30 07:48:16 -05:00
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Default:< / h4 >
< li > < tt > false< / tt > < / li >
< / ul >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Type:< / h4 >
< li >
< tt > Boolean< / tt >
< / li >
< / ul >
2016-03-17 09:19:37 -04:00
< h4 > Example:< / h4 >
< div class = "paperscript split" >
< div class = "buttons" >
< div class = "button run" > Run< / div >
< / div >
< script type = "text/paperscript" canvas = "canvas-0" >
var path = new Path.Circle({
center: [80, 50],
radius: 40,
selected: true
});
path.bounds.selected = true;
< / script >
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-0" > < / canvas > < / div >
< / div >
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
<!-- ============================== methods ================================ -->
< div class = "reference-members" >
< h2 > Methods< / h2 >
2023-10-30 15:39:12 -04:00
< div id = "set-values" class = "member" >
2016-07-18 14:20:06 -04:00
< div class = "member-link" >
2023-10-30 15:39:12 -04:00
< a name = "set-values" href = "#set-values" > < tt > < b > set< / b > (...values)< / tt > < / a >
2016-07-18 14:20:06 -04:00
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Sets the rectangle to the passed values. Note that any sequence of parameters that is supported by the various < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > () constructors also work for calls of < code > set()< / code > .< / p >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > values:< / tt >
< tt > any value< / tt >
< / li >
2016-07-18 14:20:06 -04:00
2023-10-30 15:39:12 -04:00
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-07-18 14:20:06 -04:00
< / div >
< / div >
< / div >
2016-01-30 07:48:16 -05:00
< div id = "clone" class = "member" >
< div class = "member-link" >
< a name = "clone" href = "#clone" > < tt > < b > clone< / b > ()< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Returns a copy of the rectangle.< / p >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt >
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "equals-rect" class = "member" >
< div class = "member-link" >
< a name = "equals-rect" href = "#equals-rect" > < tt > < b > equals< / b > (rect)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Checks whether the coordinates and size of the rectangle are equal to that of the supplied rectangle.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangles are equal, < tt > false< / tt > otherwise
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "tostring" class = "member" >
< div class = "member-link" >
< a name = "tostring" href = "#tostring" > < tt > < b > toString< / b > ()< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < tt > String< / tt > < / tt > — a string representation of this rectangle
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "isempty" class = "member" >
< div class = "member-link" >
< a name = "isempty" href = "#isempty" > < tt > < b > isEmpty< / b > ()< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangle is empty, < tt > false< / tt > otherwise
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< h3 > Geometric Tests< / h3 >
< div id = "contains-point" class = "member" >
< div class = "member-link" >
< a name = "contains-point" href = "#contains-point" > < tt > < b > contains< / b > (point)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Tests if the specified point is inside the boundary of the rectangle.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the specified point
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the point is inside the rectangle’ s boundary, < tt > false< / tt > otherwise
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< h4 > Example:< span class = "description" > Checking whether the mouse position falls within the bounding rectangle of an item:< / span > < / h4 >
< div class = "paperscript split" >
< div class = "buttons" >
< div class = "button run" > Run< / div >
< / div >
2016-03-17 09:19:37 -04:00
< script type = "text/paperscript" canvas = "canvas-1" >
2016-01-30 07:48:16 -05:00
// Create a circle shaped path at {x: 80, y: 50}
// with a radius of 30.
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'red';
function onMouseMove(event) {
// Check whether the mouse position intersects with the
// bounding box of the item:
if (circle.bounds.contains(event.point)) {
// If it intersects, fill it with green:
circle.fillColor = 'green';
} else {
// If it doesn't intersect, fill it with red:
circle.fillColor = 'red';
}
}
< / script >
2016-03-17 09:19:37 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-1" > < / canvas > < / div >
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
< div id = "contains-rect" class = "member" >
< div class = "member-link" >
< a name = "contains-rect" href = "#contains-rect" > < tt > < b > contains< / b > (rect)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Tests if the interior of the rectangle entirely contains the specified rectangle.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the specified rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangle entirely contains the specified rectangle, < tt > false< / tt > otherwise
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< h4 > Example:< span class = "description" > Checking whether the bounding box of one item is contained within that of another item:< / span > < / h4 >
< div class = "paperscript split" >
< div class = "buttons" >
< div class = "button run" > Run< / div >
< / div >
2016-03-17 09:19:37 -04:00
< script type = "text/paperscript" canvas = "canvas-2" >
2016-01-30 07:48:16 -05:00
// All newly created paths will inherit these styles:
project.currentStyle = {
fillColor: 'green',
strokeColor: 'black'
};
// Create a circle shaped path at {x: 80, y: 50}
// with a radius of 45.
var largeCircle = new Path.Circle(new Point(80, 50), 45);
// Create a smaller circle shaped path in the same position
// with a radius of 30.
var circle = new Path.Circle(new Point(80, 50), 30);
function onMouseMove(event) {
// Move the circle to the position of the mouse:
circle.position = event.point;
// Check whether the bounding box of the smaller circle
// is contained within the bounding box of the larger item:
if (largeCircle.bounds.contains(circle.bounds)) {
// If it does, fill it with green:
circle.fillColor = 'green';
largeCircle.fillColor = 'green';
} else {
// If doesn't, fill it with red:
circle.fillColor = 'red';
largeCircle.fillColor = 'red';
}
}
< / script >
2016-03-17 09:19:37 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-2" > < / canvas > < / div >
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
< div id = "intersects-rect" class = "member" >
< div class = "member-link" >
2017-03-18 11:40:15 -04:00
< a name = "intersects-rect" href = "#intersects-rect" > < tt > < b > intersects< / b > (rect[, epsilon])< / tt > < / a >
2016-01-30 07:48:16 -05:00
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2017-03-18 11:40:15 -04:00
< p > 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 < code > epsilon< / code > value is specified by which this rectangle’ s dimensions are increased before comparing.< / p >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the specified rectangle
2017-03-18 11:40:15 -04:00
< / li >
< li >
< tt > epsilon:< / tt >
< tt > Number< / tt >
— the epsilon against which to compare the rectangle’ s dimensions
— optional, default: < tt > 0< / tt >
2016-01-30 07:48:16 -05:00
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
2017-03-18 11:40:15 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangle and the specified rectangle intersect each other, < tt > false< / tt > otherwise
2016-01-30 07:48:16 -05:00
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< h4 > Example:< span class = "description" > Checking whether the bounding box of one item intersects with that of another item:< / span > < / h4 >
< div class = "paperscript split" >
< div class = "buttons" >
< div class = "button run" > Run< / div >
< / div >
2016-03-17 09:19:37 -04:00
< script type = "text/paperscript" canvas = "canvas-3" >
2016-01-30 07:48:16 -05:00
// All newly created paths will inherit these styles:
project.currentStyle = {
fillColor: 'green',
strokeColor: 'black'
};
// Create a circle shaped path at {x: 80, y: 50}
// with a radius of 45.
var largeCircle = new Path.Circle(new Point(80, 50), 45);
// Create a smaller circle shaped path in the same position
// with a radius of 30.
var circle = new Path.Circle(new Point(80, 50), 30);
function onMouseMove(event) {
// Move the circle to the position of the mouse:
circle.position = event.point;
// Check whether the bounding box of the two circle
// shaped paths intersect:
if (largeCircle.bounds.intersects(circle.bounds)) {
// If it does, fill it with green:
circle.fillColor = 'green';
largeCircle.fillColor = 'green';
} else {
// If doesn't, fill it with red:
circle.fillColor = 'red';
largeCircle.fillColor = 'red';
}
}
< / script >
2016-03-17 09:19:37 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-3" > < / canvas > < / div >
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
< h3 > Boolean Operations< / h3 >
< div id = "intersect-rect" class = "member" >
< div class = "member-link" >
< a name = "intersect-rect" href = "#intersect-rect" > < tt > < b > intersect< / b > (rect)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Returns a new rectangle representing the intersection of this rectangle with the specified rectangle.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the rectangle to be intersected with this rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the largest rectangle contained in both the specified rectangle and in this rectangle
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< h4 > Example:< span class = "description" > Intersecting two rectangles and visualizing the result using rectangle shaped paths:< / span > < / h4 >
< div class = "paperscript split" >
< div class = "buttons" >
< div class = "button run" > Run< / div >
< / div >
2016-03-17 09:19:37 -04:00
< script type = "text/paperscript" canvas = "canvas-4" >
2016-01-30 07:48:16 -05:00
// Create two rectangles that overlap each other
var size = new Size(50, 50);
var rectangle1 = new Rectangle(new Point(25, 15), size);
var rectangle2 = new Rectangle(new Point(50, 40), size);
// The rectangle that represents the intersection of the
// two rectangles:
var intersected = rectangle1.intersect(rectangle2);
// To visualize the intersecting of the rectangles, we will
// create rectangle shaped paths using the Path.Rectangle
// constructor.
// Have all newly created paths inherit a black stroke:
project.currentStyle.strokeColor = 'black';
// Create two rectangle shaped paths using the abstract rectangles
// we created before:
new Path.Rectangle(rectangle1);
new Path.Rectangle(rectangle2);
// Create a path that represents the intersected rectangle,
// and fill it with red:
var intersectionPath = new Path.Rectangle(intersected);
intersectionPath.fillColor = 'red';
< / script >
2016-03-17 09:19:37 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-4" > < / canvas > < / div >
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
< div id = "unite-rect" class = "member" >
< div class = "member-link" >
< a name = "unite-rect" href = "#unite-rect" > < tt > < b > unite< / b > (rect)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Returns a new rectangle representing the union of this rectangle with the specified rectangle.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the rectangle to be combined with this rectangle
< / li >
< / ul >
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the smallest rectangle containing both the specified rectangle and this rectangle
< / li >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "include-point" class = "member" >
< div class = "member-link" >
< a name = "include-point" href = "#include-point" > < tt > < b > include< / b > (point)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
< p > Adds a point to this rectangle. The resulting rectangle is the smallest rectangle that contains both the original rectangle and the specified point.< / p >
< p > After adding a point, a call to < a href = "../classes/Rectangle.html#contains-point" > < tt > contains(point)< / tt > < / a > with the added point as an argument does not necessarily return < code > true< / code > . The < a href = "../classes/Rectangle.html#contains-point" > < tt > rectangle.contains(point)< / tt > < / a > method does not return < code > true< / code > 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, < a href = "../classes/Rectangle.html#contains-point" > < tt > rectangle.contains(point)< / tt > < / a > returns < code > false< / code > for that point.< / p >
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the smallest rectangle that contains both the original rectangle and the specified point
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "expand-amount" class = "member" >
< div class = "member-link" >
< a name = "expand-amount" href = "#expand-amount" > < tt > < b > expand< / b > (amount)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2023-10-30 15:39:12 -04:00
< p > Returns a new rectangle expanded by the specified amount in horizontal and vertical directions.< / p >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > amount:< / tt >
< tt > Number< / tt > ⟋ < a href = "../classes/Size.html" > < tt > Size< / tt > < / a > ⟋ < a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the amount to expand the rectangle in both directions
< / li >
< / ul >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the expanded rectangle
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "expand-hor-ver" class = "member" >
< div class = "member-link" >
< a name = "expand-hor-ver" href = "#expand-hor-ver" > < tt > < b > expand< / b > (hor, ver)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2023-10-30 15:39:12 -04:00
< p > Returns a new rectangle expanded by the specified amounts in horizontal and vertical directions.< / p >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > hor:< / tt >
< tt > Number< / tt >
— the amount to expand the rectangle in horizontal direction
< / li >
< li >
< tt > ver:< / tt >
< tt > Number< / tt >
— the amount to expand the rectangle in vertical direction
< / li >
< / ul >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the expanded rectangle
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "scale-amount" class = "member" >
< div class = "member-link" >
< a name = "scale-amount" href = "#scale-amount" > < tt > < b > scale< / b > (amount)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2023-10-30 15:39:12 -04:00
< p > Returns a new rectangle scaled by the specified amount from its center.< / p >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > amount:< / tt >
< tt > Number< / tt >
< / li >
< / ul >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the scaled rectangle
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< div id = "scale-hor-ver" class = "member" >
< div class = "member-link" >
< a name = "scale-hor-ver" href = "#scale-hor-ver" > < tt > < b > scale< / b > (hor, ver)< / tt > < / a >
< / div >
< div class = "member-description hidden" >
< div class = "member-text" >
2023-10-30 15:39:12 -04:00
< p > Returns a new rectangle scaled in horizontal direction by the specified < code > hor< / code > amount and in vertical direction by the specified < code > ver< / code > amount from its center.< / p >
2016-01-30 07:48:16 -05:00
< ul class = "member-list" >
< h4 > Parameters:< / h4 >
< li >
< tt > hor:< / tt >
< tt > Number< / tt >
< / li >
< li >
< tt > ver:< / tt >
< tt > Number< / tt >
< / li >
< / ul >
2023-10-30 15:39:12 -04:00
< ul class = "member-list" >
< h4 > Returns:< / h4 >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the scaled rectangle
< / li >
< / ul >
2017-01-11 09:08:06 -05:00
2016-01-30 07:48:16 -05:00
< / div >
< / div >
< / div >
< / div >
<!-- =========================== copyright notice ========================== -->
< p class = "footer" >
2023-10-30 15:39:12 -04:00
Paper.js v0.12.7< br >
Copyright © 2011—2023 < a href = "http://www.lehni.org" target = "_blank" > Jü rg Lehni< / a > & < a href = "http://www.jonathanpuckey.com" target = "_blank" > Jonathan Puckey< / a > . All Rights Reserved.< / p >
2016-01-30 07:48:16 -05:00
< div class = "content-end" > < / div >
< / article >
< / body >
