paper 0.12.17 → 0.12.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/dist/docs/assets/js/paper.js +19 -11
  3. package/dist/docs/classes/Color.html +2 -2
  4. package/dist/docs/classes/CompoundPath.html +3 -4
  5. package/dist/docs/classes/Curve.html +2 -2
  6. package/dist/docs/classes/CurveLocation.html +2 -2
  7. package/dist/docs/classes/Event.html +2 -2
  8. package/dist/docs/classes/Gradient.html +2 -2
  9. package/dist/docs/classes/GradientStop.html +2 -2
  10. package/dist/docs/classes/Group.html +3 -4
  11. package/dist/docs/classes/HitResult.html +2 -2
  12. package/dist/docs/classes/Item.html +3 -4
  13. package/dist/docs/classes/Key.html +2 -2
  14. package/dist/docs/classes/KeyEvent.html +2 -2
  15. package/dist/docs/classes/Layer.html +3 -4
  16. package/dist/docs/classes/Matrix.html +2 -2
  17. package/dist/docs/classes/MouseEvent.html +2 -2
  18. package/dist/docs/classes/PaperScope.html +2 -2
  19. package/dist/docs/classes/PaperScript.html +2 -2
  20. package/dist/docs/classes/Path.html +3 -4
  21. package/dist/docs/classes/PathItem.html +3 -4
  22. package/dist/docs/classes/Point.html +2 -2
  23. package/dist/docs/classes/PointText.html +3 -4
  24. package/dist/docs/classes/Project.html +3 -2
  25. package/dist/docs/classes/Raster.html +3 -4
  26. package/dist/docs/classes/Rectangle.html +2 -2
  27. package/dist/docs/classes/Segment.html +2 -2
  28. package/dist/docs/classes/Shape.html +3 -4
  29. package/dist/docs/classes/Size.html +2 -2
  30. package/dist/docs/classes/Style.html +2 -2
  31. package/dist/docs/classes/SymbolDefinition.html +2 -2
  32. package/dist/docs/classes/SymbolItem.html +3 -4
  33. package/dist/docs/classes/TextItem.html +3 -4
  34. package/dist/docs/classes/Tool.html +2 -2
  35. package/dist/docs/classes/ToolEvent.html +2 -2
  36. package/dist/docs/classes/Tween.html +2 -2
  37. package/dist/docs/classes/View.html +3 -3
  38. package/dist/docs/classes/global.html +2 -2
  39. package/dist/docs/classes/index.html +2 -2
  40. package/dist/docs/index.html +1 -1
  41. package/dist/paper-core.js +19 -11
  42. package/dist/paper-core.min.js +3 -3
  43. package/dist/paper-full.js +19 -11
  44. package/dist/paper-full.min.js +3 -3
  45. package/dist/paper.d.ts +10 -4
  46. package/dist/paperjs/LICENSE.txt +23 -0
  47. package/dist/paperjs/dist/node/canvas.js +66 -0
  48. package/dist/paperjs/dist/node/extend.js +156 -0
  49. package/dist/paperjs/dist/node/self.js +58 -0
  50. package/dist/paperjs/dist/node/xml.js +40 -0
  51. package/dist/paperjs/dist/paper-core.d.ts +1 -0
  52. package/dist/paperjs/dist/paper-core.js +15703 -0
  53. package/dist/paperjs/dist/paper-core.min.js +32 -0
  54. package/dist/paperjs/dist/paper-full.js +17472 -0
  55. package/dist/paperjs/dist/paper-full.min.js +32 -0
  56. package/dist/paperjs/dist/paper.d.ts +7394 -0
  57. package/dist/paperjs/docs/assets/css/docs.css +414 -0
  58. package/dist/paperjs/docs/assets/js/codemirror.js +4 -0
  59. package/dist/paperjs/docs/assets/js/docs.js +493 -0
  60. package/dist/paperjs/docs/assets/js/jquery.js +6 -0
  61. package/dist/paperjs/docs/assets/js/paper.js +17472 -0
  62. package/dist/paperjs/docs/classes/Color.html +2188 -0
  63. package/dist/paperjs/docs/classes/CompoundPath.html +8877 -0
  64. package/dist/paperjs/docs/classes/Curve.html +2323 -0
  65. package/dist/paperjs/docs/classes/CurveLocation.html +672 -0
  66. package/dist/paperjs/docs/classes/Event.html +176 -0
  67. package/dist/paperjs/docs/classes/Gradient.html +240 -0
  68. package/dist/paperjs/docs/classes/GradientStop.html +273 -0
  69. package/dist/paperjs/docs/classes/Group.html +6864 -0
  70. package/dist/paperjs/docs/classes/HitResult.html +239 -0
  71. package/dist/paperjs/docs/classes/Item.html +6628 -0
  72. package/dist/paperjs/docs/classes/Key.html +139 -0
  73. package/dist/paperjs/docs/classes/KeyEvent.html +308 -0
  74. package/dist/paperjs/docs/classes/Layer.html +6850 -0
  75. package/dist/paperjs/docs/classes/Matrix.html +1744 -0
  76. package/dist/paperjs/docs/classes/MouseEvent.html +355 -0
  77. package/dist/paperjs/docs/classes/PaperScope.html +459 -0
  78. package/dist/paperjs/docs/classes/PaperScript.html +198 -0
  79. package/dist/paperjs/docs/classes/Path.html +11775 -0
  80. package/dist/paperjs/docs/classes/PathItem.html +8639 -0
  81. package/dist/paperjs/docs/classes/Point.html +2699 -0
  82. package/dist/paperjs/docs/classes/PointText.html +7029 -0
  83. package/dist/paperjs/docs/classes/Project.html +1305 -0
  84. package/dist/paperjs/docs/classes/Raster.html +7843 -0
  85. package/dist/paperjs/docs/classes/Rectangle.html +1654 -0
  86. package/dist/paperjs/docs/classes/Segment.html +939 -0
  87. package/dist/paperjs/docs/classes/Shape.html +7363 -0
  88. package/dist/paperjs/docs/classes/Size.html +1825 -0
  89. package/dist/paperjs/docs/classes/Style.html +919 -0
  90. package/dist/paperjs/docs/classes/SymbolDefinition.html +311 -0
  91. package/dist/paperjs/docs/classes/SymbolItem.html +6755 -0
  92. package/dist/paperjs/docs/classes/TextItem.html +6869 -0
  93. package/dist/paperjs/docs/classes/Tool.html +761 -0
  94. package/dist/paperjs/docs/classes/ToolEvent.html +446 -0
  95. package/dist/paperjs/docs/classes/Tween.html +374 -0
  96. package/dist/paperjs/docs/classes/View.html +1772 -0
  97. package/dist/paperjs/docs/classes/global.html +425 -0
  98. package/dist/paperjs/docs/classes/index.html +88 -0
  99. package/dist/paperjs/docs/index.html +11 -0
  100. package/dist/paperjs/examples/Animated/AnimatedStar.html +53 -0
  101. package/dist/paperjs/examples/Animated/BooleanOperations.html +115 -0
  102. package/dist/paperjs/examples/Animated/CandyCrash.html +151 -0
  103. package/dist/paperjs/examples/Animated/Extruded.html +50 -0
  104. package/dist/paperjs/examples/Animated/Lines.html +53 -0
  105. package/dist/paperjs/examples/Animated/Smoothing.html +70 -0
  106. package/dist/paperjs/examples/Animated/Space.html +86 -0
  107. package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +79 -0
  108. package/dist/paperjs/examples/Games/Paperoids.html +569 -0
  109. package/dist/paperjs/examples/JSON/Circle Testing.html +34 -0
  110. package/dist/paperjs/examples/JSON/Compound Path.html +25 -0
  111. package/dist/paperjs/examples/JSON/Empty Path Testing.html +31 -0
  112. package/dist/paperjs/examples/JSON/Gradients.html +34 -0
  113. package/dist/paperjs/examples/JSON/Group Transform.html +28 -0
  114. package/dist/paperjs/examples/JSON/Line Testing.html +44 -0
  115. package/dist/paperjs/examples/JSON/Random Path Testing.html +42 -0
  116. package/dist/paperjs/examples/JSON/Raster.html +29 -0
  117. package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +56 -0
  118. package/dist/paperjs/examples/JSON/Rotated Primitives.html +55 -0
  119. package/dist/paperjs/examples/JSON/Selection.html +43 -0
  120. package/dist/paperjs/examples/JSON/Shapes.html +54 -0
  121. package/dist/paperjs/examples/JSON/Symbols.html +30 -0
  122. package/dist/paperjs/examples/JSON/Text Testing.html +38 -0
  123. package/dist/paperjs/examples/JSON/Tiger.html +19 -0
  124. package/dist/paperjs/examples/JSON/Transform Test 1.html +32 -0
  125. package/dist/paperjs/examples/JSON/Transform Test 2.html +30 -0
  126. package/dist/paperjs/examples/Node.js/AnimatedStar.js +52 -0
  127. package/dist/paperjs/examples/Node.js/BooleanOperations.js +36 -0
  128. package/dist/paperjs/examples/Node.js/JSONtoPDF.js +20 -0
  129. package/dist/paperjs/examples/Node.js/Raster.js +32 -0
  130. package/dist/paperjs/examples/Node.js/RasterRemote.js +33 -0
  131. package/dist/paperjs/examples/Node.js/SvgExport.js +52 -0
  132. package/dist/paperjs/examples/Node.js/SvgImport.js +23 -0
  133. package/dist/paperjs/examples/Node.js/Tadpoles.js +16 -0
  134. package/dist/paperjs/examples/Node.js/Tadpoles.pjs +278 -0
  135. package/dist/paperjs/examples/Node.js/in.json +1 -0
  136. package/dist/paperjs/examples/Node.js/in.svg +16 -0
  137. package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +115 -0
  138. package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +103 -0
  139. package/dist/paperjs/examples/Paperjs.org/Chain.html +54 -0
  140. package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +72 -0
  141. package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +122 -0
  142. package/dist/paperjs/examples/Paperjs.org/HitTesting.html +103 -0
  143. package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +777 -0
  144. package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +132 -0
  145. package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +202 -0
  146. package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +76 -0
  147. package/dist/paperjs/examples/Paperjs.org/Qbertify.html +146 -0
  148. package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +80 -0
  149. package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +41 -0
  150. package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +140 -0
  151. package/dist/paperjs/examples/Paperjs.org/Simplify.html +63 -0
  152. package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +120 -0
  153. package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +283 -0
  154. package/dist/paperjs/examples/Paperjs.org/Voronoi.html +134 -0
  155. package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +96 -0
  156. package/dist/paperjs/examples/Rasters/Raster.html +34 -0
  157. package/dist/paperjs/examples/Rasters/RotationRaster.html +44 -0
  158. package/dist/paperjs/examples/Rasters/Smoothing.html +36 -0
  159. package/dist/paperjs/examples/SVG Export/Circle Testing.html +32 -0
  160. package/dist/paperjs/examples/SVG Export/Clipping.html +17 -0
  161. package/dist/paperjs/examples/SVG Export/Compound Path.html +22 -0
  162. package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +28 -0
  163. package/dist/paperjs/examples/SVG Export/Gradients.html +52 -0
  164. package/dist/paperjs/examples/SVG Export/Group Transform.html +25 -0
  165. package/dist/paperjs/examples/SVG Export/Line Testing.html +41 -0
  166. package/dist/paperjs/examples/SVG Export/Random Path Testing.html +39 -0
  167. package/dist/paperjs/examples/SVG Export/Raster.html +21 -0
  168. package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +53 -0
  169. package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +80 -0
  170. package/dist/paperjs/examples/SVG Export/Shapes.html +58 -0
  171. package/dist/paperjs/examples/SVG Export/Symbols.html +27 -0
  172. package/dist/paperjs/examples/SVG Export/Text Testing.html +45 -0
  173. package/dist/paperjs/examples/SVG Export/Tiger.html +23 -0
  174. package/dist/paperjs/examples/SVG Export/Transform Test 1.html +29 -0
  175. package/dist/paperjs/examples/SVG Export/Transform Test 2.html +27 -0
  176. package/dist/paperjs/examples/SVG Import/Arcs.html +78 -0
  177. package/dist/paperjs/examples/SVG Import/Butterfly.html +223 -0
  178. package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +26 -0
  179. package/dist/paperjs/examples/SVG Import/Clipping.html +100 -0
  180. package/dist/paperjs/examples/SVG Import/From File.html +30 -0
  181. package/dist/paperjs/examples/SVG Import/Gradient.html +138 -0
  182. package/dist/paperjs/examples/SVG Import/Gradients.html +30 -0
  183. package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +52 -0
  184. package/dist/paperjs/examples/SVG Import/Inkscape.html +88 -0
  185. package/dist/paperjs/examples/SVG Import/Line Testing.html +24 -0
  186. package/dist/paperjs/examples/SVG Import/MoreGradients.html +107 -0
  187. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +42 -0
  188. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +33 -0
  189. package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +78 -0
  190. package/dist/paperjs/examples/SVG Import/Polybezier.html +43 -0
  191. package/dist/paperjs/examples/SVG Import/Rect Testing.html +25 -0
  192. package/dist/paperjs/examples/SVG Import/Symbols.html +24 -0
  193. package/dist/paperjs/examples/SVG Import/Testing.html +40 -0
  194. package/dist/paperjs/examples/SVG Import/Text Testing.html +19 -0
  195. package/dist/paperjs/examples/SVG Import/Tiger.html +742 -0
  196. package/dist/paperjs/examples/SVG Import/Transform Testing.html +22 -0
  197. package/dist/paperjs/examples/SVG Import/Viewbox.html +38 -0
  198. package/dist/paperjs/examples/Scripts/Arcs.html +39 -0
  199. package/dist/paperjs/examples/Scripts/BlendModes.html +77 -0
  200. package/dist/paperjs/examples/Scripts/BooleanOperations.html +937 -0
  201. package/dist/paperjs/examples/Scripts/CompoundPath.html +19 -0
  202. package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +61 -0
  203. package/dist/paperjs/examples/Scripts/HslColor.html +53 -0
  204. package/dist/paperjs/examples/Scripts/PathStructure.html +82 -0
  205. package/dist/paperjs/examples/Scripts/PathTangents.html +73 -0
  206. package/dist/paperjs/examples/Scripts/Resize.html +42 -0
  207. package/dist/paperjs/examples/Scripts/RoundRectangle.html +28 -0
  208. package/dist/paperjs/examples/Scripts/Shapes.html +54 -0
  209. package/dist/paperjs/examples/Scripts/StrokeBounds.html +101 -0
  210. package/dist/paperjs/examples/Scripts/StrokeScaling.html +65 -0
  211. package/dist/paperjs/examples/Tools/BezierTool.html +90 -0
  212. package/dist/paperjs/examples/Tools/Circles.html +28 -0
  213. package/dist/paperjs/examples/Tools/Clouds.html +35 -0
  214. package/dist/paperjs/examples/Tools/DrippingBrush.html +73 -0
  215. package/dist/paperjs/examples/Tools/FancyBrush.html +82 -0
  216. package/dist/paperjs/examples/Tools/Grid.html +44 -0
  217. package/dist/paperjs/examples/Tools/MultiLines.html +44 -0
  218. package/dist/paperjs/examples/Tools/MultipleTools.html +44 -0
  219. package/dist/paperjs/examples/Tools/PathEditing.html +95 -0
  220. package/dist/paperjs/examples/Tools/SquareRounded.html +76 -0
  221. package/dist/paperjs/examples/Tools/Stars.html +38 -0
  222. package/dist/paperjs/examples/Tools/Vektor.html +200 -0
  223. package/dist/paperjs/examples/Tools/Wave.html +50 -0
  224. package/dist/paperjs/examples/Tools/WormFarm.html +88 -0
  225. package/dist/paperjs/examples/Worker/Main.html +53 -0
  226. package/dist/paperjs/examples/Worker/Worker.js +14 -0
  227. package/dist/paperjs/examples/css/style.css +12 -0
  228. package/package.json +4 -4
