paper 0.12.18 → 0.12.20

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 (231) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +5 -14
  3. package/dist/docs/assets/js/paper.js +94 -54
  4. package/dist/docs/classes/Color.html +2 -2
  5. package/dist/docs/classes/CompoundPath.html +2 -2
  6. package/dist/docs/classes/Curve.html +2 -2
  7. package/dist/docs/classes/CurveLocation.html +2 -2
  8. package/dist/docs/classes/Event.html +2 -2
  9. package/dist/docs/classes/Gradient.html +2 -2
  10. package/dist/docs/classes/GradientStop.html +2 -2
  11. package/dist/docs/classes/Group.html +2 -2
  12. package/dist/docs/classes/HitResult.html +2 -2
  13. package/dist/docs/classes/Item.html +2 -2
  14. package/dist/docs/classes/Key.html +2 -2
  15. package/dist/docs/classes/KeyEvent.html +2 -2
  16. package/dist/docs/classes/Layer.html +2 -2
  17. package/dist/docs/classes/Matrix.html +2 -2
  18. package/dist/docs/classes/MouseEvent.html +2 -2
  19. package/dist/docs/classes/PaperScope.html +2 -2
  20. package/dist/docs/classes/PaperScript.html +2 -2
  21. package/dist/docs/classes/Path.html +2 -2
  22. package/dist/docs/classes/PathItem.html +2 -2
  23. package/dist/docs/classes/Point.html +2 -2
  24. package/dist/docs/classes/PointText.html +2 -2
  25. package/dist/docs/classes/Project.html +2 -2
  26. package/dist/docs/classes/Raster.html +2 -2
  27. package/dist/docs/classes/Rectangle.html +2 -2
  28. package/dist/docs/classes/Segment.html +2 -2
  29. package/dist/docs/classes/Shape.html +2 -2
  30. package/dist/docs/classes/Size.html +2 -2
  31. package/dist/docs/classes/Style.html +2 -2
  32. package/dist/docs/classes/SymbolDefinition.html +2 -2
  33. package/dist/docs/classes/SymbolItem.html +2 -2
  34. package/dist/docs/classes/TextItem.html +2 -2
  35. package/dist/docs/classes/Tool.html +2 -2
  36. package/dist/docs/classes/ToolEvent.html +2 -2
  37. package/dist/docs/classes/Tween.html +2 -2
  38. package/dist/docs/classes/View.html +2 -2
  39. package/dist/docs/classes/global.html +2 -2
  40. package/dist/docs/classes/index.html +2 -2
  41. package/dist/docs/index.html +1 -1
  42. package/dist/node/canvas.js +9 -7
  43. package/dist/node/self.js +9 -1
  44. package/dist/paper-core.js +93 -53
  45. package/dist/paper-core.min.js +3 -3
  46. package/dist/paper-full.js +94 -54
  47. package/dist/paper-full.min.js +3 -3
  48. package/dist/paper.d.ts +2 -2
  49. package/package.json +11 -7
  50. package/dist/paperjs/LICENSE.txt +0 -23
  51. package/dist/paperjs/dist/node/canvas.js +0 -66
  52. package/dist/paperjs/dist/node/extend.js +0 -156
  53. package/dist/paperjs/dist/node/self.js +0 -58
  54. package/dist/paperjs/dist/node/xml.js +0 -40
  55. package/dist/paperjs/dist/paper-core.d.ts +0 -1
  56. package/dist/paperjs/dist/paper-core.js +0 -15703
  57. package/dist/paperjs/dist/paper-core.min.js +0 -32
  58. package/dist/paperjs/dist/paper-full.js +0 -17472
  59. package/dist/paperjs/dist/paper-full.min.js +0 -32
  60. package/dist/paperjs/dist/paper.d.ts +0 -7394
  61. package/dist/paperjs/docs/assets/css/docs.css +0 -414
  62. package/dist/paperjs/docs/assets/js/codemirror.js +0 -4
  63. package/dist/paperjs/docs/assets/js/docs.js +0 -493
  64. package/dist/paperjs/docs/assets/js/jquery.js +0 -6
  65. package/dist/paperjs/docs/assets/js/paper.js +0 -17472
  66. package/dist/paperjs/docs/classes/Color.html +0 -2188
  67. package/dist/paperjs/docs/classes/CompoundPath.html +0 -8877
  68. package/dist/paperjs/docs/classes/Curve.html +0 -2323
  69. package/dist/paperjs/docs/classes/CurveLocation.html +0 -672
  70. package/dist/paperjs/docs/classes/Event.html +0 -176
  71. package/dist/paperjs/docs/classes/Gradient.html +0 -240
  72. package/dist/paperjs/docs/classes/GradientStop.html +0 -273
  73. package/dist/paperjs/docs/classes/Group.html +0 -6864
  74. package/dist/paperjs/docs/classes/HitResult.html +0 -239
  75. package/dist/paperjs/docs/classes/Item.html +0 -6628
  76. package/dist/paperjs/docs/classes/Key.html +0 -139
  77. package/dist/paperjs/docs/classes/KeyEvent.html +0 -308
  78. package/dist/paperjs/docs/classes/Layer.html +0 -6850
  79. package/dist/paperjs/docs/classes/Matrix.html +0 -1744
  80. package/dist/paperjs/docs/classes/MouseEvent.html +0 -355
  81. package/dist/paperjs/docs/classes/PaperScope.html +0 -459
  82. package/dist/paperjs/docs/classes/PaperScript.html +0 -198
  83. package/dist/paperjs/docs/classes/Path.html +0 -11775
  84. package/dist/paperjs/docs/classes/PathItem.html +0 -8639
  85. package/dist/paperjs/docs/classes/Point.html +0 -2699
  86. package/dist/paperjs/docs/classes/PointText.html +0 -7029
  87. package/dist/paperjs/docs/classes/Project.html +0 -1305
  88. package/dist/paperjs/docs/classes/Raster.html +0 -7843
  89. package/dist/paperjs/docs/classes/Rectangle.html +0 -1654
  90. package/dist/paperjs/docs/classes/Segment.html +0 -939
  91. package/dist/paperjs/docs/classes/Shape.html +0 -7363
  92. package/dist/paperjs/docs/classes/Size.html +0 -1825
  93. package/dist/paperjs/docs/classes/Style.html +0 -919
  94. package/dist/paperjs/docs/classes/SymbolDefinition.html +0 -311
  95. package/dist/paperjs/docs/classes/SymbolItem.html +0 -6755
  96. package/dist/paperjs/docs/classes/TextItem.html +0 -6869
  97. package/dist/paperjs/docs/classes/Tool.html +0 -761
  98. package/dist/paperjs/docs/classes/ToolEvent.html +0 -446
  99. package/dist/paperjs/docs/classes/Tween.html +0 -374
  100. package/dist/paperjs/docs/classes/View.html +0 -1772
  101. package/dist/paperjs/docs/classes/global.html +0 -425
  102. package/dist/paperjs/docs/classes/index.html +0 -88
  103. package/dist/paperjs/docs/index.html +0 -11
  104. package/dist/paperjs/examples/Animated/AnimatedStar.html +0 -53
  105. package/dist/paperjs/examples/Animated/BooleanOperations.html +0 -115
  106. package/dist/paperjs/examples/Animated/CandyCrash.html +0 -151
  107. package/dist/paperjs/examples/Animated/Extruded.html +0 -50
  108. package/dist/paperjs/examples/Animated/Lines.html +0 -53
  109. package/dist/paperjs/examples/Animated/Smoothing.html +0 -70
  110. package/dist/paperjs/examples/Animated/Space.html +0 -86
  111. package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +0 -79
  112. package/dist/paperjs/examples/Games/Paperoids.html +0 -569
  113. package/dist/paperjs/examples/JSON/Circle Testing.html +0 -34
  114. package/dist/paperjs/examples/JSON/Compound Path.html +0 -25
  115. package/dist/paperjs/examples/JSON/Empty Path Testing.html +0 -31
  116. package/dist/paperjs/examples/JSON/Gradients.html +0 -34
  117. package/dist/paperjs/examples/JSON/Group Transform.html +0 -28
  118. package/dist/paperjs/examples/JSON/Line Testing.html +0 -44
  119. package/dist/paperjs/examples/JSON/Random Path Testing.html +0 -42
  120. package/dist/paperjs/examples/JSON/Raster.html +0 -29
  121. package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +0 -56
  122. package/dist/paperjs/examples/JSON/Rotated Primitives.html +0 -55
  123. package/dist/paperjs/examples/JSON/Selection.html +0 -43
  124. package/dist/paperjs/examples/JSON/Shapes.html +0 -54
  125. package/dist/paperjs/examples/JSON/Symbols.html +0 -30
  126. package/dist/paperjs/examples/JSON/Text Testing.html +0 -38
  127. package/dist/paperjs/examples/JSON/Tiger.html +0 -19
  128. package/dist/paperjs/examples/JSON/Transform Test 1.html +0 -32
  129. package/dist/paperjs/examples/JSON/Transform Test 2.html +0 -30
  130. package/dist/paperjs/examples/Node.js/AnimatedStar.js +0 -52
  131. package/dist/paperjs/examples/Node.js/BooleanOperations.js +0 -36
  132. package/dist/paperjs/examples/Node.js/JSONtoPDF.js +0 -20
  133. package/dist/paperjs/examples/Node.js/Raster.js +0 -32
  134. package/dist/paperjs/examples/Node.js/RasterRemote.js +0 -33
  135. package/dist/paperjs/examples/Node.js/SvgExport.js +0 -52
  136. package/dist/paperjs/examples/Node.js/SvgImport.js +0 -23
  137. package/dist/paperjs/examples/Node.js/Tadpoles.js +0 -16
  138. package/dist/paperjs/examples/Node.js/Tadpoles.pjs +0 -278
  139. package/dist/paperjs/examples/Node.js/in.json +0 -1
  140. package/dist/paperjs/examples/Node.js/in.svg +0 -16
  141. package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +0 -115
  142. package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +0 -103
  143. package/dist/paperjs/examples/Paperjs.org/Chain.html +0 -54
  144. package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +0 -72
  145. package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +0 -122
  146. package/dist/paperjs/examples/Paperjs.org/HitTesting.html +0 -103
  147. package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +0 -777
  148. package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +0 -132
  149. package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +0 -202
  150. package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +0 -76
  151. package/dist/paperjs/examples/Paperjs.org/Qbertify.html +0 -146
  152. package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +0 -80
  153. package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +0 -41
  154. package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +0 -140
  155. package/dist/paperjs/examples/Paperjs.org/Simplify.html +0 -63
  156. package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +0 -120
  157. package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +0 -283
  158. package/dist/paperjs/examples/Paperjs.org/Voronoi.html +0 -134
  159. package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +0 -96
  160. package/dist/paperjs/examples/Rasters/Raster.html +0 -34
  161. package/dist/paperjs/examples/Rasters/RotationRaster.html +0 -44
  162. package/dist/paperjs/examples/Rasters/Smoothing.html +0 -36
  163. package/dist/paperjs/examples/SVG Export/Circle Testing.html +0 -32
  164. package/dist/paperjs/examples/SVG Export/Clipping.html +0 -17
  165. package/dist/paperjs/examples/SVG Export/Compound Path.html +0 -22
  166. package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +0 -28
  167. package/dist/paperjs/examples/SVG Export/Gradients.html +0 -52
  168. package/dist/paperjs/examples/SVG Export/Group Transform.html +0 -25
  169. package/dist/paperjs/examples/SVG Export/Line Testing.html +0 -41
  170. package/dist/paperjs/examples/SVG Export/Random Path Testing.html +0 -39
  171. package/dist/paperjs/examples/SVG Export/Raster.html +0 -21
  172. package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +0 -53
  173. package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +0 -80
  174. package/dist/paperjs/examples/SVG Export/Shapes.html +0 -58
  175. package/dist/paperjs/examples/SVG Export/Symbols.html +0 -27
  176. package/dist/paperjs/examples/SVG Export/Text Testing.html +0 -45
  177. package/dist/paperjs/examples/SVG Export/Tiger.html +0 -23
  178. package/dist/paperjs/examples/SVG Export/Transform Test 1.html +0 -29
  179. package/dist/paperjs/examples/SVG Export/Transform Test 2.html +0 -27
  180. package/dist/paperjs/examples/SVG Import/Arcs.html +0 -78
  181. package/dist/paperjs/examples/SVG Import/Butterfly.html +0 -223
  182. package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +0 -26
  183. package/dist/paperjs/examples/SVG Import/Clipping.html +0 -100
  184. package/dist/paperjs/examples/SVG Import/From File.html +0 -30
  185. package/dist/paperjs/examples/SVG Import/Gradient.html +0 -138
  186. package/dist/paperjs/examples/SVG Import/Gradients.html +0 -30
  187. package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +0 -52
  188. package/dist/paperjs/examples/SVG Import/Inkscape.html +0 -88
  189. package/dist/paperjs/examples/SVG Import/Line Testing.html +0 -24
  190. package/dist/paperjs/examples/SVG Import/MoreGradients.html +0 -107
  191. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +0 -42
  192. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +0 -33
  193. package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +0 -78
  194. package/dist/paperjs/examples/SVG Import/Polybezier.html +0 -43
  195. package/dist/paperjs/examples/SVG Import/Rect Testing.html +0 -25
  196. package/dist/paperjs/examples/SVG Import/Symbols.html +0 -24
  197. package/dist/paperjs/examples/SVG Import/Testing.html +0 -40
  198. package/dist/paperjs/examples/SVG Import/Text Testing.html +0 -19
  199. package/dist/paperjs/examples/SVG Import/Tiger.html +0 -742
  200. package/dist/paperjs/examples/SVG Import/Transform Testing.html +0 -22
  201. package/dist/paperjs/examples/SVG Import/Viewbox.html +0 -38
  202. package/dist/paperjs/examples/Scripts/Arcs.html +0 -39
  203. package/dist/paperjs/examples/Scripts/BlendModes.html +0 -77
  204. package/dist/paperjs/examples/Scripts/BooleanOperations.html +0 -937
  205. package/dist/paperjs/examples/Scripts/CompoundPath.html +0 -19
  206. package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +0 -61
  207. package/dist/paperjs/examples/Scripts/HslColor.html +0 -53
  208. package/dist/paperjs/examples/Scripts/PathStructure.html +0 -82
  209. package/dist/paperjs/examples/Scripts/PathTangents.html +0 -73
  210. package/dist/paperjs/examples/Scripts/Resize.html +0 -42
  211. package/dist/paperjs/examples/Scripts/RoundRectangle.html +0 -28
  212. package/dist/paperjs/examples/Scripts/Shapes.html +0 -54
  213. package/dist/paperjs/examples/Scripts/StrokeBounds.html +0 -101
  214. package/dist/paperjs/examples/Scripts/StrokeScaling.html +0 -65
  215. package/dist/paperjs/examples/Tools/BezierTool.html +0 -90
  216. package/dist/paperjs/examples/Tools/Circles.html +0 -28
  217. package/dist/paperjs/examples/Tools/Clouds.html +0 -35
  218. package/dist/paperjs/examples/Tools/DrippingBrush.html +0 -73
  219. package/dist/paperjs/examples/Tools/FancyBrush.html +0 -82
  220. package/dist/paperjs/examples/Tools/Grid.html +0 -44
  221. package/dist/paperjs/examples/Tools/MultiLines.html +0 -44
  222. package/dist/paperjs/examples/Tools/MultipleTools.html +0 -44
  223. package/dist/paperjs/examples/Tools/PathEditing.html +0 -95
  224. package/dist/paperjs/examples/Tools/SquareRounded.html +0 -76
  225. package/dist/paperjs/examples/Tools/Stars.html +0 -38
  226. package/dist/paperjs/examples/Tools/Vektor.html +0 -200
  227. package/dist/paperjs/examples/Tools/Wave.html +0 -50
  228. package/dist/paperjs/examples/Tools/WormFarm.html +0 -88
  229. package/dist/paperjs/examples/Worker/Main.html +0 -53
  230. package/dist/paperjs/examples/Worker/Worker.js +0 -14
  231. package/dist/paperjs/examples/css/style.css +0 -12
