paper 0.12.20 → 0.14.0

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 (54) hide show
  1. package/CHANGELOG.md +318 -0
  2. package/README.md +45 -26
  3. package/dist/docs/assets/js/paper.js +1210 -481
  4. package/dist/docs/classes/ChangeFlag.html +384 -0
  5. package/dist/docs/classes/Color.html +63 -47
  6. package/dist/docs/classes/CompoundPath.html +219 -62
  7. package/dist/docs/classes/Curve.html +9 -7
  8. package/dist/docs/classes/CurveLocation.html +1 -1
  9. package/dist/docs/classes/Event.html +1 -1
  10. package/dist/docs/classes/Gradient.html +1 -1
  11. package/dist/docs/classes/GradientStop.html +1 -1
  12. package/dist/docs/classes/Group.html +151 -27
  13. package/dist/docs/classes/HitResult.html +3 -2
  14. package/dist/docs/classes/HostItem.html +6721 -0
  15. package/dist/docs/classes/Item.html +120 -27
  16. package/dist/docs/classes/Key.html +1 -1
  17. package/dist/docs/classes/KeyEvent.html +1 -1
  18. package/dist/docs/classes/Layer.html +151 -27
  19. package/dist/docs/classes/Matrix.html +1 -1
  20. package/dist/docs/classes/MouseEvent.html +1 -1
  21. package/dist/docs/classes/PaperScope.html +88 -1
  22. package/dist/docs/classes/PaperScript.html +2 -1
  23. package/dist/docs/classes/Path.html +232 -72
  24. package/dist/docs/classes/PathItem.html +337 -180
  25. package/dist/docs/classes/Point.html +143 -21
  26. package/dist/docs/classes/PointText.html +151 -27
  27. package/dist/docs/classes/Project.html +201 -8
  28. package/dist/docs/classes/Raster.html +150 -38
  29. package/dist/docs/classes/Rectangle.html +12 -11
  30. package/dist/docs/classes/Segment.html +1 -1
  31. package/dist/docs/classes/Shape.html +120 -27
  32. package/dist/docs/classes/Size.html +81 -21
  33. package/dist/docs/classes/Style.html +35 -3
  34. package/dist/docs/classes/SymbolDefinition.html +1 -1
  35. package/dist/docs/classes/SymbolItem.html +121 -28
  36. package/dist/docs/classes/TextItem.html +151 -27
  37. package/dist/docs/classes/Tool.html +127 -1
  38. package/dist/docs/classes/ToolEvent.html +27 -1
  39. package/dist/docs/classes/Tween.html +1 -1
  40. package/dist/docs/classes/View.html +345 -10
  41. package/dist/docs/classes/global.html +1 -1
  42. package/dist/docs/classes/index.html +2 -2
  43. package/dist/docs/index.html +1 -1
  44. package/dist/node/canvas.js +1 -1
  45. package/dist/node/self.js +4 -3
  46. package/dist/paper-core.js +1182 -465
  47. package/dist/paper-core.min.js +3 -3
  48. package/dist/paper-full.js +1210 -481
  49. package/dist/paper-full.min.js +3 -3
  50. package/dist/paper-sourced.js +18631 -0
  51. package/dist/paper.d.ts +606 -78
  52. package/examples/Rasters/Smoothing.html +1 -1
  53. package/package.json +6 -17
  54. package/dist/node/xml.js +0 -40
@@ -176,7 +176,23 @@
176
176
 
177
177
 
178
178
 
179
-
179
+ <h4>Example:</h4>
180
+
181
+ <div class="paperscript split">
182
+
183
+ <div class="buttons">
184
+ <div class="button run">Run</div>
185
+ </div>
186
+
187
+ <script type="text/paperscript" canvas="canvas-0">
188
+ var result = new Path.RegularPolygon([50, 50], 3, 40)
189
+ .unite(new Path.Circle([50, 50], 25));
190
+ result.fillColor = 'red';
191
+ </script>
192
+ <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
193
+ </div>
194
+
195
+
180
196
  </div>
181
197
  </div>
182
198
  </div>
@@ -228,7 +244,23 @@
228
244
 
229
245
 
230
246
 
231
-
247
+ <h4>Example:</h4>
248
+
249
+ <div class="paperscript split">
250
+
251
+ <div class="buttons">
252
+ <div class="button run">Run</div>
253
+ </div>
254
+
255
+ <script type="text/paperscript" canvas="canvas-1">
256
+ var result = new Path.RegularPolygon([50, 50], 3, 40)
257
+ .intersect(new Path.Circle([50, 50], 25));
258
+ result.fillColor = 'red';
259
+ </script>
260
+ <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
261
+ </div>
262
+
263
+
232
264
  </div>
233
265
  </div>
234
266
  </div>
@@ -280,7 +312,23 @@
280
312
 
281
313
 
282
314
 
283
-
315
+ <h4>Example:</h4>
316
+
317
+ <div class="paperscript split">
318
+
319
+ <div class="buttons">
320
+ <div class="button run">Run</div>
321
+ </div>
322
+
323
+ <script type="text/paperscript" canvas="canvas-2">
324
+ var result = new Path.RegularPolygon([50, 50], 3, 40)
325
+ .subtract(new Path.Circle([50, 50], 25));
326
+ result.fillColor = 'red';
327
+ </script>
328
+ <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
329
+ </div>
330
+
331
+
284
332
  </div>
285
333
  </div>
286
334
  </div>
@@ -331,7 +379,23 @@
331
379
 
332
380
 
333
381
 
334
-
382
+ <h4>Example:</h4>
383
+
384
+ <div class="paperscript split">
385
+
386
+ <div class="buttons">
387
+ <div class="button run">Run</div>
388
+ </div>
389
+
390
+ <script type="text/paperscript" canvas="canvas-3">
391
+ var result = new Path.RegularPolygon([50, 50], 3, 40)
392
+ .exclude(new Path.Circle([50, 50], 25));
393
+ result.fillColor = 'red';
394
+ </script>
395
+ <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
396
+ </div>
397
+
398
+
335
399
  </div>
336
400
  </div>
337
401
  </div>
@@ -439,9 +503,9 @@
439
503
 
440
504
  <h3>Path Intersections and Locations</h3>
441
505
 
442
- <div id="getintersections-path" class="member">
506
+ <div id="getintersections" class="member">
443
507
  <div class="member-link">
444
- <a name="getintersections-path" href="#getintersections-path"><tt><b>getIntersections</b>(path[, include])</tt></a>
508
+ <a name="getintersections" href="#getintersections"><tt><b>getIntersections</b>([path[, include]])</tt></a>
445
509
  </div>
446
510
  <div class="member-description hidden">
447
511
  <div class="member-text">
@@ -455,7 +519,7 @@
455
519
  <tt>path:</tt>
456
520
  <a href="../classes/PathItem.html"><tt>PathItem</tt></a>
457
521
  &mdash;&nbsp;the other item to find the intersections with
458
-
522
+ &mdash;&nbsp;optional
459
523
  </li>
460
524
 
461
525
  <li>
@@ -496,7 +560,7 @@
496
560
  <div class="button run">Run</div>
497
561
  </div>
498
562
 
499
- <script type="text/paperscript" canvas="canvas-0">
563
+ <script type="text/paperscript" canvas="canvas-4">
500
564
  var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
501
565
  path.strokeColor = 'black';
502
566
 
@@ -519,7 +583,7 @@ function onFrame(event) {
519
583
  }
520
584
  }
521
585
  </script>
522
- <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
586
+ <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
523
587
  </div>
524
588
 
525
589
 