package/dist/paperjs/docs/classes/Rectangle.html ADDED
@@ -0,0 +1,1654 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Rectangle</title>
6
+ <base target="class-frame">
7
+ <link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8
+ <script src="../assets/js/paper.js"></script>
9
+ <script src="../assets/js/jquery.js"></script>
10
+ <script src="../assets/js/codemirror.js"></script>
11
+ <script src="../assets/js/docs.js"></script>
12
+ </head>
13
+ <body>
14
+ <article class="reference">
15
+ <div class="reference-class">
16
+ <h1>Rectangle</h1>
17
+
18
+ <p>A Rectangle specifies an area that is enclosed by it&rsquo;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>
19
+
20
+ </div>
21
+
22
+ <!-- =============================== constructors ========================== -->
23
+ <div class="reference-members">
24
+ <h2>Constructors</h2>
25
+
26
+
27
+ <div id="rectangle-point-size" class="member">
28
+ <div class="member-link">
29
+ <a name="rectangle-point-size" href="#rectangle-point-size"><tt><b>Rectangle</b>(point, size)</tt></a>
30
+ </div>
31
+ <div class="member-description hidden">
32
+ <div class="member-text">
33
+ <p>Creates a Rectangle object.</p>
34
+
35
+
36
+ <ul class="member-list">
37
+ <h4>Parameters:</h4>
38
+
39
+ <li>
40
+ <tt>point:</tt>
41
+ <a href="../classes/Point.html"><tt>Point</tt></a>
42
+ &mdash;&nbsp;the top-left point of the rectangle
43
+
44
+ </li>
45
+
46
+ <li>
47
+ <tt>size:</tt>
48
+ <a href="../classes/Size.html"><tt>Size</tt></a>
49
+ &mdash;&nbsp;the size of the rectangle
50
+
51
+ </li>
52
+
53
+ </ul>
54
+
55
+
56
+ <ul class="member-list">
57
+ <h4>Returns:</h4>
58
+
59
+ <li>
60
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
61
+ </li>
62
+
63
+
64
+ </ul>
65
+
66
+
67
+
68
+
69
+
70
+ </div>
71
+ </div>
72
+ </div>
73
+
74
+
75
+ <div id="rectangle-object" class="member">
76
+ <div class="member-link">
77
+ <a name="rectangle-object" href="#rectangle-object"><tt><b>Rectangle</b>(object)</tt></a>
78
+ </div>
79
+ <div class="member-description hidden">
80
+ <div class="member-text">
81
+ <p>Creates a Rectangle object.</p>
82
+
83
+
84
+ <ul class="member-list">
85
+ <h4>Parameters:</h4>
86
+
87
+ <li>
88
+ <tt>object:</tt>
89
+ <tt>Object</tt>
90
+ &mdash;&nbsp;an object containing properties to be set on the rectangle
91
+
92
+ </li>
93
+
94
+ </ul>
95
+
96
+
97
+ <ul class="member-list">
98
+ <h4>Returns:</h4>
99
+
100
+ <li>
101
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
102
+ </li>
103
+
104
+
105
+ </ul>
106
+
107
+
108
+
109
+
110
+ <h4>Example:<span class="description">Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}</span></h4>
111
+
112
+
113
+ <pre><code>var rectangle = new Rectangle({
114
+ point: [20, 20],
115
+ size: [60, 60]
116
+ });</code></pre>
117
+
118
+ <h4>Example:<span class="description">Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}</span></h4>
119
+
120
+
121
+ <pre><code>var rectangle = new Rectangle({
122
+ from: [20, 20],
123
+ to: [80, 80]
124
+ });</code></pre>
125
+
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+
131
+ <div id="rectangle-x-y-width-height" class="member">
132
+ <div class="member-link">
133
+ <a name="rectangle-x-y-width-height" href="#rectangle-x-y-width-height"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
134
+ </div>
135
+ <div class="member-description hidden">
136
+ <div class="member-text">
137
+ <p>Creates a rectangle object.</p>
138
+
139
+
140
+ <ul class="member-list">
141
+ <h4>Parameters:</h4>
142
+
143
+ <li>
144
+ <tt>x:</tt>
145
+ <tt>Number</tt>
146
+ &mdash;&nbsp;the left coordinate
147
+
148
+ </li>
149
+
150
+ <li>
151
+ <tt>y:</tt>
152
+ <tt>Number</tt>
153
+ &mdash;&nbsp;the top coordinate
154
+
155
+ </li>
156
+
157
+ <li>
158
+ <tt>width:</tt>
159
+ <tt>Number</tt>
160
+
161
+
162
+ </li>
163
+
164
+ <li>
165
+ <tt>height:</tt>
166
+ <tt>Number</tt>
167
+
168
+
169
+ </li>
170
+
171
+ </ul>
172
+
173
+
174
+ <ul class="member-list">
175
+ <h4>Returns:</h4>
176
+
177
+ <li>
178
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
179
+ </li>
180
+
181
+
182
+ </ul>
183
+
184
+
185
+
186
+
187
+
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+
193
+ <div id="rectangle-from-to" class="member">
194
+ <div class="member-link">
195
+ <a name="rectangle-from-to" href="#rectangle-from-to"><tt><b>Rectangle</b>(from, to)</tt></a>
196
+ </div>
197
+ <div class="member-description hidden">
198
+ <div class="member-text">
199
+ <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>
200
+
201
+
202
+ <ul class="member-list">
203
+ <h4>Parameters:</h4>
204
+
205
+ <li>
206
+ <tt>from:</tt>
207
+ <a href="../classes/Point.html"><tt>Point</tt></a>
208
+ &mdash;&nbsp;the first point defining the rectangle
209
+
210
+ </li>
211
+
212
+ <li>
213
+ <tt>to:</tt>
214
+ <a href="../classes/Point.html"><tt>Point</tt></a>
215
+ &mdash;&nbsp;the second point defining the rectangle
216
+
217
+ </li>
218
+
219
+ </ul>
220
+
221
+
222
+ <ul class="member-list">
223
+ <h4>Returns:</h4>
224
+
225
+ <li>
226
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
227
+ </li>
228
+
229
+
230
+ </ul>
231
+
232
+
233
+
234
+
235
+
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+
241
+ <div id="rectangle-rectangle" class="member">
242
+ <div class="member-link">
243
+ <a name="rectangle-rectangle" href="#rectangle-rectangle"><tt><b>Rectangle</b>(rectangle)</tt></a>
244
+ </div>
245
+ <div class="member-description hidden">
246
+ <div class="member-text">
247
+ <p>Creates a new rectangle object from the passed rectangle object.</p>
248
+
249
+
250
+ <ul class="member-list">
251
+ <h4>Parameters:</h4>
252
+
253
+ <li>
254
+ <tt>rectangle:</tt>
255
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
256
+
257
+
258
+ </li>
259
+
260
+ </ul>
261
+
262
+
263
+ <ul class="member-list">
264
+ <h4>Returns:</h4>
265
+
266
+ <li>
267
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
268
+ </li>
269
+
270
+
271
+ </ul>
272
+
273
+
274
+
275
+
276
+
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ </div>
282
+
283
+
284
+
285
+
286
+
287
+ <!-- ================================ properties =========================== -->
288
+ <div class="reference-members">
289
+ <h2>Properties</h2>
290
+
291
+
292
+ <div id="x" class="member">
293
+ <div class="member-link">
294
+ <a name="x" href="#x"><tt><b>x</b></tt></a>
295
+ </div>
296
+ <div class="member-description hidden">
297
+
298
+ <div class="member-text">
299
+ <p>The x position of the rectangle.</p>
300
+
301
+
302
+
303
+ <ul class="member-list">
304
+ <h4>Type:</h4>
305
+ <li>
306
+ <tt>Number</tt>
307
+ </li>
308
+ </ul>
309
+
310
+
311
+
312
+ </div>
313
+
314
+ </div>
315
+ </div>
316
+
317
+
318
+ <div id="y" class="member">
319
+ <div class="member-link">
320
+ <a name="y" href="#y"><tt><b>y</b></tt></a>
321
+ </div>
322
+ <div class="member-description hidden">
323
+
324
+ <div class="member-text">
325
+ <p>The y position of the rectangle.</p>
326
+
327
+
328
+
329
+ <ul class="member-list">
330
+ <h4>Type:</h4>
331
+ <li>
332
+ <tt>Number</tt>
333
+ </li>
334
+ </ul>
335
+
336
+
337
+
338
+ </div>
339
+
340
+ </div>
341
+ </div>
342
+
343
+
344
+ <div id="width" class="member">
345
+ <div class="member-link">
346
+ <a name="width" href="#width"><tt><b>width</b></tt></a>
347
+ </div>
348
+ <div class="member-description hidden">
349
+
350
+ <div class="member-text">
351
+ <p>The width of the rectangle.</p>
352
+
353
+
354
+
355
+ <ul class="member-list">
356
+ <h4>Type:</h4>
357
+ <li>
358
+ <tt>Number</tt>
359
+ </li>
360
+ </ul>
361
+
362
+
363
+
364
+ </div>
365
+
366
+ </div>
367
+ </div>
368
+
369
+
370
+ <div id="height" class="member">
371
+ <div class="member-link">
372
+ <a name="height" href="#height"><tt><b>height</b></tt></a>
373
+ </div>
374
+ <div class="member-description hidden">
375
+
376
+ <div class="member-text">
377
+ <p>The height of the rectangle.</p>
378
+
379
+
380
+
381
+ <ul class="member-list">
382
+ <h4>Type:</h4>
383
+ <li>
384
+ <tt>Number</tt>
385
+ </li>
386
+ </ul>
387
+
388
+
389
+
390
+ </div>
391
+
392
+ </div>
393
+ </div>
394
+
395
+
396
+ <div id="point" class="member">
397
+ <div class="member-link">
398
+ <a name="point" href="#point"><tt><b>point</b></tt></a>
399
+ </div>
400
+ <div class="member-description hidden">
401
+
402
+ <div class="member-text">
403
+ <p>The top-left point of the rectangle</p>
404
+
405
+
406
+
407
+ <ul class="member-list">
408
+ <h4>Type:</h4>
409
+ <li>
410
+ <a href="../classes/Point.html"><tt>Point</tt></a>
411
+ </li>
412
+ </ul>
413
+
414
+
415
+
416
+ </div>
417
+
418
+ </div>
419
+ </div>
420
+
421
+
422
+ <div id="size" class="member">
423
+ <div class="member-link">
424
+ <a name="size" href="#size"><tt><b>size</b></tt></a>
425
+ </div>
426
+ <div class="member-description hidden">
427
+
428
+ <div class="member-text">
429
+ <p>The size of the rectangle</p>
430
+
431
+
432
+
433
+ <ul class="member-list">
434
+ <h4>Type:</h4>
435
+ <li>
436
+ <a href="../classes/Size.html"><tt>Size</tt></a>
437
+ </li>
438
+ </ul>
439
+
440
+
441
+
442
+ </div>
443
+
444
+ </div>
445
+ </div>
446
+
447
+
448
+ <h3>Side Positions</h3>
449
+
450
+ <div id="left" class="member">
451
+ <div class="member-link">
452
+ <a name="left" href="#left"><tt><b>left</b></tt></a>
453
+ </div>
454
+ <div class="member-description hidden">
455
+
456
+ <div class="member-text">
457
+ <p>The position of the left hand side of the rectangle. Note that this doesn&rsquo;t move the whole rectangle; the right hand side stays where it was.</p>
458
+
459
+
460
+
461
+ <ul class="member-list">
462
+ <h4>Type:</h4>
463
+ <li>
464
+ <tt>Number</tt>
465
+ </li>
466
+ </ul>
467
+
468
+
469
+
470
+ </div>
471
+
472
+ </div>
473
+ </div>
474
+
475
+
476
+ <div id="top" class="member">
477
+ <div class="member-link">
478
+ <a name="top" href="#top"><tt><b>top</b></tt></a>
479
+ </div>
480
+ <div class="member-description hidden">
481
+
482
+ <div class="member-text">
483
+ <p>The top coordinate of the rectangle. Note that this doesn&rsquo;t move the whole rectangle: the bottom won&rsquo;t move.</p>
484
+
485
+
486
+
487
+ <ul class="member-list">
488
+ <h4>Type:</h4>
489
+ <li>
490
+ <tt>Number</tt>
491
+ </li>
492
+ </ul>
493
+
494
+
495
+
496
+ </div>
497
+
498
+ </div>
499
+ </div>
500
+
501
+
502
+ <div id="right" class="member">
503
+ <div class="member-link">
504
+ <a name="right" href="#right"><tt><b>right</b></tt></a>
505
+ </div>
506
+ <div class="member-description hidden">
507
+
508
+ <div class="member-text">
509
+ <p>The position of the right hand side of the rectangle. Note that this doesn&rsquo;t move the whole rectangle; the left hand side stays where it was.</p>
510
+
511
+
512
+
513
+ <ul class="member-list">
514
+ <h4>Type:</h4>
515
+ <li>
516
+ <tt>Number</tt>
517
+ </li>
518
+ </ul>
519
+
520
+
521
+
522
+ </div>
523
+
524
+ </div>
525
+ </div>
526
+
527
+
528
+ <div id="bottom" class="member">
529
+ <div class="member-link">
530
+ <a name="bottom" href="#bottom"><tt><b>bottom</b></tt></a>
531
+ </div>
532
+ <div class="member-description hidden">
533
+
534
+ <div class="member-text">
535
+ <p>The bottom coordinate of the rectangle. Note that this doesn&rsquo;t move the whole rectangle: the top won&rsquo;t move.</p>
536
+
537
+
538
+
539
+ <ul class="member-list">
540
+ <h4>Type:</h4>
541
+ <li>
542
+ <tt>Number</tt>
543
+ </li>
544
+ </ul>
545
+
546
+
547
+
548
+ </div>
549
+
550
+ </div>
551
+ </div>
552
+
553
+
554
+ <h3>Corner and Center Point Positions</h3>
555
+
556
+ <div id="center" class="member">
557
+ <div class="member-link">
558
+ <a name="center" href="#center"><tt><b>center</b></tt></a>
559
+ </div>
560
+ <div class="member-description hidden">
561
+
562
+ <div class="member-text">
563
+ <p>The center point of the rectangle.</p>
564
+
565
+
566
+
567
+ <ul class="member-list">
568
+ <h4>Type:</h4>
569
+ <li>
570
+ <a href="../classes/Point.html"><tt>Point</tt></a>
571
+ </li>
572
+ </ul>
573
+
574
+
575
+
576
+ </div>
577
+
578
+ </div>
579
+ </div>
580
+
581
+
582
+ <div id="topleft" class="member">
583
+ <div class="member-link">
584
+ <a name="topleft" href="#topleft"><tt><b>topLeft</b></tt></a>
585
+ </div>
586
+ <div class="member-description hidden">
587
+
588
+ <div class="member-text">
589
+ <p>The top-left point of the rectangle.</p>
590
+
591
+
592
+
593
+ <ul class="member-list">
594
+ <h4>Type:</h4>
595
+ <li>
596
+ <a href="../classes/Point.html"><tt>Point</tt></a>
597
+ </li>
598
+ </ul>
599
+
600
+
601
+
602
+ </div>
603
+
604
+ </div>
605
+ </div>
606
+
607
+
608
+ <div id="topright" class="member">
609
+ <div class="member-link">
610
+ <a name="topright" href="#topright"><tt><b>topRight</b></tt></a>
611
+ </div>
612
+ <div class="member-description hidden">
613
+
614
+ <div class="member-text">
615
+ <p>The top-right point of the rectangle.</p>
616
+
617
+
618
+
619
+ <ul class="member-list">
620
+ <h4>Type:</h4>
621
+ <li>
622
+ <a href="../classes/Point.html"><tt>Point</tt></a>
623
+ </li>
624
+ </ul>
625
+
626
+
627
+
628
+ </div>
629
+
630
+ </div>
631
+ </div>
632
+
633
+
634
+ <div id="bottomleft" class="member">
635
+ <div class="member-link">
636
+ <a name="bottomleft" href="#bottomleft"><tt><b>bottomLeft</b></tt></a>
637
+ </div>
638
+ <div class="member-description hidden">
639
+
640
+ <div class="member-text">
641
+ <p>The bottom-left point of the rectangle.</p>
642
+
643
+
644
+
645
+ <ul class="member-list">
646
+ <h4>Type:</h4>
647
+ <li>
648
+ <a href="../classes/Point.html"><tt>Point</tt></a>
649
+ </li>
650
+ </ul>
651
+
652
+
653
+
654
+ </div>
655
+
656
+ </div>
657
+ </div>
658
+
659
+
660
+ <div id="bottomright" class="member">
661
+ <div class="member-link">
662
+ <a name="bottomright" href="#bottomright"><tt><b>bottomRight</b></tt></a>
663
+ </div>
664
+ <div class="member-description hidden">
665
+
666
+ <div class="member-text">
667
+ <p>The bottom-right point of the rectangle.</p>
668
+
669
+
670
+
671
+ <ul class="member-list">
672
+ <h4>Type:</h4>
673
+ <li>
674
+ <a href="../classes/Point.html"><tt>Point</tt></a>
675
+ </li>
676
+ </ul>
677
+
678
+
679
+
680
+ </div>
681
+
682
+ </div>
683
+ </div>
684
+
685
+
686
+ <div id="leftcenter" class="member">
687
+ <div class="member-link">
688
+ <a name="leftcenter" href="#leftcenter"><tt><b>leftCenter</b></tt></a>
689
+ </div>
690
+ <div class="member-description hidden">
691
+
692
+ <div class="member-text">
693
+ <p>The left-center point of the rectangle.</p>
694
+
695
+
696
+
697
+ <ul class="member-list">
698
+ <h4>Type:</h4>
699
+ <li>
700
+ <a href="../classes/Point.html"><tt>Point</tt></a>
701
+ </li>
702
+ </ul>
703
+
704
+
705
+
706
+ </div>
707
+
708
+ </div>
709
+ </div>
710
+
711
+
712
+ <div id="topcenter" class="member">
713
+ <div class="member-link">
714
+ <a name="topcenter" href="#topcenter"><tt><b>topCenter</b></tt></a>
715
+ </div>
716
+ <div class="member-description hidden">
717
+
718
+ <div class="member-text">
719
+ <p>The top-center point of the rectangle.</p>
720
+
721
+
722
+
723
+ <ul class="member-list">
724
+ <h4>Type:</h4>
725
+ <li>
726
+ <a href="../classes/Point.html"><tt>Point</tt></a>
727
+ </li>
728
+ </ul>
729
+
730
+
731
+
732
+ </div>
733
+
734
+ </div>
735
+ </div>
736
+
737
+
738
+ <div id="rightcenter" class="member">
739
+ <div class="member-link">
740
+ <a name="rightcenter" href="#rightcenter"><tt><b>rightCenter</b></tt></a>
741
+ </div>
742
+ <div class="member-description hidden">
743
+
744
+ <div class="member-text">
745
+ <p>The right-center point of the rectangle.</p>
746
+
747
+
748
+
749
+ <ul class="member-list">
750
+ <h4>Type:</h4>
751
+ <li>
752
+ <a href="../classes/Point.html"><tt>Point</tt></a>
753
+ </li>
754
+ </ul>
755
+
756
+
757
+
758
+ </div>
759
+
760
+ </div>
761
+ </div>
762
+
763
+
764
+ <div id="bottomcenter" class="member">
765
+ <div class="member-link">
766
+ <a name="bottomcenter" href="#bottomcenter"><tt><b>bottomCenter</b></tt></a>
767
+ </div>
768
+ <div class="member-description hidden">
769
+
770
+ <div class="member-text">
771
+ <p>The bottom-center point of the rectangle.</p>
772
+
773
+
774
+
775
+ <ul class="member-list">
776
+ <h4>Type:</h4>
777
+ <li>
778
+ <a href="../classes/Point.html"><tt>Point</tt></a>
779
+ </li>
780
+ </ul>
781
+
782
+
783
+
784
+ </div>
785
+
786
+ </div>
787
+ </div>
788
+
789
+
790
+ <div id="area" class="member">
791
+ <div class="member-link">
792
+ <a name="area" href="#area"><tt><b>area</b></tt></a>
793
+ </div>
794
+ <div class="member-description hidden">
795
+
796
+ <div class="member-text">
797
+ <p>The area of the rectangle.</p>
798
+
799
+ <p>Read only.</p>
800
+
801
+
802
+
803
+ <ul class="member-list">
804
+ <h4>Type:</h4>
805
+ <li>
806
+ <tt>Number</tt>
807
+ </li>
808
+ </ul>
809
+
810
+
811
+
812
+ </div>
813
+
814
+ </div>
815
+ </div>
816
+
817
+
818
+ <h3>Item Bounds</h3>
819
+
820
+ <div id="selected" class="member">
821
+ <div class="member-link">
822
+ <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
823
+ </div>
824
+ <div class="member-description hidden">
825
+
826
+ <div class="member-text">
827
+ <p>Specifies whether an item&rsquo;s bounds are to appear as selected.</p>
828
+ <p>Paper.js draws the bounds of items with selected bounds on top of your project. This is very useful when debugging.</p>
829
+
830
+
831
+
832
+ <ul class="member-list">
833
+ <h4>Default:</h4>
834
+ <li><tt>false</tt></li>
835
+ </ul>
836
+
837
+ <ul class="member-list">
838
+ <h4>Type:</h4>
839
+ <li>
840
+ <tt>Boolean</tt>
841
+ </li>
842
+ </ul>
843
+
844
+
845
+ <h4>Example:</h4>
846
+
847
+ <div class="paperscript split">
848
+
849
+ <div class="buttons">
850
+ <div class="button run">Run</div>
851
+ </div>
852
+
853
+ <script type="text/paperscript" canvas="canvas-0">
854
+ var path = new Path.Circle({
855
+ center: [80, 50],
856
+ radius: 40,
857
+ selected: true
858
+ });
859
+
860
+ path.bounds.selected = true;
861
+ </script>
862
+ <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
863
+ </div>
864
+
865
+
866
+ </div>
867
+
868
+ </div>
869
+ </div>
870
+
871
+ </div>
872
+
873
+
874
+
875
+
876
+
877
+ <!-- ============================== methods ================================ -->
878
+ <div class="reference-members">
879
+ <h2>Methods</h2>
880
+
881
+
882
+ <div id="set-values" class="member">
883
+ <div class="member-link">
884
+ <a name="set-values" href="#set-values"><tt><b>set</b>(...values)</tt></a>
885
+ </div>
886
+ <div class="member-description hidden">
887
+ <div class="member-text">
888
+ <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>
889
+
890
+
891
+ <ul class="member-list">
892
+ <h4>Parameters:</h4>
893
+
894
+ <li>
895
+ <tt>values:</tt>
896
+ <tt>any value</tt>
897
+
898
+
899
+ </li>
900
+
901
+ </ul>
902
+
903
+
904
+ <ul class="member-list">
905
+ <h4>Returns:</h4>
906
+
907
+ <li>
908
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
909
+ </li>
910
+
911
+
912
+ </ul>
913
+
914
+
915
+
916
+
917
+
918
+ </div>
919
+ </div>
920
+ </div>
921
+
922
+
923
+ <div id="clone" class="member">
924
+ <div class="member-link">
925
+ <a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
926
+ </div>
927
+ <div class="member-description hidden">
928
+ <div class="member-text">
929
+ <p>Returns a copy of the rectangle.</p>
930
+
931
+
932
+
933
+ <ul class="member-list">
934
+ <h4>Returns:</h4>
935
+
936
+ <li>
937
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>
938
+ </li>
939
+
940
+
941
+ </ul>
942
+
943
+
944
+
945
+
946
+
947
+ </div>
948
+ </div>
949
+ </div>
950
+
951
+
952
+ <div id="equals-rect" class="member">
953
+ <div class="member-link">
954
+ <a name="equals-rect" href="#equals-rect"><tt><b>equals</b>(rect)</tt></a>
955
+ </div>
956
+ <div class="member-description hidden">
957
+ <div class="member-text">
958
+ <p>Checks whether the coordinates and size of the rectangle are equal to that of the supplied rectangle.</p>
959
+
960
+
961
+ <ul class="member-list">
962
+ <h4>Parameters:</h4>
963
+
964
+ <li>
965
+ <tt>rect:</tt>
966
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
967
+
968
+
969
+ </li>
970
+
971
+ </ul>
972
+
973
+
974
+ <ul class="member-list">
975
+ <h4>Returns:</h4>
976
+
977
+ <li>
978
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangles are equal, <tt>false</tt> otherwise
979
+ </li>
980
+
981
+
982
+ </ul>
983
+
984
+
985
+
986
+
987
+
988
+ </div>
989
+ </div>
990
+ </div>
991
+
992
+
993
+ <div id="tostring" class="member">
994
+ <div class="member-link">
995
+ <a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
996
+ </div>
997
+ <div class="member-description hidden">
998
+ <div class="member-text">
999
+
1000
+
1001
+
1002
+
1003
+ <ul class="member-list">
1004
+ <h4>Returns:</h4>
1005
+
1006
+ <li>
1007
+ <tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of this rectangle
1008
+ </li>
1009
+
1010
+
1011
+ </ul>
1012
+
1013
+
1014
+
1015
+
1016
+
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+
1022
+ <div id="isempty" class="member">
1023
+ <div class="member-link">
1024
+ <a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
1025
+ </div>
1026
+ <div class="member-description hidden">
1027
+ <div class="member-text">
1028
+
1029
+
1030
+
1031
+
1032
+ <ul class="member-list">
1033
+ <h4>Returns:</h4>
1034
+
1035
+ <li>
1036
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle is empty, <tt>false</tt> otherwise
1037
+ </li>
1038
+
1039
+
1040
+ </ul>
1041
+
1042
+
1043
+
1044
+
1045
+
1046
+ </div>
1047
+ </div>
1048
+ </div>
1049
+
1050
+
1051
+ <h3>Geometric Tests</h3>
1052
+
1053
+ <div id="contains-point" class="member">
1054
+ <div class="member-link">
1055
+ <a name="contains-point" href="#contains-point"><tt><b>contains</b>(point)</tt></a>
1056
+ </div>
1057
+ <div class="member-description hidden">
1058
+ <div class="member-text">
1059
+ <p>Tests if the specified point is inside the boundary of the rectangle.</p>
1060
+
1061
+
1062
+ <ul class="member-list">
1063
+ <h4>Parameters:</h4>
1064
+
1065
+ <li>
1066
+ <tt>point:</tt>
1067
+ <a href="../classes/Point.html"><tt>Point</tt></a>
1068
+ &mdash;&nbsp;the specified point
1069
+
1070
+ </li>
1071
+
1072
+ </ul>
1073
+
1074
+
1075
+ <ul class="member-list">
1076
+ <h4>Returns:</h4>
1077
+
1078
+ <li>
1079
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle&rsquo;s boundary, <tt>false</tt> otherwise
1080
+ </li>
1081
+
1082
+
1083
+ </ul>
1084
+
1085
+
1086
+
1087
+
1088
+ <h4>Example:<span class="description">Checking whether the mouse position falls within the bounding rectangle of an item:</span></h4>
1089
+
1090
+ <div class="paperscript split">
1091
+
1092
+ <div class="buttons">
1093
+ <div class="button run">Run</div>
1094
+ </div>
1095
+
1096
+ <script type="text/paperscript" canvas="canvas-1">
1097
+ // Create a circle shaped path at {x: 80, y: 50}
1098
+ // with a radius of 30.
1099
+ var circle = new Path.Circle(new Point(80, 50), 30);
1100
+ circle.fillColor = 'red';
1101
+
1102
+ function onMouseMove(event) {
1103
+ // Check whether the mouse position intersects with the
1104
+ // bounding box of the item:
1105
+ if (circle.bounds.contains(event.point)) {
1106
+ // If it intersects, fill it with green:
1107
+ circle.fillColor = 'green';
1108
+ } else {
1109
+ // If it doesn't intersect, fill it with red:
1110
+ circle.fillColor = 'red';
1111
+ }
1112
+ }
1113
+ </script>
1114
+ <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
1115
+ </div>
1116
+
1117
+
1118
+ </div>
1119
+ </div>
1120
+ </div>
1121
+
1122
+
1123
+ <div id="contains-rect" class="member">
1124
+ <div class="member-link">
1125
+ <a name="contains-rect" href="#contains-rect"><tt><b>contains</b>(rect)</tt></a>
1126
+ </div>
1127
+ <div class="member-description hidden">
1128
+ <div class="member-text">
1129
+ <p>Tests if the interior of the rectangle entirely contains the specified rectangle.</p>
1130
+
1131
+
1132
+ <ul class="member-list">
1133
+ <h4>Parameters:</h4>
1134
+
1135
+ <li>
1136
+ <tt>rect:</tt>
1137
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1138
+ &mdash;&nbsp;the specified rectangle
1139
+
1140
+ </li>
1141
+
1142
+ </ul>
1143
+
1144
+
1145
+ <ul class="member-list">
1146
+ <h4>Returns:</h4>
1147
+
1148
+ <li>
1149
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle entirely contains the specified rectangle, <tt>false</tt> otherwise
1150
+ </li>
1151
+
1152
+
1153
+ </ul>
1154
+
1155
+
1156
+
1157
+
1158
+ <h4>Example:<span class="description">Checking whether the bounding box of one item is contained within that of another item:</span></h4>
1159
+
1160
+ <div class="paperscript split">
1161
+
1162
+ <div class="buttons">
1163
+ <div class="button run">Run</div>
1164
+ </div>
1165
+
1166
+ <script type="text/paperscript" canvas="canvas-2">
1167
+ // All newly created paths will inherit these styles:
1168
+ project.currentStyle = {
1169
+ fillColor: 'green',
1170
+ strokeColor: 'black'
1171
+ };
1172
+
1173
+ // Create a circle shaped path at {x: 80, y: 50}
1174
+ // with a radius of 45.
1175
+ var largeCircle = new Path.Circle(new Point(80, 50), 45);
1176
+
1177
+ // Create a smaller circle shaped path in the same position
1178
+ // with a radius of 30.
1179
+ var circle = new Path.Circle(new Point(80, 50), 30);
1180
+
1181
+ function onMouseMove(event) {
1182
+ // Move the circle to the position of the mouse:
1183
+ circle.position = event.point;
1184
+
1185
+ // Check whether the bounding box of the smaller circle
1186
+ // is contained within the bounding box of the larger item:
1187
+ if (largeCircle.bounds.contains(circle.bounds)) {
1188
+ // If it does, fill it with green:
1189
+ circle.fillColor = 'green';
1190
+ largeCircle.fillColor = 'green';
1191
+ } else {
1192
+ // If doesn't, fill it with red:
1193
+ circle.fillColor = 'red';
1194
+ largeCircle.fillColor = 'red';
1195
+ }
1196
+ }
1197
+ </script>
1198
+ <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
1199
+ </div>
1200
+
1201
+
1202
+ </div>
1203
+ </div>
1204
+ </div>
1205
+
1206
+
1207
+ <div id="intersects-rect" class="member">
1208
+ <div class="member-link">
1209
+ <a name="intersects-rect" href="#intersects-rect"><tt><b>intersects</b>(rect[, epsilon])</tt></a>
1210
+ </div>
1211
+ <div class="member-description hidden">
1212
+ <div class="member-text">
1213
+ <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&rsquo;s dimensions are increased before comparing.</p>
1214
+
1215
+
1216
+ <ul class="member-list">
1217
+ <h4>Parameters:</h4>
1218
+
1219
+ <li>
1220
+ <tt>rect:</tt>
1221
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1222
+ &mdash;&nbsp;the specified rectangle
1223
+
1224
+ </li>
1225
+
1226
+ <li>
1227
+ <tt>epsilon:</tt>
1228
+ <tt>Number</tt>
1229
+ &mdash;&nbsp;the epsilon against which to compare the rectangle&rsquo;s dimensions
1230
+ &mdash;&nbsp;optional, default: <tt>0</tt>
1231
+ </li>
1232
+
1233
+ </ul>
1234
+
1235
+
1236
+ <ul class="member-list">
1237
+ <h4>Returns:</h4>
1238
+
1239
+ <li>
1240
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle and the specified rectangle intersect each other, <tt>false</tt> otherwise
1241
+ </li>
1242
+
1243
+
1244
+ </ul>
1245
+
1246
+
1247
+
1248
+
1249
+ <h4>Example:<span class="description">Checking whether the bounding box of one item intersects with that of another item:</span></h4>
1250
+
1251
+ <div class="paperscript split">
1252
+
1253
+ <div class="buttons">
1254
+ <div class="button run">Run</div>
1255
+ </div>
1256
+
1257
+ <script type="text/paperscript" canvas="canvas-3">
1258
+ // All newly created paths will inherit these styles:
1259
+ project.currentStyle = {
1260
+ fillColor: 'green',
1261
+ strokeColor: 'black'
1262
+ };
1263
+
1264
+ // Create a circle shaped path at {x: 80, y: 50}
1265
+ // with a radius of 45.
1266
+ var largeCircle = new Path.Circle(new Point(80, 50), 45);
1267
+
1268
+ // Create a smaller circle shaped path in the same position
1269
+ // with a radius of 30.
1270
+ var circle = new Path.Circle(new Point(80, 50), 30);
1271
+
1272
+ function onMouseMove(event) {
1273
+ // Move the circle to the position of the mouse:
1274
+ circle.position = event.point;
1275
+
1276
+ // Check whether the bounding box of the two circle
1277
+ // shaped paths intersect:
1278
+ if (largeCircle.bounds.intersects(circle.bounds)) {
1279
+ // If it does, fill it with green:
1280
+ circle.fillColor = 'green';
1281
+ largeCircle.fillColor = 'green';
1282
+ } else {
1283
+ // If doesn't, fill it with red:
1284
+ circle.fillColor = 'red';
1285
+ largeCircle.fillColor = 'red';
1286
+ }
1287
+ }
1288
+ </script>
1289
+ <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
1290
+ </div>
1291
+
1292
+
1293
+ </div>
1294
+ </div>
1295
+ </div>
1296
+
1297
+
1298
+ <h3>Boolean Operations</h3>
1299
+
1300
+ <div id="intersect-rect" class="member">
1301
+ <div class="member-link">
1302
+ <a name="intersect-rect" href="#intersect-rect"><tt><b>intersect</b>(rect)</tt></a>
1303
+ </div>
1304
+ <div class="member-description hidden">
1305
+ <div class="member-text">
1306
+ <p>Returns a new rectangle representing the intersection of this rectangle with the specified rectangle.</p>
1307
+
1308
+
1309
+ <ul class="member-list">
1310
+ <h4>Parameters:</h4>
1311
+
1312
+ <li>
1313
+ <tt>rect:</tt>
1314
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1315
+ &mdash;&nbsp;the rectangle to be intersected with this rectangle
1316
+
1317
+ </li>
1318
+
1319
+ </ul>
1320
+
1321
+
1322
+ <ul class="member-list">
1323
+ <h4>Returns:</h4>
1324
+
1325
+ <li>
1326
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the largest rectangle contained in both the specified rectangle and in this rectangle
1327
+ </li>
1328
+
1329
+
1330
+ </ul>
1331
+
1332
+
1333
+
1334
+
1335
+ <h4>Example:<span class="description">Intersecting two rectangles and visualizing the result using rectangle shaped paths:</span></h4>
1336
+
1337
+ <div class="paperscript split">
1338
+
1339
+ <div class="buttons">
1340
+ <div class="button run">Run</div>
1341
+ </div>
1342
+
1343
+ <script type="text/paperscript" canvas="canvas-4">
1344
+ // Create two rectangles that overlap each other
1345
+ var size = new Size(50, 50);
1346
+ var rectangle1 = new Rectangle(new Point(25, 15), size);
1347
+ var rectangle2 = new Rectangle(new Point(50, 40), size);
1348
+
1349
+ // The rectangle that represents the intersection of the
1350
+ // two rectangles:
1351
+ var intersected = rectangle1.intersect(rectangle2);
1352
+
1353
+ // To visualize the intersecting of the rectangles, we will
1354
+ // create rectangle shaped paths using the Path.Rectangle
1355
+ // constructor.
1356
+
1357
+ // Have all newly created paths inherit a black stroke:
1358
+ project.currentStyle.strokeColor = 'black';
1359
+
1360
+ // Create two rectangle shaped paths using the abstract rectangles
1361
+ // we created before:
1362
+ new Path.Rectangle(rectangle1);
1363
+ new Path.Rectangle(rectangle2);
1364
+
1365
+ // Create a path that represents the intersected rectangle,
1366
+ // and fill it with red:
1367
+ var intersectionPath = new Path.Rectangle(intersected);
1368
+ intersectionPath.fillColor = 'red';
1369
+ </script>
1370
+ <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
1371
+ </div>
1372
+
1373
+
1374
+ </div>
1375
+ </div>
1376
+ </div>
1377
+
1378
+
1379
+ <div id="unite-rect" class="member">
1380
+ <div class="member-link">
1381
+ <a name="unite-rect" href="#unite-rect"><tt><b>unite</b>(rect)</tt></a>
1382
+ </div>
1383
+ <div class="member-description hidden">
1384
+ <div class="member-text">
1385
+ <p>Returns a new rectangle representing the union of this rectangle with the specified rectangle.</p>
1386
+
1387
+
1388
+ <ul class="member-list">
1389
+ <h4>Parameters:</h4>
1390
+
1391
+ <li>
1392
+ <tt>rect:</tt>
1393
+ <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1394
+ &mdash;&nbsp;the rectangle to be combined with this rectangle
1395
+
1396
+ </li>
1397
+
1398
+ </ul>
1399
+
1400
+
1401
+ <ul class="member-list">
1402
+ <h4>Returns:</h4>
1403
+
1404
+ <li>
1405
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the smallest rectangle containing both the specified rectangle and this rectangle
1406
+ </li>
1407
+
1408
+
1409
+ </ul>
1410
+
1411
+
1412
+
1413
+
1414
+
1415
+ </div>
1416
+ </div>
1417
+ </div>
1418
+
1419
+
1420
+ <div id="include-point" class="member">
1421
+ <div class="member-link">
1422
+ <a name="include-point" href="#include-point"><tt><b>include</b>(point)</tt></a>
1423
+ </div>
1424
+ <div class="member-description hidden">
1425
+ <div class="member-text">
1426
+ <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>
1427
+ <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>
1428
+
1429
+
1430
+ <ul class="member-list">
1431
+ <h4>Parameters:</h4>
1432
+
1433
+ <li>
1434
+ <tt>point:</tt>
1435
+ <a href="../classes/Point.html"><tt>Point</tt></a>
1436
+
1437
+
1438
+ </li>
1439
+
1440
+ </ul>
1441
+
1442
+
1443
+ <ul class="member-list">
1444
+ <h4>Returns:</h4>
1445
+
1446
+ <li>
1447
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the smallest rectangle that contains both the original rectangle and the specified point
1448
+ </li>
1449
+
1450
+
1451
+ </ul>
1452
+
1453
+
1454
+
1455
+
1456
+
1457
+ </div>
1458
+ </div>
1459
+ </div>
1460
+
1461
+
1462
+ <div id="expand-amount" class="member">
1463
+ <div class="member-link">
1464
+ <a name="expand-amount" href="#expand-amount"><tt><b>expand</b>(amount)</tt></a>
1465
+ </div>
1466
+ <div class="member-description hidden">
1467
+ <div class="member-text">
1468
+ <p>Returns a new rectangle expanded by the specified amount in horizontal and vertical directions.</p>
1469
+
1470
+
1471
+ <ul class="member-list">
1472
+ <h4>Parameters:</h4>
1473
+
1474
+ <li>
1475
+ <tt>amount:</tt>
1476
+ <tt>Number</tt>⟋<a href="../classes/Size.html"><tt>Size</tt></a>⟋<a href="../classes/Point.html"><tt>Point</tt></a>
1477
+ &mdash;&nbsp;the amount to expand the rectangle in both directions
1478
+
1479
+ </li>
1480
+
1481
+ </ul>
1482
+
1483
+
1484
+ <ul class="member-list">
1485
+ <h4>Returns:</h4>
1486
+
1487
+ <li>
1488
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the expanded rectangle
1489
+ </li>
1490
+
1491
+
1492
+ </ul>
1493
+
1494
+
1495
+
1496
+
1497
+
1498
+ </div>
1499
+ </div>
1500
+ </div>
1501
+
1502
+
1503
+ <div id="expand-hor-ver" class="member">
1504
+ <div class="member-link">
1505
+ <a name="expand-hor-ver" href="#expand-hor-ver"><tt><b>expand</b>(hor, ver)</tt></a>
1506
+ </div>
1507
+ <div class="member-description hidden">
1508
+ <div class="member-text">
1509
+ <p>Returns a new rectangle expanded by the specified amounts in horizontal and vertical directions.</p>
1510
+
1511
+
1512
+ <ul class="member-list">
1513
+ <h4>Parameters:</h4>
1514
+
1515
+ <li>
1516
+ <tt>hor:</tt>
1517
+ <tt>Number</tt>
1518
+ &mdash;&nbsp;the amount to expand the rectangle in horizontal direction
1519
+
1520
+ </li>
1521
+
1522
+ <li>
1523
+ <tt>ver:</tt>
1524
+ <tt>Number</tt>
1525
+ &mdash;&nbsp;the amount to expand the rectangle in vertical direction
1526
+
1527
+ </li>
1528
+
1529
+ </ul>
1530
+
1531
+
1532
+ <ul class="member-list">
1533
+ <h4>Returns:</h4>
1534
+
1535
+ <li>
1536
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the expanded rectangle
1537
+ </li>
1538
+
1539
+
1540
+ </ul>
1541
+
1542
+
1543
+
1544
+
1545
+
1546
+ </div>
1547
+ </div>
1548
+ </div>
1549
+
1550
+
1551
+ <div id="scale-amount" class="member">
1552
+ <div class="member-link">
1553
+ <a name="scale-amount" href="#scale-amount"><tt><b>scale</b>(amount)</tt></a>
1554
+ </div>
1555
+ <div class="member-description hidden">
1556
+ <div class="member-text">
1557
+ <p>Returns a new rectangle scaled by the specified amount from its center.</p>
1558
+
1559
+
1560
+ <ul class="member-list">
1561
+ <h4>Parameters:</h4>
1562
+
1563
+ <li>
1564
+ <tt>amount:</tt>
1565
+ <tt>Number</tt>
1566
+
1567
+
1568
+ </li>
1569
+
1570
+ </ul>
1571
+
1572
+
1573
+ <ul class="member-list">
1574
+ <h4>Returns:</h4>
1575
+
1576
+ <li>
1577
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the scaled rectangle
1578
+ </li>
1579
+
1580
+
1581
+ </ul>
1582
+
1583
+
1584
+
1585
+
1586
+
1587
+ </div>
1588
+ </div>
1589
+ </div>
1590
+
1591
+
1592
+ <div id="scale-hor-ver" class="member">
1593
+ <div class="member-link">
1594
+ <a name="scale-hor-ver" href="#scale-hor-ver"><tt><b>scale</b>(hor, ver)</tt></a>
1595
+ </div>
1596
+ <div class="member-description hidden">
1597
+ <div class="member-text">
1598
+ <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>
1599
+
1600
+
1601
+ <ul class="member-list">
1602
+ <h4>Parameters:</h4>
1603
+
1604
+ <li>
1605
+ <tt>hor:</tt>
1606
+ <tt>Number</tt>
1607
+
1608
+
1609
+ </li>
1610
+
1611
+ <li>
1612
+ <tt>ver:</tt>
1613
+ <tt>Number</tt>
1614
+
1615
+
1616
+ </li>
1617
+
1618
+ </ul>
1619
+
1620
+
1621
+ <ul class="member-list">
1622
+ <h4>Returns:</h4>
1623
+
1624
+ <li>
1625
+ <tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the scaled rectangle
1626
+ </li>
1627
+
1628
+
1629
+ </ul>
1630
+
1631
+
1632
+
1633
+
1634
+
1635
+ </div>
1636
+ </div>
1637
+ </div>
1638
+
1639
+
1640
+
1641
+ </div>
1642
+
1643
+
1644
+
1645
+
1646
+ <!-- =========================== copyright notice ========================== -->
1647
+ <p class="footer">
1648
+ Paper.js v0.12.17<br>
1649
+ Copyright &#169; 2011—2022 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
1650
+ <div class="content-end"></div>
1651
+
1652
+
1653
+ </article>
1654
+ </body>