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.
- package/CHANGELOG.md +318 -0
- package/README.md +45 -26
- package/dist/docs/assets/js/paper.js +1210 -481
- package/dist/docs/classes/ChangeFlag.html +384 -0
- package/dist/docs/classes/Color.html +63 -47
- package/dist/docs/classes/CompoundPath.html +219 -62
- package/dist/docs/classes/Curve.html +9 -7
- package/dist/docs/classes/CurveLocation.html +1 -1
- package/dist/docs/classes/Event.html +1 -1
- package/dist/docs/classes/Gradient.html +1 -1
- package/dist/docs/classes/GradientStop.html +1 -1
- package/dist/docs/classes/Group.html +151 -27
- package/dist/docs/classes/HitResult.html +3 -2
- package/dist/docs/classes/HostItem.html +6721 -0
- package/dist/docs/classes/Item.html +120 -27
- package/dist/docs/classes/Key.html +1 -1
- package/dist/docs/classes/KeyEvent.html +1 -1
- package/dist/docs/classes/Layer.html +151 -27
- package/dist/docs/classes/Matrix.html +1 -1
- package/dist/docs/classes/MouseEvent.html +1 -1
- package/dist/docs/classes/PaperScope.html +88 -1
- package/dist/docs/classes/PaperScript.html +2 -1
- package/dist/docs/classes/Path.html +232 -72
- package/dist/docs/classes/PathItem.html +337 -180
- package/dist/docs/classes/Point.html +143 -21
- package/dist/docs/classes/PointText.html +151 -27
- package/dist/docs/classes/Project.html +201 -8
- package/dist/docs/classes/Raster.html +150 -38
- package/dist/docs/classes/Rectangle.html +12 -11
- package/dist/docs/classes/Segment.html +1 -1
- package/dist/docs/classes/Shape.html +120 -27
- package/dist/docs/classes/Size.html +81 -21
- package/dist/docs/classes/Style.html +35 -3
- package/dist/docs/classes/SymbolDefinition.html +1 -1
- package/dist/docs/classes/SymbolItem.html +121 -28
- package/dist/docs/classes/TextItem.html +151 -27
- package/dist/docs/classes/Tool.html +127 -1
- package/dist/docs/classes/ToolEvent.html +27 -1
- package/dist/docs/classes/Tween.html +1 -1
- package/dist/docs/classes/View.html +345 -10
- package/dist/docs/classes/global.html +1 -1
- package/dist/docs/classes/index.html +2 -2
- package/dist/docs/index.html +1 -1
- package/dist/node/canvas.js +1 -1
- package/dist/node/self.js +4 -3
- package/dist/paper-core.js +1182 -465
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +1210 -481
- package/dist/paper-full.min.js +3 -3
- package/dist/paper-sourced.js +18631 -0
- package/dist/paper.d.ts +606 -78
- package/examples/Rasters/Smoothing.html +1 -1
- package/package.json +6 -17
- 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
|
|
506
|
+
<div id="getintersections" class="member">
|
|
443
507
|
<div class="member-link">
|
|
444
|
-
<a name="getintersections
|
|
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
|
— the other item to find the intersections with
|
|
458
|
-
|
|
522
|
+
— 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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’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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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> — the tolerance of the hit-test — 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> — the tolerance of the hit-test, in project coordinates — 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> — 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>, …</li>
|
|
5158
5309
|
<li><tt>options.match: <tt>Function</tt></tt> — 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> — hit-test the fill of items
|
|
5160
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
5161
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
5310
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
5311
|
+
<li><tt>options.stroke: <tt>Boolean</tt></tt> — 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> — 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> — 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> — 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> — 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> — 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> — 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> — 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> — hit-test items that have <
|
|
5319
|
+
<li><tt>options.guides: <tt>Boolean</tt></tt> — 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> — 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> — the list of matching descendant items
|
|
5558
|
+
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — 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> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
5578
5729
|
<li><tt>options.matchShapes: <tt>Boolean</tt></tt> — whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match — default: <tt>false</tt></li>
|
|
5579
5730
|
<li><tt>options.embedImages: <tt>Boolean</tt></tt> — whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. — default: <tt>true</tt></li>
|
|
5731
|
+
<li><tt>options.reuseImages: <tt>Boolean</tt></tt> — whether raster images with the same content should only be exported once into the <code><defs></code> element, and placed through <code><use></code> elements referencing it — default: <tt>false</tt></li>
|
|
5732
|
+
<li><tt>options.idPrefix: <tt>String</tt></tt> — 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 — default: <tt>’’</tt></li>
|
|
5580
5733
|
<li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> — 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). — 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’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><symbol></code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code><use></code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code><use></code> elements inherit don’t reach the symbols’ content.</p>
|
|
5622
5776
|
<ul class="member-list">
|
|
5623
5777
|
<h4>Options:</h4>
|
|
5624
5778
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — 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> — 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> — 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> — whether the imported items should be added to the item that <code>importSVG()</code> is called on — 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
|
|
6257
|
+
<div id="reduce" class="member">
|
|
6101
6258
|
<div class="member-link">
|
|
6102
|
-
<a name="reduce
|
|
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
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
6273
|
+
— 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
|
|
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> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
6523
|
+
<tt><tt>Boolean</tt></tt> — <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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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[,
|
|
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>
|
|
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>
|
|
7523
|
-
<tt>Boolean</tt>
|
|
7524
|
-
|
|
7525
|
-
— optional, default: <tt
|
|
7679
|
+
<tt>fit:</tt>
|
|
7680
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
7681
|
+
— how to fit the item, as in CSS’s <code>object-fit</code>: <code>'contain'</code> fits all of it within the rectangle, <code>'cover'</code> makes it cover the whole rectangle, and <code>'fill'</code> stretches it to the rectangle, changing its aspect ratio. The deprecated <code>true</code> and <code>false</code> stand for <code>'cover'</code> and <code>'contain'</code>.
|
|
7682
|
+
— optional, default: <tt>‘contain’</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-
|
|
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-
|
|
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
|
|
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-
|
|
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,
|
|
7751
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
7595
7752
|
</script>
|
|
7596
|
-
<div class="canvas"><canvas width="516" height="100" id="canvas-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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> — the duration of the tweening</li>
|
|
8244
|
-
<li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> — an easing function or the type of the easing: <tt>‘linear’ ‘easeInQuad’ ‘easeOutQuad’ ‘easeInOutQuad’ ‘easeInCubic’ ‘easeOutCubic’ ‘easeInOutCubic’ ‘easeInQuart’ ‘easeOutQuart’ ‘easeInOutQuart’ ‘easeInQuint’ ‘easeOutQuint’ ‘easeInOutQuint’</tt> — default: <tt>‘linear’</tt></li>
|
|
8401
|
+
<li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> — an easing function or the type of the easing: <tt>‘linear’ ‘easeInQuad’ ‘easeOutQuad’ ‘easeInOutQuad’ ‘easeInCubic’ ‘easeOutCubic’ ‘easeInOutCubic’ ‘easeInQuart’ ‘easeOutQuart’ ‘easeInOutQuart’ ‘easeInQuint’ ‘easeOutQuint’ ‘easeInOutQuint’ ‘easeInSine’ ‘easeOutSine’ ‘easeInOutSine’ ‘easeInExpo’ ‘easeOutExpo’ ‘easeInOutExpo’ ‘easeInCirc’ ‘easeOutCirc’ ‘easeInOutCirc’</tt> — default: <tt>‘linear’</tt></li>
|
|
8245
8402
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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.
|
|
8789
|
+
Paper.js v0.14.0<br>
|
|
8633
8790
|
Copyright © 2011—2026 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
8634
8791
|
<div class="content-end"></div>
|
|
8635
8792
|
|