@@ -660,7 +724,7 @@ function onFrame(event) {
660
724
  <div class="button run">Run</div>
661
725
  </div>
662
726
 
663
- <script type="text/paperscript" canvas="canvas-1">
727
+ <script type="text/paperscript" canvas="canvas-5">
664
728
  var star = new Path.Star({
665
729
  center: view.center,
666
730
  points: 10,
@@ -684,7 +748,7 @@ function onMouseMove(event) {
684
748
  circle.position = nearestPoint;
685
749
  }
686
750
  </script>
687
- <div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
751
+ <div class="canvas"><canvas width="516" height="200" id="canvas-5"></canvas></div>
688
752
  </div>
689
753
 
690
754
 
@@ -747,7 +811,7 @@ function onMouseMove(event) {
747
811
  <div class="button run">Run</div>
748
812
  </div>
749
813
 
750
- <script type="text/paperscript" canvas="canvas-2">
814
+ <script type="text/paperscript" canvas="canvas-6">
751
815
  // Create a circle shaped path at { x: 80, y: 50 }
752
816
  // with a radius of 35:
753
817
  var path = new Path.Circle({
@@ -765,7 +829,7 @@ copy.position.x += 150;
765
829
  // Flatten the copied path, with a maximum error of 4 points:
766
830
  copy.flatten(4);
767
831
  </script>
768
- <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
832
+ <div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
769
833
  </div>
770
834
 
771
835
 
@@ -843,7 +907,7 @@ copy.flatten(4);
843
907
  <div class="button run">Run</div>
844
908
  </div>
845
909
 
846
- <script type="text/paperscript" canvas="canvas-3">
910
+ <script type="text/paperscript" canvas="canvas-7">
847
911
  // Create a rectangular path with its top-left point at
848
912
  // {x: 30, y: 25} and a size of {width: 50, height: 50}:
849
913
  var path = new Path.Rectangle({
@@ -862,7 +926,7 @@ copy.position.x += 100;
862
926
  // Smooth the segments of the copy:
863
927
  copy.smooth({ type: 'continuous' });
864
928
  </script>
865
- <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
929
+ <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
866
930
  </div>
867
931
 
868
932
 
@@ -874,7 +938,7 @@ copy.smooth({ type: 'continuous' });
874
938
  <div class="button run">Run</div>
875
939
  </div>
876
940
 
877
- <script type="text/paperscript" canvas="canvas-4">
941
+ <script type="text/paperscript" canvas="canvas-8">
878
942
  var path = new Path();
879
943
  path.strokeColor = 'black';
880
944
 
@@ -899,7 +963,7 @@ copy.fullySelected = true;
899
963
  // Smooth the path using centripetal Catmull-Rom splines:
900
964
  copy.smooth({ type: 'catmull-rom', factor: 0.5 });
901
965
  </script>
902
- <div class="canvas"><canvas width="516" height="220" id="canvas-4"></canvas></div>
966
+ <div class="canvas"><canvas width="516" height="220" id="canvas-8"></canvas></div>
903
967
  </div>
904
968
 
905
969
 
@@ -911,7 +975,7 @@ copy.smooth({ type: 'catmull-rom', factor: 0.5 });
911
975
  <div class="button run">Run</div>
912
976
  </div>
913
977
 
914
- <script type="text/paperscript" canvas="canvas-5">
978
+ <script type="text/paperscript" canvas="canvas-9">
915
979
  // Create 5 rectangles, next to each other:
916
980
  var paths = [];
917
981
  for (var i = 0; i < 5; i++) {
@@ -941,7 +1005,7 @@ paths[3].smooth({ type: 'continuous', from: 0, to: 2 });
941
1005
  // Smooth a range, using negative indices:
942
1006
  paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
943
1007
  </script>
944
- <div class="canvas"><canvas width="516" height="110" id="canvas-5"></canvas></div>
1008
+ <div class="canvas"><canvas width="516" height="110" id="canvas-9"></canvas></div>
945
1009
  </div>
946
1010
 
947
1011
 
@@ -994,7 +1058,7 @@ paths[4].smooth({ type: 'continuous', from: -1, to: 1 });
994
1058
  <div class="button run">Run</div>
995
1059
  </div>
996
1060
 
997
- <script type="text/paperscript" canvas="canvas-6">
1061
+ <script type="text/paperscript" canvas="canvas-10">
998
1062
  var path;
999
1063
  function onMouseDown(event) {
1000
1064
  // If we already made a path before, deselect it:
@@ -1024,7 +1088,7 @@ function onMouseUp(event) {
1024
1088
  path.selected = true;
1025
1089
  }
1026
1090
  </script>
1027
- <div class="canvas"><canvas width="516" height="300" id="canvas-6"></canvas></div>
1091
+ <div class="canvas"><canvas width="516" height="300" id="canvas-10"></canvas></div>
1028
1092
  </div>
1029
1093
 
1030
1094
 
@@ -1223,7 +1287,7 @@ function onMouseUp(event) {
1223
1287
  <div class="button run">Run</div>
1224
1288
  </div>
1225
1289
 
1226
- <script type="text/paperscript" canvas="canvas-7">
1290
+ <script type="text/paperscript" canvas="canvas-11">
1227
1291
  var path = new Path();
1228
1292
  path.strokeColor = 'black';
1229
1293
 
@@ -1243,7 +1307,7 @@ path.arcTo(throughPoint, toPoint);
1243
1307
  var circle = new Path.Circle(throughPoint, 3);
1244
1308
  circle.fillColor = 'red';
1245
1309
  </script>
1246
- <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
1310
+ <div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
1247
1311
  </div>
1248
1312
 
1249
1313
 
@@ -1255,7 +1319,7 @@ circle.fillColor = 'red';
1255
1319
  <div class="button run">Run</div>
1256
1320
  </div>
1257
1321
 
1258
- <script type="text/paperscript" canvas="canvas-8">
1322
+ <script type="text/paperscript" canvas="canvas-12">
1259
1323
  var myPath;
1260
1324
  function onMouseDrag(event) {
1261
1325
  // If we created a path before, remove it:
@@ -1283,7 +1347,7 @@ function onMouseUp(event) {
1283
1347
  myPath.fillColor = 'black';
1284
1348
  }
1285
1349
  </script>
1286
- <div class="canvas"><canvas width="516" height="300" id="canvas-8"></canvas></div>
1350
+ <div class="canvas"><canvas width="516" height="300" id="canvas-12"></canvas></div>
1287
1351
  </div>
1288
1352
 
1289
1353
 
@@ -1332,7 +1396,7 @@ function onMouseUp(event) {
1332
1396
  <div class="button run">Run</div>
1333
1397
  </div>
1334
1398
 
1335
- <script type="text/paperscript" canvas="canvas-9">
1399
+ <script type="text/paperscript" canvas="canvas-13">
1336
1400
  var path = new Path();
1337
1401
  path.strokeColor = 'black';
1338
1402
 
@@ -1347,7 +1411,7 @@ path2.add(new Point(180, 25));
1347
1411
  // we pass `false` as the second argument to arcTo:
1348
1412
  path2.arcTo(new Point(280, 25), false);
1349
1413
  </script>
1350
- <div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
1414
+ <div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
1351
1415
  </div>
1352
1416
 
1353
1417
 
@@ -1359,7 +1423,7 @@ path2.arcTo(new Point(280, 25), false);
1359
1423
  <div class="button run">Run</div>
1360
1424
  </div>
1361
1425
 
1362
- <script type="text/paperscript" canvas="canvas-10">
1426
+ <script type="text/paperscript" canvas="canvas-14">
1363
1427
  var myPath;
1364
1428
 
1365
1429
  // The mouse has to move at least 20 points before
@@ -1380,7 +1444,7 @@ function onMouseDrag(event) {
1380
1444
  myPath.arcTo(event.point);
1381
1445
  }
1382
1446
  </script>
1383
- <div class="canvas"><canvas width="516" height="300" id="canvas-10"></canvas></div>
1447
+ <div class="canvas"><canvas width="516" height="300" id="canvas-14"></canvas></div>
1384
1448
  </div>
1385
1449
 
1386
1450
 
@@ -1436,7 +1500,7 @@ function onMouseDrag(event) {
1436
1500
  <div class="button run">Run</div>
1437
1501
  </div>
1438
1502
 
1439
- <script type="text/paperscript" canvas="canvas-11">
1503
+ <script type="text/paperscript" canvas="canvas-15">
1440
1504
  var myPath;
1441
1505
  function onMouseMove(event) {
1442
1506
  // If we created a path before, remove it:
@@ -1457,7 +1521,7 @@ function onMouseMove(event) {
1457
1521
  myPath.selected = true;
1458
1522
  }
1459
1523
  </script>
1460
- <div class="canvas"><canvas width="516" height="300" id="canvas-11"></canvas></div>
1524
+ <div class="canvas"><canvas width="516" height="300" id="canvas-15"></canvas></div>
1461
1525
  </div>
1462
1526
 
1463
1527
 
@@ -1642,7 +1706,7 @@ function onMouseMove(event) {
1642
1706
  <div class="button run">Run</div>
1643
1707
  </div>
1644
1708
 
1645
- <script type="text/paperscript" canvas="canvas-12">
1709
+ <script type="text/paperscript" canvas="canvas-16">
1646
1710
  var path = new Path();
1647
1711
  path.strokeColor = 'black';
1648
1712
 
@@ -1656,7 +1720,7 @@ path.lineBy(50, 0);
1656
1720
  // 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
1657
1721
  path.lineBy(0, 50);
1658
1722
  </script>
1659
- <div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
1723
+ <div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
1660
1724
  </div>
1661
1725
 
1662
1726
 
@@ -1668,7 +1732,7 @@ path.lineBy(0, 50);
1668
1732
  <div class="button run">Run</div>
1669
1733
  </div>
1670
1734
 
1671
- <script type="text/paperscript" canvas="canvas-13">
1735
+ <script type="text/paperscript" canvas="canvas-17">
1672
1736
  var path = new Path();
1673
1737
  path.strokeColor = 'black';
1674
1738
 
@@ -1694,7 +1758,7 @@ path.smooth();
1694
1758
  // the construction of the path:
1695
1759
  // path.selected = true;
1696
1760
  </script>
1697
- <div class="canvas"><canvas width="516" height="300" id="canvas-13"></canvas></div>
1761
+ <div class="canvas"><canvas width="516" height="300" id="canvas-17"></canvas></div>
1698
1762
  </div>
1699
1763
 
1700
1764
 
@@ -2046,6 +2110,32 @@ Array of <tt>Number[]</tt> objects[]
2046
2110
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
2047
2111
 
2048
2112
 
2113
+ <div id="key" class="member">
2114
+ <div class="member-link">
2115
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
2116
+ </div>
2117
+ <div class="member-description hidden">
2118
+
2119
+ <div class="member-text">
2120
+ <p>The key of the host&rsquo;s node that the item represents, in a project backed by a host document, see <a href="../classes/Project.html#source"><tt>project.source</tt></a>. It can only be set once, on an item created by a script, to register the key that the host gave its new node.</p>
2121
+
2122
+
2123
+
2124
+ <ul class="member-list">
2125
+ <h4>Type:</h4>
2126
+ <li>
2127
+ <tt>Number</tt>
2128
+ </li>
2129
+ </ul>
2130
+
2131
+
2132
+
2133
+ </div>
2134
+
2135
+ </div>
2136
+ </div>
2137
+
2138
+
2049
2139
  <div id="id" class="member">
2050
2140
  <div class="member-link">
2051
2141
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -2132,7 +2222,7 @@ Array of <tt>Number[]</tt> objects[]
2132
2222
  <div class="button run">Run</div>
2133
2223
  </div>
2134
2224
 
2135
- <script type="text/paperscript" canvas="canvas-14">
2225
+ <script type="text/paperscript" canvas="canvas-18">
2136
2226
  var path = new Path.Circle({
2137
2227
  center: [80, 50],
2138
2228
  radius: 35
@@ -2147,7 +2237,7 @@ group.addChild(path);
2147
2237
  // The path can be accessed by name:
2148
2238
  group.children['example'].fillColor = 'red';
2149
2239
  </script>
2150
- <div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
2240
+ <div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
2151
2241
  </div>
2152
2242
 
2153
2243
 
@@ -2165,6 +2255,7 @@ group.children['example'].fillColor = 'red';
2165
2255
 
2166
2256
  <div class="member-text">
2167
2257
  <p>The path style of the item.</p>
2258
+ <p>Styles set on a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a> are applied to the children that it contains at that moment. Items added to it later do not receive them.</p>
2168
2259
 
2169
2260
 
2170
2261
 
@@ -2184,7 +2275,7 @@ group.children['example'].fillColor = 'red';
2184
2275
  <div class="button run">Run</div>
2185
2276
  </div>
2186
2277
 
2187
- <script type="text/paperscript" canvas="canvas-15">
2278
+ <script type="text/paperscript" canvas="canvas-19">
2188
2279
  var circle = new Path.Circle({
2189
2280
  center: [80, 50],
2190
2281
  radius: 30
@@ -2195,7 +2286,7 @@ circle.style = {
2195
2286
  strokeWidth: 5
2196
2287
  };
2197
2288
  </script>
2198
- <div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
2289
+ <div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
2199
2290
  </div>
2200
2291
 
2201
2292
 
@@ -2207,7 +2298,7 @@ circle.style = {
2207
2298
  <div class="button run">Run</div>
2208
2299
  </div>
2209
2300
 
2210
- <script type="text/paperscript" canvas="canvas-16">
2301
+ <script type="text/paperscript" canvas="canvas-20">
2211
2302
  var path = new Path.Circle({
2212
2303
  center: [50, 50],
2213
2304
  radius: 30,
@@ -2222,7 +2313,7 @@ var path2 = new Path.Circle({
2222
2313
  // Copy the path style of path:
2223
2314
  path2.style = path.style;
2224
2315
  </script>
2225
- <div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
2316
+ <div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
2226
2317
  </div>
2227
2318
 
2228
2319
 
@@ -2234,7 +2325,7 @@ path2.style = path.style;
2234
2325
  <div class="button run">Run</div>
2235
2326
  </div>
2236
2327
 
2237
- <script type="text/paperscript" canvas="canvas-17">
2328
+ <script type="text/paperscript" canvas="canvas-21">
2238
2329
  var myStyle = {
2239
2330
  fillColor: 'red',
2240
2331
  strokeColor: 'blue',
@@ -2253,7 +2344,7 @@ var path2 = new Path.Circle({
2253
2344
  });
2254
2345
  path2.style = myStyle;
2255
2346
  </script>
2256
- <div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
2347
+ <div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
2257
2348
  </div>
2258
2349
 
2259
2350
 
@@ -2295,7 +2386,7 @@ path2.style = myStyle;
2295
2386
  <div class="button run">Run</div>
2296
2387
  </div>
2297
2388
 
2298
- <script type="text/paperscript" canvas="canvas-18">
2389
+ <script type="text/paperscript" canvas="canvas-22">
2299
2390
  var unlockedItem = new Path.Circle({
2300
2391
  center: view.center - [35, 0],
2301
2392
  radius: 30,
@@ -2322,7 +2413,7 @@ new PointText({
2322
2413
  justification: 'center'
2323
2414
  });
2324
2415
  </script>
2325
- <div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
2416
+ <div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
2326
2417
  </div>
2327
2418
 
2328
2419
 
@@ -2364,7 +2455,7 @@ new PointText({
2364
2455
  <div class="button run">Run</div>
2365
2456
  </div>
2366
2457
 
2367
- <script type="text/paperscript" canvas="canvas-19">
2458
+ <script type="text/paperscript" canvas="canvas-23">
2368
2459
  var path = new Path.Circle({
2369
2460
  center: [50, 50],
2370
2461
  radius: 20,
@@ -2374,7 +2465,7 @@ var path = new Path.Circle({
2374
2465
  // Hide the path:
2375
2466
  path.visible = false;
2376
2467
  </script>
2377
- <div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
2468
+ <div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
2378
2469
  </div>
2379
2470
 
2380
2471
 
@@ -2422,7 +2513,7 @@ path.visible = false;
2422
2513
  <div class="button run">Run</div>
2423
2514
  </div>
2424
2515
 
2425
- <script type="text/paperscript" canvas="canvas-20">
2516
+ <script type="text/paperscript" canvas="canvas-24">
2426
2517
  // Create a white rectangle in the background
2427
2518
  // with the same dimensions as the view:
2428
2519
  var background = new Path.Rectangle(view.bounds);
@@ -2443,7 +2534,7 @@ var circle2 = new Path.Circle({
2443
2534
  // Set the blend mode of circle2:
2444
2535
  circle2.blendMode = 'multiply';
2445
2536
  </script>
2446
- <div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
2537
+ <div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
2447
2538
  </div>
2448
2539
 
2449
2540
 
@@ -2485,7 +2576,7 @@ circle2.blendMode = 'multiply';
2485
2576
  <div class="button run">Run</div>
2486
2577
  </div>
2487
2578
 
2488
- <script type="text/paperscript" canvas="canvas-21">
2579
+ <script type="text/paperscript" canvas="canvas-25">
2489
2580
  var circle = new Path.Circle({
2490
2581
  center: [80, 50],
2491
2582
  radius: 35,
@@ -2503,10 +2594,41 @@ var circle2 = new Path.Circle({
2503
2594
  // Make circle2 50% transparent:
2504
2595
  circle2.opacity = 0.5;
2505
2596
  </script>
2506
- <div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
2597
+ <div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
2507
2598
  </div>
2508
2599
 
2509
2600
 
2601
+ </div>
2602
+
2603
+ </div>
2604
+ </div>
2605
+
2606
+
2607
+ <div id="guide" class="member">
2608
+ <div class="member-link">
2609
+ <a name="guide" href="#guide"><tt><b>guide</b></tt></a>
2610
+ </div>
2611
+ <div class="member-description hidden">
2612
+
2613
+ <div class="member-text">
2614
+ <p>Specifies whether the item functions as a guide. When set to <code>true</code>, the item is drawn as usual, but left out of hit-tests and mouse interactions. Hit-tests only find guides when <code>options.guides</code> is set, and then only them, see <a href="../classes/Item.html#hittest-point"><tt>hitTest(point[, options])</tt></a>.</p>
2615
+
2616
+
2617
+
2618
+ <ul class="member-list">
2619
+ <h4>Default:</h4>
2620
+ <li><tt>false</tt></li>
2621
+ </ul>
2622
+
2623
+ <ul class="member-list">
2624
+ <h4>Type:</h4>
2625
+ <li>
2626
+ <tt>Boolean</tt>
2627
+ </li>
2628
+ </ul>
2629
+
2630
+
2631
+
2510
2632
  </div>
2511
2633
 
2512
2634
  </div>
@@ -2559,14 +2681,14 @@ circle2.opacity = 0.5;
2559
2681
  <div class="button run">Run</div>
2560
2682
  </div>
2561
2683
 
2562
- <script type="text/paperscript" canvas="canvas-22">
2684
+ <script type="text/paperscript" canvas="canvas-26">
2563
2685
  var path = new Path.Circle({
2564
2686
  center: [80, 50],
2565
2687
  radius: 35
2566
2688
  });
2567
2689
  path.selected = true; // Select the path
2568
2690
  </script>
2569
- <div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
2691
+ <div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
2570
2692
  </div>
2571
2693
 
2572
2694
 
@@ -2697,7 +2819,7 @@ console.log(path.data.pets.length); // 1</code></pre>
2697
2819
  <div class="button run">Run</div>
2698
2820
  </div>
2699
2821
 
2700
- <script type="text/paperscript" canvas="canvas-23">
2822
+ <script type="text/paperscript" canvas="canvas-27">
2701
2823
  // Create a circle at position { x: 10, y: 10 }
2702
2824
  var circle = new Path.Circle({
2703
2825
  center: new Point(10, 10),
@@ -2711,7 +2833,7 @@ circle.position = new Point(20, 20);
2711
2833
  // Move the circle 100 points to the right and 50 points down
2712
2834
  circle.position += new Point(100, 50);
2713
2835
  </script>
2714
- <div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
2836
+ <div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
2715
2837
  </div>
2716
2838
 
2717
2839
 
@@ -2723,7 +2845,7 @@ circle.position += new Point(100, 50);
2723
2845
  <div class="button run">Run</div>
2724
2846
  </div>
2725
2847
 
2726
- <script type="text/paperscript" canvas="canvas-24">
2848
+ <script type="text/paperscript" canvas="canvas-28">
2727
2849
  // Create a circle at position { x: 20, y: 20 }
2728
2850
  var circle = new Path.Circle({
2729
2851
  center: new Point(20, 20),
@@ -2734,7 +2856,7 @@ var circle = new Path.Circle({
2734
2856
  // Move the circle 100 points to the right
2735
2857
  circle.position.x += 100;
2736
2858
  </script>
2737
- <div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
2859
+ <div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
2738
2860
  </div>
2739
2861
 
2740
2862
 
@@ -3097,6 +3219,34 @@ circle.position.x += 100;
3097
3219
 
3098
3220
 
3099
3221
 
3222
+ </div>
3223
+
3224
+ </div>
3225
+ </div>
3226
+
3227
+
3228
+ <div id="scope" class="member">
3229
+ <div class="member-link">
3230
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
3231
+ </div>
3232
+ <div class="member-description hidden">
3233
+
3234
+ <div class="member-text">
3235
+ <p>The scope that this item belongs to, through its project.</p>
3236
+
3237
+ <p>Read only.</p>
3238
+
3239
+
3240
+
3241
+ <ul class="member-list">
3242
+ <h4>Type:</h4>
3243
+ <li>
3244
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
3245
+ </li>
3246
+ </ul>
3247
+
3248
+
3249
+
3100
3250
  </div>
3101
3251
 
3102
3252
  </div>
@@ -3210,6 +3360,7 @@ console.log(group.children[0] == path); // true</code></pre>
3210
3360
 
3211
3361
  <div class="member-text">
3212
3362
  <p>The children items contained within this item. Items that define a <a href="../classes/Item.html#name"><tt>name</tt></a> can also be accessed by name.</p>
3363
+ <p>Only <a href="../classes/Group.html"><tt>Group</tt></a>, <a href="../classes/Layer.html"><tt>Layer</tt></a> and <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items can have children. On all other items, such as <a href="../classes/Path.html"><tt>Path</tt></a>, <a href="../classes/Shape.html"><tt>Shape</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> and <a href="../classes/PointText.html"><tt>PointText</tt></a>, <code>children</code> is <code>undefined</code>.</p>
3213
3364
  <p><b>Please note:</b> The children array should not be modified directly using array functions. To remove single items from the children list, use <a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use <a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
3214
3365
 
3215
3366
 
@@ -3230,7 +3381,7 @@ console.log(group.children[0] == path); // true</code></pre>
3230
3381
  <div class="button run">Run</div>
3231
3382
  </div>
3232
3383
 
3233
- <script type="text/paperscript" canvas="canvas-25">
3384
+ <script type="text/paperscript" canvas="canvas-29">
3234
3385
  var path = new Path.Circle({
3235
3386
  center: [80, 50],
3236
3387
  radius: 35
@@ -3243,7 +3394,7 @@ group.addChild(path);
3243
3394
  // Access the path through the group's children array:
3244
3395
  group.children[0].fillColor = 'red';
3245
3396
  </script>
3246
- <div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
3397
+ <div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
3247
3398
  </div>
3248
3399
 
3249
3400
 
@@ -3255,7 +3406,7 @@ group.children[0].fillColor = 'red';
3255
3406
  <div class="button run">Run</div>
3256
3407
  </div>
3257
3408
 
3258
- <script type="text/paperscript" canvas="canvas-26">
3409
+ <script type="text/paperscript" canvas="canvas-30">
3259
3410
  var path = new Path.Circle({
3260
3411
  center: [80, 50],
3261
3412
  radius: 35
@@ -3270,7 +3421,7 @@ group.addChild(path);
3270
3421
  // The path can be accessed by name:
3271
3422
  group.children['example'].fillColor = 'orange';
3272
3423
  </script>
3273
- <div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
3424
+ <div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
3274
3425
  </div>
3275
3426
 
3276
3427
 
@@ -3282,7 +3433,7 @@ group.children['example'].fillColor = 'orange';
3282
3433
  <div class="button run">Run</div>
3283
3434
  </div>
3284
3435
 
3285
- <script type="text/paperscript" canvas="canvas-27">
3436
+ <script type="text/paperscript" canvas="canvas-31">
3286
3437
  var path = new Path.Circle({
3287
3438
  center: [80, 50],
3288
3439
  radius: 35
@@ -3294,7 +3445,7 @@ group.children = [path];
3294
3445
  // The path is the first child of the group:
3295
3446
  group.firstChild.fillColor = 'green';
3296
3447
  </script>
3297
- <div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
3448
+ <div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
3298
3449
  </div>
3299
3450
 
3300
3451
 
@@ -3471,7 +3622,7 @@ group.firstChild.fillColor = 'green';
3471
3622
  <div class="button run">Run</div>
3472
3623
  </div>
3473
3624
 
3474
- <script type="text/paperscript" canvas="canvas-28">
3625
+ <script type="text/paperscript" canvas="canvas-32">
3475
3626
  // Create a circle shaped path at { x: 80, y: 50 }
3476
3627
  // with a radius of 35:
3477
3628
  var circle = new Path.Circle({
@@ -3482,7 +3633,7 @@ var circle = new Path.Circle({
3482
3633
  // Set its stroke color to RGB red:
3483
3634
  circle.strokeColor = new Color(1, 0, 0);
3484
3635
  </script>
3485
- <div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
3636
+ <div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
3486
3637
  </div>
3487
3638
 
3488
3639
 
@@ -3519,7 +3670,7 @@ circle.strokeColor = new Color(1, 0, 0);
3519
3670
  <div class="button run">Run</div>
3520
3671
  </div>
3521
3672
 
3522
- <script type="text/paperscript" canvas="canvas-29">
3673
+ <script type="text/paperscript" canvas="canvas-33">
3523
3674
  // Create a circle shaped path at { x: 80, y: 50 }
3524
3675
  // with a radius of 35:
3525
3676
  var circle = new Path.Circle({
@@ -3531,7 +3682,7 @@ var circle = new Path.Circle({
3531
3682
  // Set its stroke width to 10:
3532
3683
  circle.strokeWidth = 10;
3533
3684
  </script>
3534
- <div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
3685
+ <div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
3535
3686
  </div>
3536
3687
 
3537
3688
 
@@ -3578,7 +3729,7 @@ circle.strokeWidth = 10;
3578
3729
  <div class="button run">Run</div>
3579
3730
  </div>
3580
3731
 
3581
- <script type="text/paperscript" canvas="canvas-30">
3732
+ <script type="text/paperscript" canvas="canvas-34">
3582
3733
  var line = new Path({
3583
3734
  segments: [[80, 50], [420, 50]],
3584
3735
  strokeColor: 'black',
@@ -3599,7 +3750,7 @@ var line2 = line.clone();
3599
3750
  line2.position.y += 100;
3600
3751
  line2.strokeCap = 'butt';
3601
3752
  </script>
3602
- <div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
3753
+ <div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
3603
3754
  </div>
3604
3755
 
3605
3756
 
@@ -3646,7 +3797,7 @@ line2.strokeCap = 'butt';
3646
3797
  <div class="button run">Run</div>
3647
3798
  </div>
3648
3799
 
3649
- <script type="text/paperscript" canvas="canvas-31">
3800
+ <script type="text/paperscript" canvas="canvas-35">
3650
3801
  var path = new Path({
3651
3802
  segments: [[80, 100], [120, 40], [160, 100]],
3652
3803
  strokeColor: 'black',
@@ -3663,7 +3814,7 @@ var path3 = path2.clone();
3663
3814
  path3.position.x += path3.bounds.width * 1.5;
3664
3815
  path3.strokeJoin = 'bevel';
3665
3816
  </script>
3666
- <div class="canvas"><canvas width="516" height="120" id="canvas-31"></canvas></div>
3817
+ <div class="canvas"><canvas width="516" height="120" id="canvas-35"></canvas></div>
3667
3818
  </div>
3668
3819
 
3669
3820
 
@@ -3711,7 +3862,7 @@ path3.strokeJoin = 'bevel';
3711
3862
  <div class="member-description hidden">
3712
3863
 
3713
3864
  <div class="member-text">
3714
- <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>
3865
+ <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. On text, non-scaling strokes are exact for uniform scaling only, as the glyphs are always stroked through the transformation.</p>
3715
3866
 
3716
3867
 
3717
3868
 
@@ -3767,7 +3918,7 @@ path3.strokeJoin = 'bevel';
3767
3918
  <div class="button run">Run</div>
3768
3919
  </div>
3769
3920
 
3770
- <script type="text/paperscript" canvas="canvas-32">
3921
+ <script type="text/paperscript" canvas="canvas-36">
3771
3922
  var path = new Path.Circle({
3772
3923
  center: [80, 50],
3773
3924
  radius: 40,
@@ -3778,7 +3929,7 @@ var path = new Path.Circle({
3778
3929
  // Set the dashed stroke to [10pt dash, 4pt gap]:
3779
3930
  path.dashArray = [10, 4];
3780
3931
  </script>
3781
- <div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
3932
+ <div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
3782
3933
  </div>
3783
3934
 
3784
3935
 
@@ -3848,7 +3999,7 @@ path.dashArray = [10, 4];
3848
3999
  <div class="button run">Run</div>
3849
4000
  </div>
3850
4001
 
3851
- <script type="text/paperscript" canvas="canvas-33">
4002
+ <script type="text/paperscript" canvas="canvas-37">
3852
4003
  // Create a circle shaped path at { x: 80, y: 50 }
3853
4004
  // with a radius of 35:
3854
4005
  var circle = new Path.Circle({
@@ -3859,7 +4010,7 @@ var circle = new Path.Circle({
3859
4010
  // Set the fill color of the circle to RGB red:
3860
4011
  circle.fillColor = new Color(1, 0, 0);
3861
4012
  </script>
3862
- <div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
4013
+ <div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
3863
4014
  </div>
3864
4015
 
3865
4016
 
@@ -3934,7 +4085,7 @@ circle.fillColor = new Color(1, 0, 0);
3934
4085
  <div class="button run">Run</div>
3935
4086
  </div>
3936
4087
 
3937
- <script type="text/paperscript" canvas="canvas-34">
4088
+ <script type="text/paperscript" canvas="canvas-38">
3938
4089
  var circle = new Path.Circle({
3939
4090
  center: [80, 50],
3940
4091
  radius: 35,
@@ -3947,7 +4098,7 @@ var circle = new Path.Circle({
3947
4098
  shadowOffset: new Point(5, 5)
3948
4099
  });
3949
4100
  </script>
3950
- <div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
4101
+ <div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
3951
4102
  </div>
3952
4103
 
3953
4104
 
@@ -4088,7 +4239,7 @@ var circle = new Path.Circle({
4088
4239
  <div class="button run">Run</div>
4089
4240
  </div>
4090
4241
 
4091
- <script type="text/paperscript" canvas="canvas-35">
4242
+ <script type="text/paperscript" canvas="canvas-39">
4092
4243
  // Create a rectangle shaped path with its top left point at:
4093
4244
  // {x: 50, y: 25} and a size of {width: 50, height: 50}
4094
4245
  var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
@@ -4099,7 +4250,7 @@ path.onFrame = function(event) {
4099
4250
  this.rotate(3);
4100
4251
  }
4101
4252
  </script>
4102
- <div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
4253
+ <div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
4103
4254
  </div>
4104
4255
 
4105
4256
 
@@ -4143,7 +4294,7 @@ path.onFrame = function(event) {
4143
4294
  <div class="button run">Run</div>
4144
4295
  </div>
4145
4296
 
4146
- <script type="text/paperscript" canvas="canvas-36">
4297
+ <script type="text/paperscript" canvas="canvas-40">
4147
4298
  // Create a circle shaped path at the center of the view:
4148
4299
  var path = new Path.Circle({
4149
4300
  center: view.center,
@@ -4157,7 +4308,7 @@ path.onMouseDown = function(event) {
4157
4308
  this.fillColor = 'red';
4158
4309
  }
4159
4310
  </script>
4160
- <div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
4311
+ <div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
4161
4312
  </div>
4162
4313
 
4163
4314
 
@@ -4169,7 +4320,7 @@ path.onMouseDown = function(event) {
4169
4320
  <div class="button run">Run</div>
4170
4321
  </div>
4171
4322
 
4172
- <script type="text/paperscript" canvas="canvas-37">
4323
+ <script type="text/paperscript" canvas="canvas-41">
4173
4324
  // Loop 30 times:
4174
4325
  for (var i = 0; i < 30; i++) {
4175
4326
  // Create a circle shaped path at a random position
@@ -4187,7 +4338,7 @@ for (var i = 0; i < 30; i++) {
4187
4338
  }
4188
4339
  }
4189
4340
  </script>
4190
- <div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
4341
+ <div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
4191
4342
  </div>
4192
4343
 
4193
4344
 
@@ -4231,7 +4382,7 @@ for (var i = 0; i < 30; i++) {
4231
4382
  <div class="button run">Run</div>
4232
4383
  </div>
4233
4384
 
4234
- <script type="text/paperscript" canvas="canvas-38">
4385
+ <script type="text/paperscript" canvas="canvas-42">
4235
4386
  // Create a circle shaped path at the center of the view:
4236
4387
  var path = new Path.Circle({
4237
4388
  center: view.center,
@@ -4244,7 +4395,7 @@ path.onMouseDrag = function(event) {
4244
4395
  path.position += event.delta;
4245
4396
  }
4246
4397
  </script>
4247
- <div class="canvas"><canvas width="516" height="240" id="canvas-38"></canvas></div>
4398
+ <div class="canvas"><canvas width="516" height="240" id="canvas-42"></canvas></div>
4248
4399
  </div>
4249
4400
 
4250
4401
 
@@ -4288,7 +4439,7 @@ path.onMouseDrag = function(event) {
4288
4439
  <div class="button run">Run</div>
4289
4440
  </div>
4290
4441
 
4291
- <script type="text/paperscript" canvas="canvas-39">
4442
+ <script type="text/paperscript" canvas="canvas-43">
4292
4443
  // Create a circle shaped path at the center of the view:
4293
4444
  var path = new Path.Circle({
4294
4445
  center: view.center,
@@ -4302,7 +4453,7 @@ path.onMouseUp = function(event) {
4302
4453
  this.fillColor = 'red';
4303
4454
  }
4304
4455
  </script>
4305
- <div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
4456
+ <div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
4306
4457
  </div>
4307
4458
 
4308
4459
 
@@ -4346,7 +4497,7 @@ path.onMouseUp = function(event) {
4346
4497
  <div class="button run">Run</div>
4347
4498
  </div>
4348
4499
 
4349
- <script type="text/paperscript" canvas="canvas-40">
4500
+ <script type="text/paperscript" canvas="canvas-44">
4350
4501
  // Create a circle shaped path at the center of the view:
4351
4502
  var path = new Path.Circle({
4352
4503
  center: view.center,
@@ -4360,7 +4511,7 @@ path.onClick = function(event) {
4360
4511
  this.fillColor = 'red';
4361
4512
  }
4362
4513
  </script>
4363
- <div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
4514
+ <div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
4364
4515
  </div>
4365
4516
 
4366
4517
 
@@ -4372,7 +4523,7 @@ path.onClick = function(event) {
4372
4523
  <div class="button run">Run</div>
4373
4524
  </div>
4374
4525
 
4375
- <script type="text/paperscript" canvas="canvas-41">
4526
+ <script type="text/paperscript" canvas="canvas-45">
4376
4527
  // Loop 30 times:
4377
4528
  for (var i = 0; i < 30; i++) {
4378
4529
  // Create a circle shaped path at a random position
@@ -4390,7 +4541,7 @@ for (var i = 0; i < 30; i++) {
4390
4541
  }
4391
4542
  }
4392
4543
  </script>
4393
- <div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
4544
+ <div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
4394
4545
  </div>
4395
4546
 
4396
4547
 
@@ -4434,7 +4585,7 @@ for (var i = 0; i < 30; i++) {
4434
4585
  <div class="button run">Run</div>
4435
4586
  </div>
4436
4587
 
4437
- <script type="text/paperscript" canvas="canvas-42">
4588
+ <script type="text/paperscript" canvas="canvas-46">
4438
4589
  // Create a circle shaped path at the center of the view:
4439
4590
  var path = new Path.Circle({
4440
4591
  center: view.center,
@@ -4448,7 +4599,7 @@ path.onDoubleClick = function(event) {
4448
4599
  this.fillColor = 'red';
4449
4600
  }
4450
4601
  </script>
4451
- <div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
4602
+ <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
4452
4603
  </div>
4453
4604
 
4454
4605
 
@@ -4460,7 +4611,7 @@ path.onDoubleClick = function(event) {
4460
4611
  <div class="button run">Run</div>
4461
4612
  </div>
4462
4613
 
4463
- <script type="text/paperscript" canvas="canvas-43">
4614
+ <script type="text/paperscript" canvas="canvas-47">
4464
4615
  // Loop 30 times:
4465
4616
  for (var i = 0; i < 30; i++) {
4466
4617
  // Create a circle shaped path at a random position
@@ -4478,7 +4629,7 @@ for (var i = 0; i < 30; i++) {
4478
4629
  }
4479
4630
  }
4480
4631
  </script>
4481
- <div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
4632
+ <div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
4482
4633
  </div>
4483
4634
 
4484
4635
 
@@ -4522,7 +4673,7 @@ for (var i = 0; i < 30; i++) {
4522
4673
  <div class="button run">Run</div>
4523
4674
  </div>
4524
4675
 
4525
- <script type="text/paperscript" canvas="canvas-44">
4676
+ <script type="text/paperscript" canvas="canvas-48">
4526
4677
  // Create a circle shaped path at the center of the view:
4527
4678
  var path = new Path.Circle({
4528
4679
  center: view.center,
@@ -4536,7 +4687,7 @@ path.onMouseMove = function(event) {
4536
4687
  this.opacity = Math.random();
4537
4688
  }
4538
4689
  </script>
4539
- <div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
4690
+ <div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
4540
4691
  </div>
4541
4692
 
4542
4693
 
@@ -4580,7 +4731,7 @@ path.onMouseMove = function(event) {
4580
4731
  <div class="button run">Run</div>
4581
4732
  </div>
4582
4733
 
4583
- <script type="text/paperscript" canvas="canvas-45">
4734
+ <script type="text/paperscript" canvas="canvas-49">
4584
4735
  // Create a circle shaped path at the center of the view:
4585
4736
  var path = new Path.Circle({
4586
4737
  center: view.center,
@@ -4598,7 +4749,7 @@ path.onMouseLeave = function(event) {
4598
4749
  this.fillColor = 'black';
4599
4750
  }
4600
4751
  </script>
4601
- <div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
4752
+ <div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
4602
4753
  </div>
4603
4754
 
4604
4755
 
@@ -4610,7 +4761,7 @@ path.onMouseLeave = function(event) {
4610
4761
  <div class="button run">Run</div>
4611
4762
  </div>
4612
4763
 
4613
- <script type="text/paperscript" canvas="canvas-46">
4764
+ <script type="text/paperscript" canvas="canvas-50">
4614
4765
  function enter(event) {
4615
4766
  this.fillColor = 'red';
4616
4767
  }
@@ -4632,7 +4783,7 @@ function onMouseDown(event) {
4632
4783
  path.onMouseLeave = leave;
4633
4784
  }
4634
4785
  </script>
4635
- <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
4786
+ <div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
4636
4787
  </div>
4637
4788
 
4638
4789
 
@@ -4676,7 +4827,7 @@ function onMouseDown(event) {
4676
4827
  <div class="button run">Run</div>
4677
4828
  </div>
4678
4829
 
4679
- <script type="text/paperscript" canvas="canvas-47">
4830
+ <script type="text/paperscript" canvas="canvas-51">
4680
4831
  // Create a circle shaped path at the center of the view:
4681
4832
  var path = new Path.Circle({
4682
4833
  center: view.center,
@@ -4689,7 +4840,7 @@ path.onMouseLeave = function(event) {
4689
4840
  this.fillColor = 'red';
4690
4841
  }
4691
4842
  </script>
4692
- <div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
4843
+ <div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
4693
4844
  </div>
4694
4845
 
4695
4846
 
@@ -4748,7 +4899,7 @@ path.onMouseLeave = function(event) {
4748
4899
  <div class="button run">Run</div>
4749
4900
  </div>
4750
4901
 
4751
- <script type="text/paperscript" canvas="canvas-48">
4902
+ <script type="text/paperscript" canvas="canvas-52">
4752
4903
  var circle = new Path.Circle({
4753
4904
  center: [80, 50],
4754
4905
  radius: 35
@@ -4761,7 +4912,7 @@ circle.set({
4761
4912
  selected: true
4762
4913
  });
4763
4914
  </script>
4764
- <div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
4915
+ <div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
4765
4916
  </div>
4766
4917
 
4767
4918
 
@@ -4817,7 +4968,7 @@ circle.set({
4817
4968
  <div class="button run">Run</div>
4818
4969
  </div>
4819
4970
 
4820
- <script type="text/paperscript" canvas="canvas-49">
4971
+ <script type="text/paperscript" canvas="canvas-53">
4821
4972
  var circle = new Path.Circle({
4822
4973
  center: [50, 50],
4823
4974
  radius: 10,
@@ -4832,7 +4983,7 @@ for (var i = 0; i < 20; i++) {
4832
4983
  copy.position.x += i * copy.bounds.width;
4833
4984
  }
4834
4985
  </script>
4835
- <div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
4986
+ <div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
4836
4987
  </div>
4837
4988
 
4838
4989
 
@@ -4958,7 +5109,7 @@ for (var i = 0; i < 20; i++) {
4958
5109
  <div class="button run">Run</div>
4959
5110
  </div>
4960
5111
 
4961
- <script type="text/paperscript" canvas="canvas-50">
5112
+ <script type="text/paperscript" canvas="canvas-54">
4962
5113
  var circle = new Path.Circle({
4963
5114
  center: [50, 50],
4964
5115
  radius: 5,
@@ -4975,7 +5126,7 @@ raster.position.x += 100;
4975
5126
  circle.scale(5);
4976
5127
  raster.scale(5);
4977
5128
  </script>
4978
- <div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
5129
+ <div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
4979
5130
  </div>
4980
5131
 
4981
5132
 
@@ -5029,7 +5180,7 @@ raster.scale(5);
5029
5180
  <div class="button run">Run</div>
5030
5181
  </div>
5031
5182
 
5032
- <script type="text/paperscript" canvas="canvas-51">
5183
+ <script type="text/paperscript" canvas="canvas-55">
5033
5184
  var path = new Path.Star({
5034
5185
  center: [50, 50],
5035
5186
  points: 12,
@@ -5050,7 +5201,7 @@ function onMouseDown(event) {
5050
5201
  }
5051
5202
  }
5052
5203
  </script>
5053
- <div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
5204
+ <div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
5054
5205
  </div>
5055
5206
 
5056
5207
 
@@ -5150,22 +5301,22 @@ function onMouseDown(event) {
5150
5301
  <div class="member-description hidden">
5151
5302
  <div class="member-text">
5152
5303
  <p>Performs a hit-test on the item and its children (if it is a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point, returning the first found hit.</p>
5153
- <p>The options object allows you to control the specifics of the hit- test and may contain a combination of the following values:</p>
5304
+ <p>The options object allows you to control the specifics of the hit-test. Without options, <code>fill</code>, <code>stroke</code> and <code>segments</code> are hit-tested. As soon as an options object is passed, only the hit-tests that it sets to <code>true</code> are performed. It may contain a combination of the following values:</p>
5154
5305
  <ul class="member-list">
5155
5306
  <h4>Options:</h4>
5156
- <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
5307
+ <li><tt>options.tolerance: <tt>Number</tt></tt> &mdash; the tolerance of the hit-test, in project coordinates &mdash;&nbsp;default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
5157
5308
  <li><tt>options.class: <tt>Function</tt></tt> &mdash; only hit-test against a specific item class, or any of its sub-classes, by providing the constructor function against which an <code>instanceof</code> check is performed: <tt>Group</tt>, <tt>Layer</tt>, <tt>Path</tt>, <tt>CompoundPath</tt>, <tt>Shape</tt>, <tt>Raster</tt>, <tt>SymbolItem</tt>, <tt>PointText</tt>, &hellip;</li>
5158
5309
  <li><tt>options.match: <tt>Function</tt></tt> &mdash; a match function to be called for each found hit result: Return <code>true</code> to return the result, <code>false</code> to keep searching</li>
5159
- <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items &mdash;&nbsp;default: <tt>true</tt></li>
5160
- <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width &mdash;&nbsp;default: <tt>true</tt></li>
5161
- <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items &mdash;&nbsp;default: <tt>true</tt></li>
5310
+ <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items</li>
5311
+ <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width</li>
5312
+ <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items</li>
5162
5313
  <li><tt>options.curves: <tt>Boolean</tt></tt> &mdash; hit-test the curves of path items, without taking the stroke color or width into account</li>
5163
5314
  <li><tt>options.handles: <tt>Boolean</tt></tt> &mdash; hit-test for the handles (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</li>
5164
5315
  <li><tt>options.ends: <tt>Boolean</tt></tt> &mdash; only hit-test for the first or last segment points of open path items</li>
5165
5316
  <li><tt>options.position: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Item.html#position"><tt>item.position</tt></a> of of items, which depends on the setting of <a href="../classes/Item.html#pivot"><tt>item.pivot</tt></a></li>
5166
5317
  <li><tt>options.center: <tt>Boolean</tt></tt> &mdash; hit-test the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
5167
5318
  <li><tt>options.bounds: <tt>Boolean</tt></tt> &mdash; hit-test the corners and side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
5168
- <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
5319
+ <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; only hit-test items that have <a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <code>true</code></li>
5169
5320
  <li><tt>options.selected: <tt>Boolean</tt></tt> &mdash; only hit selected items</li>
5170
5321
  </ul>
5171
5322
 
@@ -5404,7 +5555,7 @@ function onMouseDown(event) {
5404
5555
  <h4>Returns:</h4>
5405
5556
 
5406
5557
  <li>
5407
- <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching descendant items
5558
+ <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the list of matching descendant items, in their stacking order from bottom to top, with each item listed before its own descendants
5408
5559
  </li>
5409
5560
 
5410
5561
 
@@ -5577,6 +5728,8 @@ function onMouseDown(event) {
5577
5728
  <li><tt>options.precision: <tt>Number</tt></tt> &mdash; the amount of fractional digits in numbers used in SVG data &mdash;&nbsp;default: <tt>5</tt></li>
5578
5729
  <li><tt>options.matchShapes: <tt>Boolean</tt></tt> &mdash; whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match &mdash;&nbsp;default: <tt>false</tt></li>
5579
5730
  <li><tt>options.embedImages: <tt>Boolean</tt></tt> &mdash; whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. &mdash;&nbsp;default: <tt>true</tt></li>
5731
+ <li><tt>options.reuseImages: <tt>Boolean</tt></tt> &mdash; whether raster images with the same content should only be exported once into the <code>&lt;defs&gt;</code> element, and placed through <code>&lt;use&gt;</code> elements referencing it &mdash;&nbsp;default: <tt>false</tt></li>
5732
+ <li><tt>options.idPrefix: <tt>String</tt></tt> &mdash; a prefix for the ids generated for definitions such as gradients, clip paths and symbols, to keep them unique when several exported SVGs are placed in one document &mdash;&nbsp;default: <tt>&rsquo;&rsquo;</tt></li>
5580
5733
  <li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> &mdash; wether to only include style attributes in the SVG output that differ from their parents, or to always include them (much faster but leading to redundancies). &mdash;&nbsp;default: <tt>true</tt></li>
5581
5734
  </ul>
5582
5735
 
@@ -5619,9 +5772,13 @@ function onMouseDown(event) {
5619
5772
  <div class="member-description hidden">
5620
5773
  <div class="member-text">
5621
5774
  <p>Converts the provided SVG content into Paper.js items and adds them to the this item&rsquo;s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
5775
+ <p><code>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
5622
5776
  <ul class="member-list">
5623
5777
  <h4>Options:</h4>
5624
5778
  <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape items should be expanded to path items &mdash;&nbsp;default: <tt>false</tt></li>
5779
+ <li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
5780
+ value of the rasters created for `<image>` elements, to load their
5781
+ images with CORS</li>
5625
5782
  <li><tt>options.onLoad: <tt>Function</tt></tt> &mdash; the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external resources.</li>
5626
5783
  <li><tt>options.onError: <tt>Function</tt></tt> &mdash; the callback function to call if an error occurs during loading. Only required when loading from external resources.</li>
5627
5784
  <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; whether the imported items should be added to the item that <code>importSVG()</code> is called on &mdash;&nbsp;default: <tt>true</tt></li>
@@ -6097,9 +6254,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6097
6254
  </div>
6098
6255
 
6099
6256
 
6100
- <div id="reduce-options" class="member">
6257
+ <div id="reduce" class="member">
6101
6258
  <div class="member-link">
6102
- <a name="reduce-options" href="#reduce-options"><tt><b>reduce</b>(options)</tt></a>
6259
+ <a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
6103
6260
  </div>
6104
6261
  <div class="member-description hidden">
6105
6262
  <div class="member-text">
@@ -6111,9 +6268,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6111
6268
 
6112
6269
  <li>
6113
6270
  <tt>options:</tt>
6114
-
6115
-
6116
-
6271
+ <tt>Object</tt>
6272
+ &mdash;&nbsp;the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
6273
+ &mdash;&nbsp;optional
6117
6274
  </li>
6118
6275
 
6119
6276
  </ul>
@@ -6355,7 +6512,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6355
6512
  </div>
6356
6513
  <div class="member-description hidden">
6357
6514
  <div class="member-text">
6358
- <p>Checks whether the item has a fill.</p>
6515
+ <p>Checks whether the item has a visible fill, a fill color with an alpha above 0. Hit-tests also hit transparent fills, see <a href="../classes/Item.html#hittest"><tt>hitTest</tt></a>.</p>
6359
6516
 
6360
6517
 
6361
6518
 
@@ -6363,7 +6520,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6363
6520
  <h4>Returns:</h4>
6364
6521
 
6365
6522
  <li>
6366
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
6523
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
6367
6524
  </li>
6368
6525
 
6369
6526
 
@@ -6502,7 +6659,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6502
6659
  </div>
6503
6660
  <div class="member-description hidden">
6504
6661
  <div class="member-text">
6505
- <p>Checks if this item is above the specified item in the stacking order of the project.</p>
6662
+ <p>Checks if this item is above the specified item in the stacking order of the project. If one item is a descendant of the other, neither is above the other and <code>false</code> is returned.</p>
6506
6663
 
6507
6664
 
6508
6665
  <ul class="member-list">
@@ -6543,7 +6700,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6543
6700
  </div>
6544
6701
  <div class="member-description hidden">
6545
6702
  <div class="member-text">
6546
- <p>Checks if the item is below the specified item in the stacking order of the project.</p>
6703
+ <p>Checks if the item is below the specified item in the stacking order of the project. If one item is a descendant of the other, neither is below the other and <code>false</code> is returned.</p>
6547
6704
 
6548
6705
 
6549
6706
  <ul class="member-list">
@@ -6905,7 +7062,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
6905
7062
  <div class="button run">Run</div>
6906
7063
  </div>
6907
7064
 
6908
- <script type="text/paperscript" canvas="canvas-52">
7065
+ <script type="text/paperscript" canvas="canvas-56">
6909
7066
  // Create a rectangle shaped path with its top left
6910
7067
  // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
6911
7068
  var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
@@ -6914,7 +7071,7 @@ path.fillColor = 'black';
6914
7071
  // Rotate the path by 30 degrees:
6915
7072
  path.rotate(30);
6916
7073
  </script>
6917
- <div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
7074
+ <div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
6918
7075
  </div>
6919
7076
 
6920
7077
 
@@ -6926,7 +7083,7 @@ path.rotate(30);
6926
7083
  <div class="button run">Run</div>
6927
7084
  </div>
6928
7085
 
6929
- <script type="text/paperscript" canvas="canvas-53">
7086
+ <script type="text/paperscript" canvas="canvas-57">
6930
7087
  // Create a rectangle shaped path with its top left
6931
7088
  // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
6932
7089
  var topLeft = new Point(175, 50);
@@ -6948,7 +7105,7 @@ function onFrame(event) {
6948
7105
  path.rotate(3, view.center);
6949
7106
  }
6950
7107
  </script>
6951
- <div class="canvas"><canvas width="516" height="200" id="canvas-53"></canvas></div>
7108
+ <div class="canvas"><canvas width="516" height="200" id="canvas-57"></canvas></div>
6952
7109
  </div>
6953
7110
 
6954
7111
 
@@ -6997,7 +7154,7 @@ function onFrame(event) {
6997
7154
  <div class="button run">Run</div>
6998
7155
  </div>
6999
7156
 
7000
- <script type="text/paperscript" canvas="canvas-54">
7157
+ <script type="text/paperscript" canvas="canvas-58">
7001
7158
  // Create a circle shaped path at { x: 80, y: 50 }
7002
7159
  // with a radius of 20:
7003
7160
  var circle = new Path.Circle({
@@ -7009,7 +7166,7 @@ var circle = new Path.Circle({
7009
7166
  // Scale the path by 150% from its center point
7010
7167
  circle.scale(1.5);
7011
7168
  </script>
7012
- <div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
7169
+ <div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
7013
7170
  </div>
7014
7171
 
7015
7172
 
@@ -7021,7 +7178,7 @@ circle.scale(1.5);
7021
7178
  <div class="button run">Run</div>
7022
7179
  </div>
7023
7180
 
7024
- <script type="text/paperscript" canvas="canvas-55">
7181
+ <script type="text/paperscript" canvas="canvas-59">
7025
7182
  // Create a circle shaped path at { x: 80, y: 50 }
7026
7183
  // with a radius of 20:
7027
7184
  var circle = new Path.Circle({
@@ -7033,7 +7190,7 @@ var circle = new Path.Circle({
7033
7190
  // Scale the path 150% from its bottom left corner
7034
7191
  circle.scale(1.5, circle.bounds.bottomLeft);
7035
7192
  </script>
7036
- <div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
7193
+ <div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
7037
7194
  </div>
7038
7195
 
7039
7196
 
@@ -7089,7 +7246,7 @@ circle.scale(1.5, circle.bounds.bottomLeft);
7089
7246
  <div class="button run">Run</div>
7090
7247
  </div>
7091
7248
 
7092
- <script type="text/paperscript" canvas="canvas-56">
7249
+ <script type="text/paperscript" canvas="canvas-60">
7093
7250
  // Create a circle shaped path at { x: 100, y: 50 }
7094
7251
  // with a radius of 20:
7095
7252
  var circle = new Path.Circle({
@@ -7101,7 +7258,7 @@ var circle = new Path.Circle({
7101
7258
  // Scale the path horizontally by 300%
7102
7259
  circle.scale(3, 1);
7103
7260
  </script>
7104
- <div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
7261
+ <div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
7105
7262
  </div>
7106
7263
 
7107
7264
 
@@ -7501,11 +7658,11 @@ circle.scale(3, 1);
7501
7658
 
7502
7659
  <div id="fitbounds-rectangle" class="member">
7503
7660
  <div class="member-link">
7504
- <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
7661
+ <a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
7505
7662
  </div>
7506
7663
  <div class="member-description hidden">
7507
7664
  <div class="member-text">
7508
- <p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> fit within the specified rectangle, without changing its aspect ratio.</p>
7665
+ <p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> are centered in the specified rectangle and fitted to it as described by <code>fit</code>.</p>
7509
7666
 
7510
7667
 
7511
7668
  <ul class="member-list">
@@ -7519,10 +7676,10 @@ circle.scale(3, 1);
7519
7676
  </li>
7520
7677
 
7521
7678
  <li>
7522
- <tt>fill:</tt>
7523
- <tt>Boolean</tt>
7524
-
7525
- &mdash;&nbsp;optional, default: <tt>false</tt>
7679
+ <tt>fit:</tt>
7680
+ <tt>String</tt>⟋<tt>Boolean</tt>
7681
+ &mdash;&nbsp;how to fit the item, as in CSS&rsquo;s <code>object-fit</code>: <code>&#39;contain&#39;</code> fits all of it within the rectangle, <code>&#39;cover&#39;</code> makes it cover the whole rectangle, and <code>&#39;fill&#39;</code> stretches it to the rectangle, changing its aspect ratio. The deprecated <code>true</code> and <code>false</code> stand for <code>&#39;cover&#39;</code> and <code>&#39;contain&#39;</code>.
7682
+ &mdash;&nbsp;optional, default: <tt>&lsquo;contain&rsquo;</tt>
7526
7683
  </li>
7527
7684
 
7528
7685
  </ul>
@@ -7539,7 +7696,7 @@ circle.scale(3, 1);
7539
7696
  <div class="button run">Run</div>
7540
7697
  </div>
7541
7698
 
7542
- <script type="text/paperscript" canvas="canvas-57">
7699
+ <script type="text/paperscript" canvas="canvas-61">
7543
7700
  // Create a rectangle shaped path with its top left corner
7544
7701
  // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
7545
7702
  var path = new Path.Rectangle({
@@ -7560,11 +7717,11 @@ var circlePath = new Path.Circle({
7560
7717
  // the rectangular path:
7561
7718
  circlePath.fitBounds(path.bounds);
7562
7719
  </script>
7563
- <div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
7720
+ <div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
7564
7721
  </div>
7565
7722
 
7566
7723
 
7567
- <h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:</span></h4>
7724
+ <h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
7568
7725
 
7569
7726
  <div class="paperscript split">
7570
7727
 
@@ -7572,7 +7729,7 @@ circlePath.fitBounds(path.bounds);
7572
7729
  <div class="button run">Run</div>
7573
7730
  </div>
7574
7731
 
7575
- <script type="text/paperscript" canvas="canvas-58">
7732
+ <script type="text/paperscript" canvas="canvas-62">
7576
7733
  // Create a rectangle shaped path with its top left corner
7577
7734
  // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
7578
7735
  var path = new Path.Rectangle({
@@ -7591,9 +7748,9 @@ var circlePath = new Path.Circle({
7591
7748
 
7592
7749
  // Fit the circlePath to the bounding rectangle of
7593
7750
  // the rectangular path:
7594
- circlePath.fitBounds(path.bounds, true);
7751
+ circlePath.fitBounds(path.bounds, 'cover');
7595
7752
  </script>
7596
- <div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
7753
+ <div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
7597
7754
  </div>
7598
7755
 
7599
7756
 
@@ -7605,7 +7762,7 @@ circlePath.fitBounds(path.bounds, true);
7605
7762
  <div class="button run">Run</div>
7606
7763
  </div>
7607
7764
 
7608
- <script type="text/paperscript" canvas="canvas-59">
7765
+ <script type="text/paperscript" canvas="canvas-63">
7609
7766
  var path = new Path.Circle({
7610
7767
  center: [80, 50],
7611
7768
  radius: 30,
@@ -7615,7 +7772,7 @@ var path = new Path.Circle({
7615
7772
  // Fit the path to the bounding rectangle of the view:
7616
7773
  path.fitBounds(view.bounds);
7617
7774
  </script>
7618
- <div class="canvas"><canvas width="516" height="200" id="canvas-59"></canvas></div>
7775
+ <div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
7619
7776
  </div>
7620
7777
 
7621
7778
 
@@ -7676,7 +7833,7 @@ path.fitBounds(view.bounds);
7676
7833
  <div class="button run">Run</div>
7677
7834
  </div>
7678
7835
 
7679
- <script type="text/paperscript" canvas="canvas-60">
7836
+ <script type="text/paperscript" canvas="canvas-64">
7680
7837
  // Create a circle shaped path at the center of the view:
7681
7838
  var path = new Path.Circle({
7682
7839
  center: view.center,
@@ -7694,7 +7851,7 @@ path.on('mouseleave', function() {
7694
7851
  this.fillColor = 'black';
7695
7852
  });
7696
7853
  </script>
7697
- <div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
7854
+ <div class="canvas"><canvas width="516" height="100" id="canvas-64"></canvas></div>
7698
7855
  </div>
7699
7856
 
7700
7857
 
@@ -7746,7 +7903,7 @@ path.on('mouseleave', function() {
7746
7903
  <div class="button run">Run</div>
7747
7904
  </div>
7748
7905
 
7749
- <script type="text/paperscript" canvas="canvas-61">
7906
+ <script type="text/paperscript" canvas="canvas-65">
7750
7907
  // Create a circle shaped path at the center of the view:
7751
7908
  var path = new Path.Circle({
7752
7909
  center: view.center,
@@ -7764,7 +7921,7 @@ path.on({
7764
7921
  }
7765
7922
  });
7766
7923
  </script>
7767
- <div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
7924
+ <div class="canvas"><canvas width="516" height="100" id="canvas-65"></canvas></div>
7768
7925
  </div>
7769
7926
 
7770
7927
 
@@ -7776,7 +7933,7 @@ path.on({
7776
7933
  <div class="button run">Run</div>
7777
7934
  </div>
7778
7935
 
7779
- <script type="text/paperscript" canvas="canvas-62">
7936
+ <script type="text/paperscript" canvas="canvas-66">
7780
7937
  var pathHandlers = {
7781
7938
  mouseenter: function(event) {
7782
7939
  this.fillColor = 'red';
@@ -7799,7 +7956,7 @@ function onMouseDown(event) {
7799
7956
  path.on(pathHandlers);
7800
7957
  }
7801
7958
  </script>
7802
- <div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
7959
+ <div class="canvas"><canvas width="516" height="100" id="canvas-66"></canvas></div>
7803
7960
  </div>
7804
7961
 
7805
7962
 
@@ -8027,7 +8184,7 @@ function onMouseDown(event) {
8027
8184
  <div class="button run">Run</div>
8028
8185
  </div>
8029
8186
 
8030
- <script type="text/paperscript" canvas="canvas-63">
8187
+ <script type="text/paperscript" canvas="canvas-67">
8031
8188
  function onMouseDrag(event) {
8032
8189
  // Create a circle shaped path at the mouse position,
8033
8190
  // with a radius of 10:
@@ -8044,7 +8201,7 @@ function onMouseDrag(event) {
8044
8201
  });
8045
8202
  }
8046
8203
  </script>
8047
- <div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
8204
+ <div class="canvas"><canvas width="516" height="200" id="canvas-67"></canvas></div>
8048
8205
  </div>
8049
8206
 
8050
8207
 
@@ -8074,7 +8231,7 @@ function onMouseDrag(event) {
8074
8231
  <div class="button run">Run</div>
8075
8232
  </div>
8076
8233
 
8077
- <script type="text/paperscript" canvas="canvas-64">
8234
+ <script type="text/paperscript" canvas="canvas-68">
8078
8235
  function onMouseMove(event) {
8079
8236
  // Create a circle shaped path at the mouse position,
8080
8237
  // with a radius of 10:
@@ -8088,7 +8245,7 @@ function onMouseMove(event) {
8088
8245
  path.removeOnMove();
8089
8246
  }
8090
8247
  </script>
8091
- <div class="canvas"><canvas width="516" height="200" id="canvas-64"></canvas></div>
8248
+ <div class="canvas"><canvas width="516" height="200" id="canvas-68"></canvas></div>
8092
8249
  </div>
8093
8250
 
8094
8251
 
@@ -8118,7 +8275,7 @@ function onMouseMove(event) {
8118
8275
  <div class="button run">Run</div>
8119
8276
  </div>
8120
8277
 
8121
- <script type="text/paperscript" canvas="canvas-65">
8278
+ <script type="text/paperscript" canvas="canvas-69">
8122
8279
  function onMouseDown(event) {
8123
8280
  // Create a circle shaped path at the mouse position,
8124
8281
  // with a radius of 10:
@@ -8132,7 +8289,7 @@ function onMouseDown(event) {
8132
8289
  path.removeOnDown();
8133
8290
  }
8134
8291
  </script>
8135
- <div class="canvas"><canvas width="516" height="200" id="canvas-65"></canvas></div>
8292
+ <div class="canvas"><canvas width="516" height="200" id="canvas-69"></canvas></div>
8136
8293
  </div>
8137
8294
 
8138
8295
 
@@ -8162,7 +8319,7 @@ function onMouseDown(event) {
8162
8319
  <div class="button run">Run</div>
8163
8320
  </div>
8164
8321
 
8165
- <script type="text/paperscript" canvas="canvas-66">
8322
+ <script type="text/paperscript" canvas="canvas-70">
8166
8323
  function onMouseDrag(event) {
8167
8324
  // Create a circle shaped path at the mouse position,
8168
8325
  // with a radius of 10:
@@ -8176,7 +8333,7 @@ function onMouseDrag(event) {
8176
8333
  path.removeOnDrag();
8177
8334
  }
8178
8335
  </script>
8179
- <div class="canvas"><canvas width="516" height="200" id="canvas-66"></canvas></div>
8336
+ <div class="canvas"><canvas width="516" height="200" id="canvas-70"></canvas></div>
8180
8337
  </div>
8181
8338
 
8182
8339
 
@@ -8206,7 +8363,7 @@ function onMouseDrag(event) {
8206
8363
  <div class="button run">Run</div>
8207
8364
  </div>
8208
8365
 
8209
- <script type="text/paperscript" canvas="canvas-67">
8366
+ <script type="text/paperscript" canvas="canvas-71">
8210
8367
  function onMouseDown(event) {
8211
8368
  // Create a circle shaped path at the mouse position,
8212
8369
  // with a radius of 10:
@@ -8220,7 +8377,7 @@ function onMouseDown(event) {
8220
8377
  path.removeOnUp();
8221
8378
  }
8222
8379
  </script>
8223
- <div class="canvas"><canvas width="516" height="200" id="canvas-67"></canvas></div>
8380
+ <div class="canvas"><canvas width="516" height="200" id="canvas-71"></canvas></div>
8224
8381
  </div>
8225
8382
 
8226
8383
 
@@ -8241,7 +8398,7 @@ function onMouseDown(event) {
8241
8398
  <ul class="member-list">
8242
8399
  <h4>Options:</h4>
8243
8400
  <li><tt>options.duration: <tt>Number</tt></tt> &mdash; the duration of the tweening</li>
8244
- <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
8401
+ <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo; &lsquo;easeInSine&rsquo; &lsquo;easeOutSine&rsquo; &lsquo;easeInOutSine&rsquo; &lsquo;easeInExpo&rsquo; &lsquo;easeOutExpo&rsquo; &lsquo;easeInOutExpo&rsquo; &lsquo;easeInCirc&rsquo; &lsquo;easeOutCirc&rsquo; &lsquo;easeInOutCirc&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
8245
8402
  <li><tt>options.start: <tt>Boolean</tt></tt> &mdash; whether to start tweening automatically &mdash;&nbsp;default: <tt>true</tt></li>
8246
8403
  </ul>
8247
8404
 
@@ -8293,7 +8450,7 @@ function onMouseDown(event) {
8293
8450
  <div class="button run">Run</div>
8294
8451
  </div>
8295
8452
 
8296
- <script type="text/paperscript" canvas="canvas-68">
8453
+ <script type="text/paperscript" canvas="canvas-72">
8297
8454
  var path = new Path.Circle({
8298
8455
  radius: view.bounds.height * 0.4,
8299
8456
  center: view.center
@@ -8304,7 +8461,7 @@ path.tween(
8304
8461
  3000
8305
8462
  );
8306
8463
  </script>
8307
- <div class="canvas"><canvas width="516" height="100" id="canvas-68"></canvas></div>
8464
+ <div class="canvas"><canvas width="516" height="100" id="canvas-72"></canvas></div>
8308
8465
  </div>
8309
8466
 
8310
8467
 
@@ -8316,7 +8473,7 @@ path.tween(
8316
8473
  <div class="button run">Run</div>
8317
8474
  </div>
8318
8475
 
8319
- <script type="text/paperscript" canvas="canvas-69">
8476
+ <script type="text/paperscript" canvas="canvas-73">
8320
8477
  var path = new Shape.Rectangle({
8321
8478
  fillColor: 'red',
8322
8479
  center: [50, view.center.y],
@@ -8331,7 +8488,7 @@ path.tween({
8331
8488
  duration: 2000
8332
8489
  });
8333
8490
  </script>
8334
- <div class="canvas"><canvas width="516" height="100" id="canvas-69"></canvas></div>
8491
+ <div class="canvas"><canvas width="516" height="100" id="canvas-73"></canvas></div>
8335
8492
  </div>
8336
8493
 
8337
8494
 
@@ -8397,7 +8554,7 @@ path.tween({
8397
8554
  <div class="button run">Run</div>
8398
8555
  </div>
8399
8556
 
8400
- <script type="text/paperscript" canvas="canvas-70">
8557
+ <script type="text/paperscript" canvas="canvas-74">
8401
8558
  var path = new Path.Rectangle({
8402
8559
  size: [100, 100],
8403
8560
  position: view.center,
@@ -8411,7 +8568,7 @@ path.tween({
8411
8568
  'segments[2].point.x': '-= 50'
8412
8569
  }, 3000);
8413
8570
  </script>
8414
- <div class="canvas"><canvas width="516" height="200" id="canvas-70"></canvas></div>
8571
+ <div class="canvas"><canvas width="516" height="200" id="canvas-74"></canvas></div>
8415
8572
  </div>
8416
8573
 
8417
8574
 
@@ -8470,7 +8627,7 @@ path.tween({
8470
8627
  <div class="button run">Run</div>
8471
8628
  </div>
8472
8629
 
8473
- <script type="text/paperscript" canvas="canvas-71">
8630
+ <script type="text/paperscript" canvas="canvas-75">
8474
8631
  var path = new Path.Circle({
8475
8632
  fillColor: 'blue',
8476
8633
  radius: view.bounds.height * 0.4,
@@ -8486,7 +8643,7 @@ path.tween(2000).onUpdate = function(event) {
8486
8643
  path.interpolate(pathFrom, pathTo, event.factor)
8487
8644
  };
8488
8645
  </script>
8489
- <div class="canvas"><canvas width="516" height="100" id="canvas-71"></canvas></div>
8646
+ <div class="canvas"><canvas width="516" height="100" id="canvas-75"></canvas></div>
8490
8647
  </div>
8491
8648
 
8492
8649
 
@@ -8607,7 +8764,7 @@ path.tween(2000).onUpdate = function(event) {
8607
8764
  <div class="button run">Run</div>
8608
8765
  </div>
8609
8766
 
8610
- <script type="text/paperscript" canvas="canvas-72">
8767
+ <script type="text/paperscript" canvas="canvas-76">
8611
8768
  var path = new Path.Circle({
8612
8769
  fillColor: 'blue',
8613
8770
  radius: view.bounds.height * 0.4,
@@ -8615,7 +8772,7 @@ var path = new Path.Circle({
8615
8772
  });
8616
8773
  path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
8617
8774
  </script>
8618
- <div class="canvas"><canvas width="516" height="100" id="canvas-72"></canvas></div>
8775
+ <div class="canvas"><canvas width="516" height="100" id="canvas-76"></canvas></div>
8619
8776
  </div>
8620
8777
 
8621
8778
 
@@ -8629,7 +8786,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
8629
8786
 
8630
8787
  <!-- =========================== copyright notice ========================== -->
8631
8788
  <p class="footer">
8632
- Paper.js v0.12.20<br>
8789
+ Paper.js v0.14.0<br>
8633
8790
  Copyright &#169; 2011—2026 <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>
8634
8791
  <div class="content-end"></div>
8635
8792