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/Style.html DELETED
@@ -1,919 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Style</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>Style</h1>
17
-
18
- <p>Style is used for changing the visual styles of items contained within a Paper.js project and is returned by <a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
19
- <p>All properties of Style are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>, i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
20
- <p>To set multiple style properties in one go, you can pass an object to <a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and apply it to a series of items:</p>
21
- <h4>Example:<span class="description">Styling paths</span></h4>
22
-
23
- <div class="paperscript split">
24
-
25
- <div class="buttons">
26
- <div class="button run">Run</div>
27
- </div>
28
-
29
- <script type="text/paperscript" canvas="canvas-0">
30
- var path = new Path.Circle(new Point(80, 50), 30);
31
- path.style = {
32
- fillColor: new Color(1, 0, 0),
33
- strokeColor: 'black',
34
- strokeWidth: 5
35
- };
36
- </script>
37
- <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
38
- </div>
39
-
40
-
41
- <h4>Example:<span class="description">Styling text items</span></h4>
42
-
43
- <div class="paperscript split">
44
-
45
- <div class="buttons">
46
- <div class="button run">Run</div>
47
- </div>
48
-
49
- <script type="text/paperscript" canvas="canvas-1">
50
- var text = new PointText(view.center);
51
- text.content = 'Hello world.';
52
- text.style = {
53
- fontFamily: 'Courier New',
54
- fontWeight: 'bold',
55
- fontSize: 20,
56
- fillColor: 'red',
57
- justification: 'center'
58
- };
59
- </script>
60
- <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
61
- </div>
62
-
63
-
64
- <h4>Example:<span class="description">Styling groups</span></h4>
65
-
66
- <div class="paperscript split">
67
-
68
- <div class="buttons">
69
- <div class="button run">Run</div>
70
- </div>
71
-
72
- <script type="text/paperscript" canvas="canvas-2">
73
- var path1 = new Path.Circle({
74
- center: [100, 50],
75
- radius: 30
76
- });
77
-
78
- var path2 = new Path.Rectangle({
79
- from: [170, 20],
80
- to: [230, 80]
81
- });
82
-
83
- var group = new Group(path1, path2);
84
-
85
- // All styles set on a group are automatically
86
- // set on the children of the group:
87
- group.style = {
88
- strokeColor: 'black',
89
- dashArray: [4, 10],
90
- strokeWidth: 4,
91
- strokeCap: 'round'
92
- };
93
- </script>
94
- <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
95
- </div>
96
-
97
-
98
- </div>
99
-
100
-
101
-
102
-
103
-
104
- <!-- ================================ properties =========================== -->
105
- <div class="reference-members">
106
- <h2>Properties</h2>
107
-
108
-
109
- <div id="view" class="member">
110
- <div class="member-link">
111
- <a name="view" href="#view"><tt><b>view</b></tt></a>
112
- </div>
113
- <div class="member-description hidden">
114
-
115
- <div class="member-text">
116
- <p>The view that this style belongs to.</p>
117
-
118
- <p>Read only.</p>
119
-
120
-
121
-
122
- <ul class="member-list">
123
- <h4>Type:</h4>
124
- <li>
125
- <a href="../classes/View.html"><tt>View</tt></a>
126
- </li>
127
- </ul>
128
-
129
-
130
-
131
- </div>
132
-
133
- </div>
134
- </div>
135
-
136
-
137
- <h3>Stroke Style</h3>
138
-
139
- <div id="strokecolor" class="member">
140
- <div class="member-link">
141
- <a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
142
- </div>
143
- <div class="member-description hidden">
144
-
145
- <div class="member-text">
146
- <p>The color of the stroke.</p>
147
-
148
-
149
-
150
- <ul class="member-list">
151
- <h4>Type:</h4>
152
- <li>
153
- <a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
154
- </li>
155
- </ul>
156
-
157
-
158
- <h4>Example:<span class="description">Setting the stroke color of a path:</span></h4>
159
-
160
- <div class="paperscript split">
161
-
162
- <div class="buttons">
163
- <div class="button run">Run</div>
164
- </div>
165
-
166
- <script type="text/paperscript" canvas="canvas-3">
167
- // Create a circle shaped path at { x: 80, y: 50 }
168
- // with a radius of 35:
169
- var circle = new Path.Circle(new Point(80, 50), 35);
170
-
171
- // Set its stroke color to RGB red:
172
- circle.strokeColor = new Color(1, 0, 0);
173
- </script>
174
- <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
175
- </div>
176
-
177
-
178
- </div>
179
-
180
- </div>
181
- </div>
182
-
183
-
184
- <div id="strokewidth" class="member">
185
- <div class="member-link">
186
- <a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
187
- </div>
188
- <div class="member-description hidden">
189
-
190
- <div class="member-text">
191
- <p>The width of the stroke.</p>
192
-
193
-
194
-
195
- <ul class="member-list">
196
- <h4>Default:</h4>
197
- <li><tt>1</tt></li>
198
- </ul>
199
-
200
- <ul class="member-list">
201
- <h4>Type:</h4>
202
- <li>
203
- <tt>Number</tt>
204
- </li>
205
- </ul>
206
-
207
-
208
- <h4>Example:<span class="description">Setting an item's stroke width:</span></h4>
209
-
210
- <div class="paperscript split">
211
-
212
- <div class="buttons">
213
- <div class="button run">Run</div>
214
- </div>
215
-
216
- <script type="text/paperscript" canvas="canvas-4">
217
- // Create a circle shaped path at { x: 80, y: 50 }
218
- // with a radius of 35:
219
- var circle = new Path.Circle(new Point(80, 50), 35);
220
-
221
- // Set its stroke color to black:
222
- circle.strokeColor = 'black';
223
-
224
- // Set its stroke width to 10:
225
- circle.strokeWidth = 10;
226
- </script>
227
- <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
228
- </div>
229
-
230
-
231
- </div>
232
-
233
- </div>
234
- </div>
235
-
236
-
237
- <div id="strokecap" class="member">
238
- <div class="member-link">
239
- <a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
240
- </div>
241
- <div class="member-description hidden">
242
-
243
- <div class="member-text">
244
- <p>The shape to be used at the beginning and end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they have a stroke.</p>
245
-
246
-
247
- <ul class="member-list">
248
- <h4>Values:</h4>
249
- <li><tt>'round'</tt>, <tt>'square'</tt>, <tt>'butt'</tt></li>
250
- </ul>
251
-
252
-
253
- <ul class="member-list">
254
- <h4>Default:</h4>
255
- <li><tt>'butt'</tt></li>
256
- </ul>
257
-
258
- <ul class="member-list">
259
- <h4>Type:</h4>
260
- <li>
261
- <tt>String</tt>
262
- </li>
263
- </ul>
264
-
265
-
266
- <h4>Example:<span class="description">A look at the different stroke caps:</span></h4>
267
-
268
- <div class="paperscript split">
269
-
270
- <div class="buttons">
271
- <div class="button run">Run</div>
272
- </div>
273
-
274
- <script type="text/paperscript" canvas="canvas-5">
275
- var line = new Path(new Point(80, 50), new Point(420, 50));
276
- line.strokeColor = 'black';
277
- line.strokeWidth = 20;
278
-
279
- // Select the path, so we can see where the stroke is formed:
280
- line.selected = true;
281
-
282
- // Set the stroke cap of the line to be round:
283
- line.strokeCap = 'round';
284
-
285
- // Copy the path and set its stroke cap to be square:
286
- var line2 = line.clone();
287
- line2.position.y += 50;
288
- line2.strokeCap = 'square';
289
-
290
- // Make another copy and set its stroke cap to be butt:
291
- var line2 = line.clone();
292
- line2.position.y += 100;
293
- line2.strokeCap = 'butt';
294
- </script>
295
- <div class="canvas"><canvas width="516" height="200" id="canvas-5"></canvas></div>
296
- </div>
297
-
298
-
299
- </div>
300
-
301
- </div>
302
- </div>
303
-
304
-
305
- <div id="strokejoin" class="member">
306
- <div class="member-link">
307
- <a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
308
- </div>
309
- <div class="member-description hidden">
310
-
311
- <div class="member-text">
312
- <p>The shape to be used at the segments and corners of <a href="../classes/Path.html"><tt>Path</tt></a> items when they have a stroke.</p>
313
-
314
-
315
- <ul class="member-list">
316
- <h4>Values:</h4>
317
- <li><tt>'miter'</tt>, <tt>'round'</tt>, <tt>'bevel'</tt></li>
318
- </ul>
319
-
320
-
321
- <ul class="member-list">
322
- <h4>Default:</h4>
323
- <li><tt>'miter'</tt></li>
324
- </ul>
325
-
326
- <ul class="member-list">
327
- <h4>Type:</h4>
328
- <li>
329
- <tt>String</tt>
330
- </li>
331
- </ul>
332
-
333
-
334
- <h4>Example:<span class="description">A look at the different stroke joins:</span></h4>
335
-
336
- <div class="paperscript split">
337
-
338
- <div class="buttons">
339
- <div class="button run">Run</div>
340
- </div>
341
-
342
- <script type="text/paperscript" canvas="canvas-6">
343
- var path = new Path();
344
- path.add(new Point(80, 100));
345
- path.add(new Point(120, 40));
346
- path.add(new Point(160, 100));
347
- path.strokeColor = 'black';
348
- path.strokeWidth = 20;
349
-
350
- // Select the path, so we can see where the stroke is formed:
351
- path.selected = true;
352
-
353
- var path2 = path.clone();
354
- path2.position.x += path2.bounds.width * 1.5;
355
- path2.strokeJoin = 'round';
356
-
357
- var path3 = path2.clone();
358
- path3.position.x += path3.bounds.width * 1.5;
359
- path3.strokeJoin = 'bevel';
360
- </script>
361
- <div class="canvas"><canvas width="516" height="120" id="canvas-6"></canvas></div>
362
- </div>
363
-
364
-
365
- </div>
366
-
367
- </div>
368
- </div>
369
-
370
-
371
- <div id="strokescaling" class="member">
372
- <div class="member-link">
373
- <a name="strokescaling" href="#strokescaling"><tt><b>strokeScaling</b></tt></a>
374
- </div>
375
- <div class="member-description hidden">
376
-
377
- <div class="member-text">
378
- <p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
379
-
380
-
381
-
382
- <ul class="member-list">
383
- <h4>Default:</h4>
384
- <li><tt>true</tt></li>
385
- </ul>
386
-
387
- <ul class="member-list">
388
- <h4>Type:</h4>
389
- <li>
390
- <tt>Boolean</tt>
391
- </li>
392
- </ul>
393
-
394
-
395
-
396
- </div>
397
-
398
- </div>
399
- </div>
400
-
401
-
402
- <div id="dashoffset" class="member">
403
- <div class="member-link">
404
- <a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
405
- </div>
406
- <div class="member-description hidden">
407
-
408
- <div class="member-text">
409
- <p>The dash offset of the stroke.</p>
410
-
411
-
412
-
413
- <ul class="member-list">
414
- <h4>Default:</h4>
415
- <li><tt>0</tt></li>
416
- </ul>
417
-
418
- <ul class="member-list">
419
- <h4>Type:</h4>
420
- <li>
421
- <tt>Number</tt>
422
- </li>
423
- </ul>
424
-
425
-
426
-
427
- </div>
428
-
429
- </div>
430
- </div>
431
-
432
-
433
- <div id="dasharray" class="member">
434
- <div class="member-link">
435
- <a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
436
- </div>
437
- <div class="member-description hidden">
438
-
439
- <div class="member-text">
440
- <p>Specifies an array containing the dash and gap lengths of the stroke.</p>
441
-
442
-
443
-
444
- <ul class="member-list">
445
- <h4>Default:</h4>
446
- <li><tt>[]</tt></li>
447
- </ul>
448
-
449
- <ul class="member-list">
450
- <h4>Type:</h4>
451
- <li>
452
- Array of <tt>Numbers</tt>
453
- </li>
454
- </ul>
455
-
456
-
457
- <h4>Example:</h4>
458
-
459
- <div class="paperscript split">
460
-
461
- <div class="buttons">
462
- <div class="button run">Run</div>
463
- </div>
464
-
465
- <script type="text/paperscript" canvas="canvas-7">
466
- var path = new Path.Circle(new Point(80, 50), 40);
467
- path.strokeWidth = 2;
468
- path.strokeColor = 'black';
469
-
470
- // Set the dashed stroke to [10pt dash, 4pt gap]:
471
- path.dashArray = [10, 4];
472
- </script>
473
- <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
474
- </div>
475
-
476
-
477
- </div>
478
-
479
- </div>
480
- </div>
481
-
482
-
483
- <div id="miterlimit" class="member">
484
- <div class="member-link">
485
- <a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
486
- </div>
487
- <div class="member-description hidden">
488
-
489
- <div class="member-text">
490
- <p>The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for <a href="../classes/Style.html#strokejoin"><tt>strokeJoin</tt></a>, it is possible for the miter to extend far beyond the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a limit on the ratio of the miter length to the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a>.</p>
491
-
492
-
493
-
494
- <ul class="member-list">
495
- <h4>Default:</h4>
496
- <li><tt>10</tt></li>
497
- </ul>
498
-
499
- <ul class="member-list">
500
- <h4>Type:</h4>
501
- <li>
502
- <tt>Number</tt>
503
- </li>
504
- </ul>
505
-
506
-
507
-
508
- </div>
509
-
510
- </div>
511
- </div>
512
-
513
-
514
- <h3>Fill Style</h3>
515
-
516
- <div id="fillcolor" class="member">
517
- <div class="member-link">
518
- <a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
519
- </div>
520
- <div class="member-description hidden">
521
-
522
- <div class="member-text">
523
- <p>The fill color.</p>
524
-
525
-
526
-
527
- <ul class="member-list">
528
- <h4>Type:</h4>
529
- <li>
530
- <a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
531
- </li>
532
- </ul>
533
-
534
-
535
- <h4>Example:<span class="description">Setting the fill color of a path to red:</span></h4>
536
-
537
- <div class="paperscript split">
538
-
539
- <div class="buttons">
540
- <div class="button run">Run</div>
541
- </div>
542
-
543
- <script type="text/paperscript" canvas="canvas-8">
544
- // Create a circle shaped path at { x: 80, y: 50 }
545
- // with a radius of 35:
546
- var circle = new Path.Circle(new Point(80, 50), 35);
547
-
548
- // Set the fill color of the circle to RGB red:
549
- circle.fillColor = new Color(1, 0, 0);
550
- </script>
551
- <div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
552
- </div>
553
-
554
-
555
- </div>
556
-
557
- </div>
558
- </div>
559
-
560
-
561
- <div id="fillrule" class="member">
562
- <div class="member-link">
563
- <a name="fillrule" href="#fillrule"><tt><b>fillRule</b></tt></a>
564
- </div>
565
- <div class="member-description hidden">
566
-
567
- <div class="member-text">
568
- <p>The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than <code>&#39;nonzero&#39;</code>.</p>
569
-
570
-
571
- <ul class="member-list">
572
- <h4>Values:</h4>
573
- <li><tt>'nonzero'</tt>, <tt>'evenodd'</tt></li>
574
- </ul>
575
-
576
-
577
- <ul class="member-list">
578
- <h4>Default:</h4>
579
- <li><tt>'nonzero'</tt></li>
580
- </ul>
581
-
582
- <ul class="member-list">
583
- <h4>Type:</h4>
584
- <li>
585
- <tt>String</tt>
586
- </li>
587
- </ul>
588
-
589
-
590
-
591
- </div>
592
-
593
- </div>
594
- </div>
595
-
596
-
597
- <h3>Shadow Style</h3>
598
-
599
- <div id="shadowcolor" class="member">
600
- <div class="member-link">
601
- <a name="shadowcolor" href="#shadowcolor"><tt><b>shadowColor</b></tt></a>
602
- </div>
603
- <div class="member-description hidden">
604
-
605
- <div class="member-text">
606
- <p>The shadow color.</p>
607
-
608
-
609
-
610
- <ul class="member-list">
611
- <h4>Type:</h4>
612
- <li>
613
- <a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
614
- </li>
615
- </ul>
616
-
617
-
618
- <h4>Example:<span class="description">Creating a circle with a black shadow:</span></h4>
619
-
620
- <div class="paperscript split">
621
-
622
- <div class="buttons">
623
- <div class="button run">Run</div>
624
- </div>
625
-
626
- <script type="text/paperscript" canvas="canvas-9">
627
- var circle = new Path.Circle({
628
- center: [80, 50],
629
- radius: 35,
630
- fillColor: 'white',
631
- // Set the shadow color of the circle to RGB black:
632
- shadowColor: new Color(0, 0, 0),
633
- // Set the shadow blur radius to 12:
634
- shadowBlur: 12,
635
- // Offset the shadow by { x: 5, y: 5 }
636
- shadowOffset: new Point(5, 5)
637
- });
638
- </script>
639
- <div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
640
- </div>
641
-
642
-
643
- </div>
644
-
645
- </div>
646
- </div>
647
-
648
-
649
- <div id="shadowblur" class="member">
650
- <div class="member-link">
651
- <a name="shadowblur" href="#shadowblur"><tt><b>shadowBlur</b></tt></a>
652
- </div>
653
- <div class="member-description hidden">
654
-
655
- <div class="member-text">
656
- <p>The shadow&rsquo;s blur radius.</p>
657
-
658
-
659
-
660
- <ul class="member-list">
661
- <h4>Default:</h4>
662
- <li><tt>0</tt></li>
663
- </ul>
664
-
665
- <ul class="member-list">
666
- <h4>Type:</h4>
667
- <li>
668
- <tt>Number</tt>
669
- </li>
670
- </ul>
671
-
672
-
673
-
674
- </div>
675
-
676
- </div>
677
- </div>
678
-
679
-
680
- <div id="shadowoffset" class="member">
681
- <div class="member-link">
682
- <a name="shadowoffset" href="#shadowoffset"><tt><b>shadowOffset</b></tt></a>
683
- </div>
684
- <div class="member-description hidden">
685
-
686
- <div class="member-text">
687
- <p>The shadow&rsquo;s offset.</p>
688
-
689
-
690
-
691
- <ul class="member-list">
692
- <h4>Default:</h4>
693
- <li><tt>0</tt></li>
694
- </ul>
695
-
696
- <ul class="member-list">
697
- <h4>Type:</h4>
698
- <li>
699
- <a href="../classes/Point.html"><tt>Point</tt></a>
700
- </li>
701
- </ul>
702
-
703
-
704
-
705
- </div>
706
-
707
- </div>
708
- </div>
709
-
710
-
711
- <h3>Selection Style</h3>
712
-
713
- <div id="selectedcolor" class="member">
714
- <div class="member-link">
715
- <a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
716
- </div>
717
- <div class="member-description hidden">
718
-
719
- <div class="member-text">
720
- <p>The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.</p>
721
-
722
-
723
-
724
- <ul class="member-list">
725
- <h4>Type:</h4>
726
- <li>
727
- <a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
728
- </li>
729
- </ul>
730
-
731
-
732
-
733
- </div>
734
-
735
- </div>
736
- </div>
737
-
738
-
739
- <h3>Character Style</h3>
740
-
741
- <div id="fontfamily" class="member">
742
- <div class="member-link">
743
- <a name="fontfamily" href="#fontfamily"><tt><b>fontFamily</b></tt></a>
744
- </div>
745
- <div class="member-description hidden">
746
-
747
- <div class="member-text">
748
- <p>The font-family to be used in text content.</p>
749
-
750
-
751
-
752
- <ul class="member-list">
753
- <h4>Default:</h4>
754
- <li><tt>'sans-serif'</tt></li>
755
- </ul>
756
-
757
- <ul class="member-list">
758
- <h4>Type:</h4>
759
- <li>
760
- <tt>String</tt>
761
- </li>
762
- </ul>
763
-
764
-
765
-
766
- </div>
767
-
768
- </div>
769
- </div>
770
-
771
-
772
- <div id="fontweight" class="member">
773
- <div class="member-link">
774
- <a name="fontweight" href="#fontweight"><tt><b>fontWeight</b></tt></a>
775
- </div>
776
- <div class="member-description hidden">
777
-
778
- <div class="member-text">
779
- <p>The font-weight to be used in text content.</p>
780
-
781
-
782
-
783
- <ul class="member-list">
784
- <h4>Default:</h4>
785
- <li><tt>'normal'</tt></li>
786
- </ul>
787
-
788
- <ul class="member-list">
789
- <h4>Type:</h4>
790
- <li>
791
- <tt>String</tt>⟋<tt>Number</tt>
792
- </li>
793
- </ul>
794
-
795
-
796
-
797
- </div>
798
-
799
- </div>
800
- </div>
801
-
802
-
803
- <div id="fontsize" class="member">
804
- <div class="member-link">
805
- <a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
806
- </div>
807
- <div class="member-description hidden">
808
-
809
- <div class="member-text">
810
- <p>The font size of text content, as a number in pixels, or as a string with optional units <code>&#39;px&#39;</code>, <code>&#39;pt&#39;</code> and <code>&#39;em&#39;</code>.</p>
811
-
812
-
813
-
814
- <ul class="member-list">
815
- <h4>Default:</h4>
816
- <li><tt>10</tt></li>
817
- </ul>
818
-
819
- <ul class="member-list">
820
- <h4>Type:</h4>
821
- <li>
822
- <tt>Number</tt>⟋<tt>String</tt>
823
- </li>
824
- </ul>
825
-
826
-
827
-
828
- </div>
829
-
830
- </div>
831
- </div>
832
-
833
-
834
- <div id="leading" class="member">
835
- <div class="member-link">
836
- <a name="leading" href="#leading"><tt><b>leading</b></tt></a>
837
- </div>
838
- <div class="member-description hidden">
839
-
840
- <div class="member-text">
841
- <p>The text leading of text content.</p>
842
-
843
-
844
-
845
- <ul class="member-list">
846
- <h4>Default:</h4>
847
- <li><tt>fontSize * 1.2</tt></li>
848
- </ul>
849
-
850
- <ul class="member-list">
851
- <h4>Type:</h4>
852
- <li>
853
- <tt>Number</tt>⟋<tt>String</tt>
854
- </li>
855
- </ul>
856
-
857
-
858
-
859
- </div>
860
-
861
- </div>
862
- </div>
863
-
864
-
865
- <h3>Paragraph Style</h3>
866
-
867
- <div id="justification" class="member">
868
- <div class="member-link">
869
- <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
870
- </div>
871
- <div class="member-description hidden">
872
-
873
- <div class="member-text">
874
- <p>The justification of text paragraphs.</p>
875
-
876
-
877
- <ul class="member-list">
878
- <h4>Values:</h4>
879
- <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt></li>
880
- </ul>
881
-
882
-
883
- <ul class="member-list">
884
- <h4>Default:</h4>
885
- <li><tt>'left'</tt></li>
886
- </ul>
887
-
888
- <ul class="member-list">
889
- <h4>Type:</h4>
890
- <li>
891
- <tt>String</tt>
892
- </li>
893
- </ul>
894
-
895
-
896
-
897
- </div>
898
-
899
- </div>
900
- </div>
901
-
902
- </div>
903
-
904
-
905
-
906
-
907
-
908
-
909
-
910
-
911
- <!-- =========================== copyright notice ========================== -->
912
- <p class="footer">
913
- Paper.js v0.12.17<br>
914
- 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>
915
- <div class="content-end"></div>
916
-
917
-
918
- </article>
919
- </body>