2011-06-12 14:04:25 -04:00
<!DOCTYPE html>
< html >
< head >
2011-08-01 07:05:06 -04:00
< meta charset = "UTF-8" >
2011-06-12 14:04:25 -04:00
< title > Rectangle< / title >
< base target = "classFrame" >
< link rel = "stylesheet" href = "../resources/css/reference.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/style.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/paperscript.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/codemirror.css" type = "text/css" >
< script src = "../resources/js/bootstrap.js" type = "text/javascript" > < / script >
< script src = "../resources/js/paper.js" type = "text/javascript" > < / script >
< script src = "../resources/js/codemirror.js" type = "text/javascript" > < / script >
< script src = "../resources/js/reference.js" type = "text/javascript" > < / script >
< / head >
< body 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 >
2011-06-17 06:41:47 -04:00
2011-06-12 14:04:25 -04:00
< / div >
<!-- ============================== constructors ========================= -->
< div class = "reference-members" > < h2 > Constructors< / h2 >
< div id = "rectangle-point-size-member" class = "member" >
< div id = "rectangle-point-size-link" class = "member-link" >
< a name = "rectangle-point-size" href = "#" onClick = "return toggleMember('rectangle-point-size', false);" > < tt > < b > Rectangle< / b > (point, size)< / tt > < / a >
< / div >
< div id = "rectangle-point-size-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('rectangle-point-size', false);" > < tt > < b > Rectangle< / b > (point, size)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('rectangle-point-size', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Creates a Rectangle object.< / p >
< ul > < b > Parameters:< / b >
< 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 >
< / div >
< / div >
< / div >
< div id = "rectangle-x-y-width-height-member" class = "member" >
< div id = "rectangle-x-y-width-height-link" class = "member-link" >
< a name = "rectangle-x-y-width-height" href = "#" onClick = "return toggleMember('rectangle-x-y-width-height', false);" > < tt > < b > Rectangle< / b > (x, y, width, height)< / tt > < / a >
< / div >
< div id = "rectangle-x-y-width-height-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('rectangle-x-y-width-height', false);" > < tt > < b > Rectangle< / b > (x, y, width, height)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('rectangle-x-y-width-height', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Creates a rectangle object.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > x:< / tt >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
— the left coordinate
< / li >
< li >
< tt > y:< / tt >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
— the top coordinate
< / li >
< li >
< tt > width:< / tt >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< li >
< tt > height:< / tt >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "rectangle-point1-point2-member" class = "member" >
< div id = "rectangle-point1-point2-link" class = "member-link" >
< a name = "rectangle-point1-point2" href = "#" onClick = "return toggleMember('rectangle-point1-point2', false);" > < tt > < b > Rectangle< / b > (point1, point2)< / tt > < / a >
< / div >
< div id = "rectangle-point1-point2-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('rectangle-point1-point2', false);" > < tt > < b > Rectangle< / b > (point1, point2)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('rectangle-point1-point2', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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 > < b > Parameters:< / b >
< li >
< tt > point1:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— The first point defining the rectangle
< / li >
< li >
< tt > point2:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— The second point defining the rectangle
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "rectangle-rt-member" class = "member" >
< div id = "rectangle-rt-link" class = "member-link" >
< a name = "rectangle-rt" href = "#" onClick = "return toggleMember('rectangle-rt', false);" > < tt > < b > Rectangle< / b > (rt)< / tt > < / a >
< / div >
< div id = "rectangle-rt-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('rectangle-rt', false);" > < tt > < b > Rectangle< / b > (rt)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('rectangle-rt', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Creates a new rectangle object from the passed rectangle object.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > rt:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- ============================== properties ========================= -->
< div class = "reference-members" > < h2 > Operators< / h2 >
< div id = "equals-member" class = "member" >
< div id = "equals-link" class = "member-link" >
< a name = "equals" href = "#" onClick = "return toggleMember('equals', false);" > < tt > < tt > < b > ==< / b > Rectangle< / tt > < / tt > < / a >
< / div >
< div id = "equals-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('equals', false);" > < tt > < b > ==< / b > Rectangle< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('equals', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Checks whether the coordinates and size of the rectangle are equal to
that of the supplied rectangle.< / p >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangles are equal, < tt > false< / tt > otherwise
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< div class = "reference-members" > < h2 > Properties< / h2 >
< div id = "x-member" class = "member" >
< div id = "x-link" class = "member-link" >
< a name = "x" href = "#" onClick = "return toggleMember('x', false);" > < tt > < b > x< / b > < / tt > < / a >
< / div >
< div id = "x-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('x', false);" > < tt > < b > x< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('x', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The x position of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "y-member" class = "member" >
< div id = "y-link" class = "member-link" >
< a name = "y" href = "#" onClick = "return toggleMember('y', false);" > < tt > < b > y< / b > < / tt > < / a >
< / div >
< div id = "y-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('y', false);" > < tt > < b > y< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('y', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The y position of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "width-member" class = "member" >
< div id = "width-link" class = "member-link" >
< a name = "width" href = "#" onClick = "return toggleMember('width', false);" > < tt > < b > width< / b > < / tt > < / a >
< / div >
< div id = "width-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('width', false);" > < tt > < b > width< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('width', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The width of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "height-member" class = "member" >
< div id = "height-link" class = "member-link" >
< a name = "height" href = "#" onClick = "return toggleMember('height', false);" > < tt > < b > height< / b > < / tt > < / a >
< / div >
< div id = "height-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('height', false);" > < tt > < b > height< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('height', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The height of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "point-member" class = "member" >
< div id = "point-link" class = "member-link" >
< a name = "point" href = "#" onClick = "return toggleMember('point', false);" > < tt > < b > point< / b > < / tt > < / a >
< / div >
< div id = "point-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('point', false);" > < tt > < b > point< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('point', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The top-left point of the rectangle< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "size-member" class = "member" >
< div id = "size-link" class = "member-link" >
< a name = "size" href = "#" onClick = "return toggleMember('size', false);" > < tt > < b > size< / b > < / tt > < / a >
< / div >
< div id = "size-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('size', false);" > < tt > < b > size< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('size', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The size of the rectangle< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Size.html" > < tt > Size< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Side Positions< / h3 >
< div id = "left-member" class = "member" >
< div id = "left-link" class = "member-link" >
< a name = "left" href = "#" onClick = "return toggleMember('left', false);" > < tt > < b > left< / b > < / tt > < / a >
< / div >
< div id = "left-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('left', false);" > < tt > < b > left< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('left', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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 > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "top-member" class = "member" >
< div id = "top-link" class = "member-link" >
< a name = "top" href = "#" onClick = "return toggleMember('top', false);" > < tt > < b > top< / b > < / tt > < / a >
< / div >
< div id = "top-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('top', false);" > < tt > < b > top< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('top', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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 > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "right-member" class = "member" >
< div id = "right-link" class = "member-link" >
< a name = "right" href = "#" onClick = "return toggleMember('right', false);" > < tt > < b > right< / b > < / tt > < / a >
< / div >
< div id = "right-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('right', false);" > < tt > < b > right< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('right', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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 > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottom-member" class = "member" >
< div id = "bottom-link" class = "member-link" >
< a name = "bottom" href = "#" onClick = "return toggleMember('bottom', false);" > < tt > < b > bottom< / b > < / tt > < / a >
< / div >
< div id = "bottom-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('bottom', false);" > < tt > < b > bottom< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('bottom', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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 > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Corner and Center Point Positions< / h3 >
< div id = "center-member" class = "member" >
< div id = "center-link" class = "member-link" >
< a name = "center" href = "#" onClick = "return toggleMember('center', false);" > < tt > < b > center< / b > < / tt > < / a >
< / div >
< div id = "center-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('center', false);" > < tt > < b > center< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('center', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The center point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topleft-member" class = "member" >
< div id = "topleft-link" class = "member-link" >
< a name = "topleft" href = "#" onClick = "return toggleMember('topleft', false);" > < tt > < b > topLeft< / b > < / tt > < / a >
< / div >
< div id = "topleft-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('topleft', false);" > < tt > < b > topLeft< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('topleft', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The top-left point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topright-member" class = "member" >
< div id = "topright-link" class = "member-link" >
< a name = "topright" href = "#" onClick = "return toggleMember('topright', false);" > < tt > < b > topRight< / b > < / tt > < / a >
< / div >
< div id = "topright-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('topright', false);" > < tt > < b > topRight< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('topright', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The top-right point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomleft-member" class = "member" >
< div id = "bottomleft-link" class = "member-link" >
< a name = "bottomleft" href = "#" onClick = "return toggleMember('bottomleft', false);" > < tt > < b > bottomLeft< / b > < / tt > < / a >
< / div >
< div id = "bottomleft-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('bottomleft', false);" > < tt > < b > bottomLeft< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('bottomleft', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The bottom-left point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomright-member" class = "member" >
< div id = "bottomright-link" class = "member-link" >
< a name = "bottomright" href = "#" onClick = "return toggleMember('bottomright', false);" > < tt > < b > bottomRight< / b > < / tt > < / a >
< / div >
< div id = "bottomright-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('bottomright', false);" > < tt > < b > bottomRight< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('bottomright', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The bottom-right point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "leftcenter-member" class = "member" >
< div id = "leftcenter-link" class = "member-link" >
< a name = "leftcenter" href = "#" onClick = "return toggleMember('leftcenter', false);" > < tt > < b > leftCenter< / b > < / tt > < / a >
< / div >
< div id = "leftcenter-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('leftcenter', false);" > < tt > < b > leftCenter< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('leftcenter', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The left-center point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "topcenter-member" class = "member" >
< div id = "topcenter-link" class = "member-link" >
< a name = "topcenter" href = "#" onClick = "return toggleMember('topcenter', false);" > < tt > < b > topCenter< / b > < / tt > < / a >
< / div >
< div id = "topcenter-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('topcenter', false);" > < tt > < b > topCenter< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('topcenter', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The top-center point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "rightcenter-member" class = "member" >
< div id = "rightcenter-link" class = "member-link" >
< a name = "rightcenter" href = "#" onClick = "return toggleMember('rightcenter', false);" > < tt > < b > rightCenter< / b > < / tt > < / a >
< / div >
< div id = "rightcenter-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('rightcenter', false);" > < tt > < b > rightCenter< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('rightcenter', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The right-center point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "bottomcenter-member" class = "member" >
< div id = "bottomcenter-link" class = "member-link" >
< a name = "bottomcenter" href = "#" onClick = "return toggleMember('bottomcenter', false);" > < tt > < b > bottomCenter< / b > < / tt > < / a >
< / div >
< div id = "bottomcenter-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('bottomcenter', false);" > < tt > < b > bottomCenter< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('bottomcenter', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The bottom-center point of the rectangle.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- ============================== methods ================================ -->
2011-06-17 06:41:47 -04:00
< div class = "reference-members" > < h2 > Methods< / h2 >
2011-06-12 14:04:25 -04:00
< div id = "isempty-member" class = "member" >
< div id = "isempty-link" class = "member-link" >
< a name = "isempty" href = "#" onClick = "return toggleMember('isempty', false);" > < tt > < b > isEmpty< / b > ()< / tt > < / a >
< / div >
< div id = "isempty-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('isempty', false);" > < tt > < b > isEmpty< / b > ()< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('isempty', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > the rectangle is empty, < tt > false< / tt > otherwise
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "tostring-member" class = "member" >
< div id = "tostring-link" class = "member-link" >
< a name = "tostring" href = "#" onClick = "return toggleMember('tostring', false);" > < tt > < b > toString< / b > ()< / tt > < / a >
< / div >
< div id = "tostring-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('tostring', false);" > < tt > < b > toString< / b > ()< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('tostring', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > String< / tt > < / tt > — A string representation of this rectangle.
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< h3 > Geometric Tests< / h3 >
< div id = "contains-point-member" class = "member" >
< div id = "contains-point-link" class = "member-link" >
< a name = "contains-point" href = "#" onClick = "return toggleMember('contains-point', false);" > < tt > < b > contains< / b > (point)< / tt > < / a >
< / div >
< div id = "contains-point-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('contains-point', false);" > < tt > < b > contains< / b > (point)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('contains-point', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Tests if the specified point is inside the boundary of the rectangle.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— the specified point
< / li >
< / ul >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the point is inside the rectangle's boundary, < tt > false< / tt > otherwise
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
2011-06-17 06:41:47 -04:00
< p >
< b > Example< / b > — Checking whether the mouse position falls within the bounding rectangle of an item:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
< script type = "text/paperscript" canvas = "canvas-0" >
// 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 >
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-0" > < / canvas > < / div >
< / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< div id = "contains-rect-member" class = "member" >
< div id = "contains-rect-link" class = "member-link" >
< a name = "contains-rect" href = "#" onClick = "return toggleMember('contains-rect', false);" > < tt > < b > contains< / b > (rect)< / tt > < / a >
< / div >
< div id = "contains-rect-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('contains-rect', false);" > < tt > < b > contains< / b > (rect)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('contains-rect', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Tests if the interior of the rectangle entirely contains the specified
rectangle.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— The specified rectangle
< / li >
< / ul >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangle entirely contains the specified
2011-06-12 14:04:25 -04:00
rectangle, < tt > false< / tt > otherwise
< / li >
< / ul >
2011-06-17 06:41:47 -04:00
< p >
< b > Example< / b > — Checking whether the bounding box of one item is contained within that of another item:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
< script type = "text/paperscript" canvas = "canvas-1" >
// 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;
2011-07-13 08:30:22 -04:00
2011-06-17 06:41:47 -04:00
// 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 >
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-1" > < / canvas > < / div >
< / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< div id = "intersects-rect-member" class = "member" >
< div id = "intersects-rect-link" class = "member-link" >
< a name = "intersects-rect" href = "#" onClick = "return toggleMember('intersects-rect', false);" > < tt > < b > intersects< / b > (rect)< / tt > < / a >
< / div >
< div id = "intersects-rect-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('intersects-rect', false);" > < tt > < b > intersects< / b > (rect)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('intersects-rect', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Tests if the interior of this rectangle intersects the interior of
another rectangle.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the specified rectangle
< / li >
< / ul >
< ul > < b > Returns:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > < tt > Boolean< / tt > < / tt > — < tt > true< / tt > if the rectangle and the specified rectangle
2011-06-12 14:04:25 -04:00
intersect each other, < tt > false< / tt > otherwise
< / li >
< / ul >
2011-06-17 06:41:47 -04:00
< p >
< b > Example< / b > — Checking whether the bounding box of one item intersects with that of another item:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
< script type = "text/paperscript" canvas = "canvas-2" >
// 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;
2011-07-13 08:30:22 -04:00
2011-06-17 06:41:47 -04:00
// 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 >
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-2" > < / canvas > < / div >
< / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< h3 > Boolean Operations< / h3 >
< div id = "intersect-rect-member" class = "member" >
< div id = "intersect-rect-link" class = "member-link" >
< a name = "intersect-rect" href = "#" onClick = "return toggleMember('intersect-rect', false);" > < tt > < b > intersect< / b > (rect)< / tt > < / a >
< / div >
< div id = "intersect-rect-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('intersect-rect', false);" > < tt > < b > intersect< / b > (rect)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('intersect-rect', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Returns a new rectangle representing the intersection of this rectangle
with the specified rectangle.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— The rectangle to be intersected with this
rectangle
< / li >
< / ul >
< ul > < b > Returns:< / b >
< 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 >
< / ul >
2011-06-17 06:41:47 -04:00
< p >
< b > Example< / b > — Intersecting two rectangles and visualizing the result using rectangle shaped paths:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
< script type = "text/paperscript" canvas = "canvas-3" >
// 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 >
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-3" > < / canvas > < / div >
< / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< div id = "unite-rect-member" class = "member" >
< div id = "unite-rect-link" class = "member-link" >
< a name = "unite-rect" href = "#" onClick = "return toggleMember('unite-rect', false);" > < tt > < b > unite< / b > (rect)< / tt > < / a >
< / div >
< div id = "unite-rect-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('unite-rect', false);" > < tt > < b > unite< / b > (rect)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('unite-rect', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Returns a new rectangle representing the union of this rectangle with the
specified rectangle.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > rect:< / tt >
< a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a >
— the rectangle to be combined with this rectangle
< / li >
< / ul >
< ul > < b > Returns:< / b >
< li >
< tt > < a href = "../classes/Rectangle.html" > < tt > Rectangle< / tt > < / a > < / tt > — the smallest rectangle containing both the specified
rectangle and this rectangle.
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "include-point-member" class = "member" >
< div id = "include-point-link" class = "member-link" >
< a name = "include-point" href = "#" onClick = "return toggleMember('include-point', false);" > < tt > < b > include< / b > (point)< / tt > < / a >
< / div >
< div id = "include-point-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('include-point', false);" > < tt > < b > include< / b > (point)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('include-point', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< 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" onclick = "return toggleMember('contains-point', true);" > < tt > contains(point)< / tt > < / a > with the added
point as an argument does not necessarily return < tt > true< / tt > .< / p >
< p > The < a href = "../classes/Rectangle.html#contains-point" > < tt > rectangle.contains(point)< / tt > < / a > method does not return < tt > true< / tt >
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 < tt > false< / tt > for that point.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- =========================== copyright notice ========================= -->
2011-06-17 06:41:47 -04:00
< p class = "footer" > Copyright © 2011 < 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 >
< div class = "content-end" > < / div >
2011-06-12 14:04:25 -04:00
< / body >