package/dist/paperjs/docs/classes/Tool.html DELETED
@@ -1,761 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Tool</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>Tool</h1>
17
-
18
- <p>The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global <code>tool</code> variable. All its properties are also available in the paper scope.</p>
19
- <p>The global <code>tool</code> variable only exists in scripts that contain mouse handler functions (<a href="../classes/Tool.html#onmousemove"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown"><tt>onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup"><tt>onMouseUp</tt></a>) or a keyboard handler function (<a href="../classes/Tool.html#onkeydown"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>onKeyUp</tt></a>).</p>
20
- <h4>Example:</h4>
21
-
22
- <div class="paperscript split">
23
-
24
- <div class="buttons">
25
- <div class="button run">Run</div>
26
- </div>
27
-
28
- <script type="text/paperscript" canvas="canvas-0">
29
- var path;
30
-
31
- // Only execute onMouseDrag when the mouse
32
- // has moved at least 10 points:
33
- tool.minDistance = 10;
34
-
35
- tool.onMouseDown = function(event) {
36
- // Create a new path every time the mouse is clicked
37
- path = new Path();
38
- path.add(event.point);
39
- path.strokeColor = 'black';
40
- }
41
-
42
- tool.onMouseDrag = function(event) {
43
- // Add a point to the path every time the mouse is dragged
44
- path.add(event.point);
45
- }
46
- </script>
47
- <div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
48
- </div>
49
-
50
-
51
- </div>
52
-
53
-
54
-
55
-
56
-
57
- <!-- ================================ properties =========================== -->
58
- <div class="reference-members">
59
- <h2>Properties</h2>
60
-
61
-
62
- <div id="mindistance" class="member">
63
- <div class="member-link">
64
- <a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
65
- </div>
66
- <div class="member-description hidden">
67
-
68
- <div class="member-text">
69
- <p>The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
70
-
71
-
72
-
73
- <ul class="member-list">
74
- <h4>Type:</h4>
75
- <li>
76
- <tt>Number</tt>
77
- </li>
78
- </ul>
79
-
80
-
81
-
82
- </div>
83
-
84
- </div>
85
- </div>
86
-
87
-
88
- <div id="maxdistance" class="member">
89
- <div class="member-link">
90
- <a name="maxdistance" href="#maxdistance"><tt><b>maxDistance</b></tt></a>
91
- </div>
92
- <div class="member-description hidden">
93
-
94
- <div class="member-text">
95
- <p>The maximum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
96
-
97
-
98
-
99
- <ul class="member-list">
100
- <h4>Type:</h4>
101
- <li>
102
- <tt>Number</tt>
103
- </li>
104
- </ul>
105
-
106
-
107
-
108
- </div>
109
-
110
- </div>
111
- </div>
112
-
113
-
114
- <div id="fixeddistance" class="member">
115
- <div class="member-link">
116
- <a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
117
- </div>
118
- <div class="member-description hidden">
119
-
120
- <div class="member-text">
121
-
122
-
123
-
124
-
125
- <ul class="member-list">
126
- <h4>Type:</h4>
127
- <li>
128
- <tt>Number</tt>
129
- </li>
130
- </ul>
131
-
132
-
133
-
134
- </div>
135
-
136
- </div>
137
- </div>
138
-
139
-
140
- <h3>Mouse Event Handlers</h3>
141
-
142
- <div id="onmousedown" class="member">
143
- <div class="member-link">
144
- <a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
145
- </div>
146
- <div class="member-description hidden">
147
-
148
- <div class="member-text">
149
- <p>The function to be called when the mouse button is pushed down. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
150
-
151
-
152
-
153
- <ul class="member-list">
154
- <h4>Type:</h4>
155
- <li>
156
- <tt>Function</tt>⟋<tt>null</tt>
157
- </li>
158
- </ul>
159
-
160
-
161
- <h4>Example:<span class="description">Creating circle shaped paths where the user presses the mouse button:</span></h4>
162
-
163
- <div class="paperscript split">
164
-
165
- <div class="buttons">
166
- <div class="button run">Run</div>
167
- </div>
168
-
169
- <script type="text/paperscript" canvas="canvas-1">
170
- tool.onMouseDown = function(event) {
171
- // Create a new circle shaped path with a radius of 10
172
- // at the position of the mouse (event.point):
173
- var path = new Path.Circle({
174
- center: event.point,
175
- radius: 10,
176
- fillColor: 'black'
177
- });
178
- }
179
- </script>
180
- <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
181
- </div>
182
-
183
-
184
- </div>
185
-
186
- </div>
187
- </div>
188
-
189
-
190
- <div id="onmousedrag" class="member">
191
- <div class="member-link">
192
- <a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
193
- </div>
194
- <div class="member-description hidden">
195
-
196
- <div class="member-text">
197
- <p>The function to be called when the mouse position changes while the mouse is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
198
-
199
-
200
-
201
- <ul class="member-list">
202
- <h4>Type:</h4>
203
- <li>
204
- <tt>Function</tt>⟋<tt>null</tt>
205
- </li>
206
- </ul>
207
-
208
-
209
- <h4>Example:<span class="description">Draw a line by adding a segment to a path on every mouse drag event:</span></h4>
210
-
211
- <div class="paperscript split">
212
-
213
- <div class="buttons">
214
- <div class="button run">Run</div>
215
- </div>
216
-
217
- <script type="text/paperscript" canvas="canvas-2">
218
- // Create an empty path:
219
- var path = new Path({
220
- strokeColor: 'black'
221
- });
222
-
223
- tool.onMouseDrag = function(event) {
224
- // Add a segment to the path at the position of the mouse:
225
- path.add(event.point);
226
- }
227
- </script>
228
- <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
229
- </div>
230
-
231
-
232
- </div>
233
-
234
- </div>
235
- </div>
236
-
237
-
238
- <div id="onmousemove" class="member">
239
- <div class="member-link">
240
- <a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
241
- </div>
242
- <div class="member-description hidden">
243
-
244
- <div class="member-text">
245
- <p>The function to be called the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
246
-
247
-
248
-
249
- <ul class="member-list">
250
- <h4>Type:</h4>
251
- <li>
252
- <tt>Function</tt>⟋<tt>null</tt>
253
- </li>
254
- </ul>
255
-
256
-
257
- <h4>Example:<span class="description">Moving a path to the position of the mouse:</span></h4>
258
-
259
- <div class="paperscript split">
260
-
261
- <div class="buttons">
262
- <div class="button run">Run</div>
263
- </div>
264
-
265
- <script type="text/paperscript" canvas="canvas-3">
266
- // Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
267
- var path = new Path.Circle({
268
- center: [0, 0],
269
- radius: 10,
270
- fillColor: 'black'
271
- });
272
-
273
- tool.onMouseMove = function(event) {
274
- // Whenever the user moves the mouse, move the path
275
- // to that position:
276
- path.position = event.point;
277
- }
278
- </script>
279
- <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
280
- </div>
281
-
282
-
283
- </div>
284
-
285
- </div>
286
- </div>
287
-
288
-
289
- <div id="onmouseup" class="member">
290
- <div class="member-link">
291
- <a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
292
- </div>
293
- <div class="member-description hidden">
294
-
295
- <div class="member-text">
296
- <p>The function to be called when the mouse button is released. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
297
-
298
-
299
-
300
- <ul class="member-list">
301
- <h4>Type:</h4>
302
- <li>
303
- <tt>Function</tt>⟋<tt>null</tt>
304
- </li>
305
- </ul>
306
-
307
-
308
- <h4>Example:<span class="description">Creating circle shaped paths where the user releases the mouse:</span></h4>
309
-
310
- <div class="paperscript split">
311
-
312
- <div class="buttons">
313
- <div class="button run">Run</div>
314
- </div>
315
-
316
- <script type="text/paperscript" canvas="canvas-4">
317
- tool.onMouseUp = function(event) {
318
- // Create a new circle shaped path with a radius of 10
319
- // at the position of the mouse (event.point):
320
- var path = new Path.Circle({
321
- center: event.point,
322
- radius: 10,
323
- fillColor: 'black'
324
- });
325
- }
326
- </script>
327
- <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
328
- </div>
329
-
330
-
331
- </div>
332
-
333
- </div>
334
- </div>
335
-
336
-
337
- <h3>Keyboard Event Handlers</h3>
338
-
339
- <div id="onkeydown" class="member">
340
- <div class="member-link">
341
- <a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
342
- </div>
343
- <div class="member-description hidden">
344
-
345
- <div class="member-text">
346
- <p>The function to be called when the user presses a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
347
- <p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
348
-
349
-
350
-
351
- <ul class="member-list">
352
- <h4>Type:</h4>
353
- <li>
354
- <tt>Function</tt>⟋<tt>null</tt>
355
- </li>
356
- </ul>
357
-
358
-
359
- <h4>Example:<span class="description">Scaling a path whenever the user presses the space bar:</span></h4>
360
-
361
- <div class="paperscript split">
362
-
363
- <div class="buttons">
364
- <div class="button run">Run</div>
365
- </div>
366
-
367
- <script type="text/paperscript" canvas="canvas-5">
368
- // Create a circle shaped path:
369
- var path = new Path.Circle({
370
- center: new Point(50, 50),
371
- radius: 30,
372
- fillColor: 'red'
373
- });
374
-
375
- tool.onKeyDown = function(event) {
376
- if (event.key == 'space') {
377
- // Scale the path by 110%:
378
- path.scale(1.1);
379
-
380
- // Prevent the key event from bubbling
381
- return false;
382
- }
383
- }
384
- </script>
385
- <div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
386
- </div>
387
-
388
-
389
- </div>
390
-
391
- </div>
392
- </div>
393
-
394
-
395
- <div id="onkeyup" class="member">
396
- <div class="member-link">
397
- <a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
398
- </div>
399
- <div class="member-description hidden">
400
-
401
- <div class="member-text">
402
- <p>The function to be called when the user releases a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
403
- <p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
404
-
405
-
406
-
407
- <ul class="member-list">
408
- <h4>Type:</h4>
409
- <li>
410
- <tt>Function</tt>⟋<tt>null</tt>
411
- </li>
412
- </ul>
413
-
414
-
415
- <h4>Example:</h4>
416
-
417
-
418
- <pre><code>tool.onKeyUp = function(event) {
419
- if (event.key == 'space') {
420
- console.log('The spacebar was released!');
421
- }
422
- }</code></pre>
423
-
424
- </div>
425
-
426
- </div>
427
- </div>
428
-
429
- </div>
430
-
431
-
432
-
433
-
434
-
435
- <!-- ============================== methods ================================ -->
436
- <div class="reference-members">
437
- <h2>Methods</h2>
438
-
439
-
440
- <div id="activate" class="member">
441
- <div class="member-link">
442
- <a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
443
- </div>
444
- <div class="member-description hidden">
445
- <div class="member-text">
446
- <p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will point to it and it will be the one that receives tool events.</p>
447
-
448
-
449
-
450
-
451
-
452
-
453
-
454
- </div>
455
- </div>
456
- </div>
457
-
458
-
459
- <div id="remove" class="member">
460
- <div class="member-link">
461
- <a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
462
- </div>
463
- <div class="member-description hidden">
464
- <div class="member-text">
465
- <p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
- </div>
474
- </div>
475
- </div>
476
-
477
-
478
- <h3>Event Handling</h3>
479
-
480
- <div id="on-type-function" class="member">
481
- <div class="member-link">
482
- <a name="on-type-function" href="#on-type-function"><tt><b>on</b>(type, function)</tt></a>
483
- </div>
484
- <div class="member-description hidden">
485
- <div class="member-text">
486
- <p>Attach an event handler to the tool.</p>
487
-
488
-
489
- <ul class="member-list">
490
- <h4>Parameters:</h4>
491
-
492
- <li>
493
- <tt>type:</tt>
494
- <tt>String</tt>
495
- &mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
496
-
497
- </li>
498
-
499
- <li>
500
- <tt>function:</tt>
501
- <tt>Function</tt>
502
- &mdash;&nbsp;the function to be called when the event occurs, receiving a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object as its sole argument
503
-
504
- </li>
505
-
506
- </ul>
507
-
508
-
509
- <ul class="member-list">
510
- <h4>Returns:</h4>
511
-
512
- <li>
513
- <tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
514
- </li>
515
-
516
-
517
- </ul>
518
-
519
-
520
-
521
-
522
-
523
- </div>
524
- </div>
525
- </div>
526
-
527
-
528
- <div id="on-param" class="member">
529
- <div class="member-link">
530
- <a name="on-param" href="#on-param"><tt><b>on</b>(param)</tt></a>
531
- </div>
532
- <div class="member-description hidden">
533
- <div class="member-text">
534
- <p>Attach one or more event handlers to the tool.</p>
535
-
536
-
537
- <ul class="member-list">
538
- <h4>Parameters:</h4>
539
-
540
- <li>
541
- <tt>param:</tt>
542
- <tt>Object</tt>
543
- &mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
544
-
545
- </li>
546
-
547
- </ul>
548
-
549
-
550
- <ul class="member-list">
551
- <h4>Returns:</h4>
552
-
553
- <li>
554
- <tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
555
- </li>
556
-
557
-
558
- </ul>
559
-
560
-
561
-
562
-
563
-
564
- </div>
565
- </div>
566
- </div>
567
-
568
-
569
- <div id="off-type-function" class="member">
570
- <div class="member-link">
571
- <a name="off-type-function" href="#off-type-function"><tt><b>off</b>(type, function)</tt></a>
572
- </div>
573
- <div class="member-description hidden">
574
- <div class="member-text">
575
- <p>Detach an event handler from the tool.</p>
576
-
577
-
578
- <ul class="member-list">
579
- <h4>Parameters:</h4>
580
-
581
- <li>
582
- <tt>type:</tt>
583
- <tt>String</tt>
584
- &mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
585
-
586
- </li>
587
-
588
- <li>
589
- <tt>function:</tt>
590
- <tt>Function</tt>
591
- &mdash;&nbsp;the function to be detached
592
-
593
- </li>
594
-
595
- </ul>
596
-
597
-
598
- <ul class="member-list">
599
- <h4>Returns:</h4>
600
-
601
- <li>
602
- <tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
603
- </li>
604
-
605
-
606
- </ul>
607
-
608
-
609
-
610
-
611
-
612
- </div>
613
- </div>
614
- </div>
615
-
616
-
617
- <div id="off-param" class="member">
618
- <div class="member-link">
619
- <a name="off-param" href="#off-param"><tt><b>off</b>(param)</tt></a>
620
- </div>
621
- <div class="member-description hidden">
622
- <div class="member-text">
623
- <p>Detach one or more event handlers from the tool.</p>
624
-
625
-
626
- <ul class="member-list">
627
- <h4>Parameters:</h4>
628
-
629
- <li>
630
- <tt>param:</tt>
631
- <tt>Object</tt>
632
- &mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
633
-
634
- </li>
635
-
636
- </ul>
637
-
638
-
639
- <ul class="member-list">
640
- <h4>Returns:</h4>
641
-
642
- <li>
643
- <tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
644
- </li>
645
-
646
-
647
- </ul>
648
-
649
-
650
-
651
-
652
-
653
- </div>
654
- </div>
655
- </div>
656
-
657
-
658
- <div id="emit-type-event" class="member">
659
- <div class="member-link">
660
- <a name="emit-type-event" href="#emit-type-event"><tt><b>emit</b>(type, event)</tt></a>
661
- </div>
662
- <div class="member-description hidden">
663
- <div class="member-text">
664
- <p>Emit an event on the tool.</p>
665
-
666
-
667
- <ul class="member-list">
668
- <h4>Parameters:</h4>
669
-
670
- <li>
671
- <tt>type:</tt>
672
- <tt>String</tt>
673
- &mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
674
-
675
- </li>
676
-
677
- <li>
678
- <tt>event:</tt>
679
- <tt>Object</tt>
680
- &mdash;&nbsp;an object literal containing properties describing the event
681
-
682
- </li>
683
-
684
- </ul>
685
-
686
-
687
- <ul class="member-list">
688
- <h4>Returns:</h4>
689
-
690
- <li>
691
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the event had listeners, <tt>false</tt> otherwise
692
- </li>
693
-
694
-
695
- </ul>
696
-
697
-
698
-
699
-
700
-
701
- </div>
702
- </div>
703
- </div>
704
-
705
-
706
- <div id="responds-type" class="member">
707
- <div class="member-link">
708
- <a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
709
- </div>
710
- <div class="member-description hidden">
711
- <div class="member-text">
712
- <p>Check if the tool has one or more event handlers of the specified type.</p>
713
-
714
-
715
- <ul class="member-list">
716
- <h4>Parameters:</h4>
717
-
718
- <li>
719
- <tt>type:</tt>
720
- <tt>String</tt>
721
- &mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
722
-
723
- </li>
724
-
725
- </ul>
726
-
727
-
728
- <ul class="member-list">
729
- <h4>Returns:</h4>
730
-
731
- <li>
732
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the tool has one or more event handlers of the specified type, <tt>false</tt> otherwise
733
- </li>
734
-
735
-
736
- </ul>
737
-
738
-
739
-
740
-
741
-
742
- </div>
743
- </div>
744
- </div>
745
-
746
-
747
-
748
- </div>
749
-
750
-
751
-
752
-
753
- <!-- =========================== copyright notice ========================== -->
754
- <p class="footer">
755
- Paper.js v0.12.17<br>
756
- 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>
757
- <div class="content-end"></div>
758
-
759
-
760
- </article>
761
- </body>