paper 0.12.19 → 0.13.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 +250 -0
- package/README.md +34 -27
- package/dist/docs/assets/js/paper.js +791 -366
- package/dist/docs/classes/Color.html +63 -47
- package/dist/docs/classes/CompoundPath.html +162 -59
- 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 +63 -24
- package/dist/docs/classes/HitResult.html +1 -1
- package/dist/docs/classes/Item.html +63 -24
- package/dist/docs/classes/Key.html +1 -1
- package/dist/docs/classes/KeyEvent.html +1 -1
- package/dist/docs/classes/Layer.html +63 -24
- package/dist/docs/classes/Matrix.html +1 -1
- package/dist/docs/classes/MouseEvent.html +1 -1
- package/dist/docs/classes/PaperScope.html +87 -1
- package/dist/docs/classes/PaperScript.html +1 -1
- package/dist/docs/classes/Path.html +174 -68
- package/dist/docs/classes/PathItem.html +280 -177
- package/dist/docs/classes/Point.html +143 -21
- package/dist/docs/classes/PointText.html +94 -24
- package/dist/docs/classes/Project.html +14 -8
- package/dist/docs/classes/Raster.html +93 -35
- package/dist/docs/classes/Rectangle.html +12 -11
- package/dist/docs/classes/Segment.html +1 -1
- package/dist/docs/classes/Shape.html +63 -24
- package/dist/docs/classes/Size.html +81 -21
- package/dist/docs/classes/Style.html +34 -2
- package/dist/docs/classes/SymbolDefinition.html +1 -1
- package/dist/docs/classes/SymbolItem.html +64 -25
- package/dist/docs/classes/TextItem.html +94 -24
- package/dist/docs/classes/Tool.html +2 -1
- package/dist/docs/classes/ToolEvent.html +27 -1
- package/dist/docs/classes/Tween.html +1 -1
- package/dist/docs/classes/View.html +203 -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 +10 -8
- package/dist/node/self.js +13 -4
- package/dist/paper-core.js +772 -355
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +791 -366
- package/dist/paper-full.min.js +3 -3
- package/dist/paper.d.ts +324 -73
- package/examples/Rasters/Smoothing.html +1 -1
- package/package.json +5 -11
- package/dist/node/xml.js +0 -40
|
@@ -354,7 +354,8 @@ console.log(point); // { x: 100, y: 50 }</code></pre>
|
|
|
354
354
|
|
|
355
355
|
|
|
356
356
|
<pre><code>var point = new Point(5, 10);
|
|
357
|
-
var result = point + 20;
|
|
357
|
+
var result = point + 20; // PaperScript
|
|
358
|
+
var result = point.add(20); // JavaScript
|
|
358
359
|
console.log(result); // {x: 25, y: 30}</code></pre>
|
|
359
360
|
|
|
360
361
|
</div>
|
|
@@ -395,7 +396,8 @@ console.log(result); // {x: 25, y: 30}</code></pre>
|
|
|
395
396
|
|
|
396
397
|
<pre><code>var point1 = new Point(5, 10);
|
|
397
398
|
var point2 = new Point(10, 20);
|
|
398
|
-
var result = point1 + point2;
|
|
399
|
+
var result = point1 + point2; // PaperScript
|
|
400
|
+
var result = point1.add(point2); // JavaScript
|
|
399
401
|
console.log(result); // {x: 15, y: 30}</code></pre>
|
|
400
402
|
|
|
401
403
|
</div>
|
|
@@ -445,7 +447,8 @@ console.log(result); // {x: 15, y: 30}</code></pre>
|
|
|
445
447
|
|
|
446
448
|
|
|
447
449
|
<pre><code>var point = new Point(10, 20);
|
|
448
|
-
var result = point - 5;
|
|
450
|
+
var result = point - 5; // PaperScript
|
|
451
|
+
var result = point.subtract(5); // JavaScript
|
|
449
452
|
console.log(result); // {x: 5, y: 15}</code></pre>
|
|
450
453
|
|
|
451
454
|
</div>
|
|
@@ -486,7 +489,8 @@ console.log(result); // {x: 5, y: 15}</code></pre>
|
|
|
486
489
|
|
|
487
490
|
<pre><code>var firstPoint = new Point(10, 20);
|
|
488
491
|
var secondPoint = new Point(5, 5);
|
|
489
|
-
var result = firstPoint - secondPoint;
|
|
492
|
+
var result = firstPoint - secondPoint; // PaperScript
|
|
493
|
+
var result = firstPoint.subtract(secondPoint); // JavaScript
|
|
490
494
|
console.log(result); // {x: 5, y: 15}</code></pre>
|
|
491
495
|
|
|
492
496
|
</div>
|
|
@@ -536,7 +540,8 @@ console.log(result); // {x: 5, y: 15}</code></pre>
|
|
|
536
540
|
|
|
537
541
|
|
|
538
542
|
<pre><code>var point = new Point(10, 20);
|
|
539
|
-
var result = point * 2;
|
|
543
|
+
var result = point * 2; // PaperScript
|
|
544
|
+
var result = point.multiply(2); // JavaScript
|
|
540
545
|
console.log(result); // {x: 20, y: 40}</code></pre>
|
|
541
546
|
|
|
542
547
|
</div>
|
|
@@ -577,7 +582,8 @@ console.log(result); // {x: 20, y: 40}</code></pre>
|
|
|
577
582
|
|
|
578
583
|
<pre><code>var firstPoint = new Point(5, 10);
|
|
579
584
|
var secondPoint = new Point(4, 2);
|
|
580
|
-
var result = firstPoint * secondPoint;
|
|
585
|
+
var result = firstPoint * secondPoint; // PaperScript
|
|
586
|
+
var result = firstPoint.multiply(secondPoint); // JavaScript
|
|
581
587
|
console.log(result); // {x: 20, y: 20}</code></pre>
|
|
582
588
|
|
|
583
589
|
</div>
|
|
@@ -627,7 +633,8 @@ console.log(result); // {x: 20, y: 20}</code></pre>
|
|
|
627
633
|
|
|
628
634
|
|
|
629
635
|
<pre><code>var point = new Point(10, 20);
|
|
630
|
-
var result = point / 2;
|
|
636
|
+
var result = point / 2; // PaperScript
|
|
637
|
+
var result = point.divide(2); // JavaScript
|
|
631
638
|
console.log(result); // {x: 5, y: 10}</code></pre>
|
|
632
639
|
|
|
633
640
|
</div>
|
|
@@ -668,7 +675,8 @@ console.log(result); // {x: 5, y: 10}</code></pre>
|
|
|
668
675
|
|
|
669
676
|
<pre><code>var firstPoint = new Point(8, 10);
|
|
670
677
|
var secondPoint = new Point(2, 5);
|
|
671
|
-
var result = firstPoint / secondPoint;
|
|
678
|
+
var result = firstPoint / secondPoint; // PaperScript
|
|
679
|
+
var result = firstPoint.divide(secondPoint); // JavaScript
|
|
672
680
|
console.log(result); // {x: 4, y: 2}</code></pre>
|
|
673
681
|
|
|
674
682
|
</div>
|
|
@@ -718,7 +726,9 @@ console.log(result); // {x: 4, y: 2}</code></pre>
|
|
|
718
726
|
|
|
719
727
|
|
|
720
728
|
<pre><code>var point = new Point(12, 6);
|
|
721
|
-
|
|
729
|
+
var result = point % 5; // PaperScript
|
|
730
|
+
var result = point.modulo(5); // JavaScript
|
|
731
|
+
console.log(result); // {x: 2, y: 1}</code></pre>
|
|
722
732
|
|
|
723
733
|
</div>
|
|
724
734
|
|
|
@@ -757,7 +767,9 @@ console.log(point % 5); // {x: 2, y: 1}</code></pre>
|
|
|
757
767
|
|
|
758
768
|
|
|
759
769
|
<pre><code>var point = new Point(12, 6);
|
|
760
|
-
|
|
770
|
+
var result = point % new Point(5, 2); // PaperScript
|
|
771
|
+
var result = point.modulo(new Point(5, 2)); // JavaScript
|
|
772
|
+
console.log(result); // {x: 2, y: 0}</code></pre>
|
|
761
773
|
|
|
762
774
|
</div>
|
|
763
775
|
|
|
@@ -1473,6 +1485,42 @@ point2.x = 1; // doesn't change point1.x</code></pre>
|
|
|
1473
1485
|
|
|
1474
1486
|
|
|
1475
1487
|
|
|
1488
|
+
</div>
|
|
1489
|
+
</div>
|
|
1490
|
+
</div>
|
|
1491
|
+
|
|
1492
|
+
|
|
1493
|
+
<div id="negate" class="member">
|
|
1494
|
+
<div class="member-link">
|
|
1495
|
+
<a name="negate" href="#negate"><tt><b>negate</b>()</tt></a>
|
|
1496
|
+
</div>
|
|
1497
|
+
<div class="member-description hidden">
|
|
1498
|
+
<div class="member-text">
|
|
1499
|
+
<p>Returns a new point with both coordinates negated. PaperScript uses it for the unary minus operator. The object itself is not modified!</p>
|
|
1500
|
+
|
|
1501
|
+
|
|
1502
|
+
|
|
1503
|
+
<ul class="member-list">
|
|
1504
|
+
<h4>Returns:</h4>
|
|
1505
|
+
|
|
1506
|
+
<li>
|
|
1507
|
+
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the negation of the point as a new point
|
|
1508
|
+
</li>
|
|
1509
|
+
|
|
1510
|
+
|
|
1511
|
+
</ul>
|
|
1512
|
+
|
|
1513
|
+
|
|
1514
|
+
|
|
1515
|
+
|
|
1516
|
+
<h4>Example:</h4>
|
|
1517
|
+
|
|
1518
|
+
|
|
1519
|
+
<pre><code>var point = new Point(12, -6);
|
|
1520
|
+
var result = -point; // PaperScript
|
|
1521
|
+
var result = point.negate(); // JavaScript
|
|
1522
|
+
console.log(result); // {x: -12, y: 6}</code></pre>
|
|
1523
|
+
|
|
1476
1524
|
</div>
|
|
1477
1525
|
</div>
|
|
1478
1526
|
</div>
|
|
@@ -2023,6 +2071,68 @@ console.log(absPoint); // {x: 5, y: 10}</code></pre>
|
|
|
2023
2071
|
</div>
|
|
2024
2072
|
</div>
|
|
2025
2073
|
|
|
2074
|
+
|
|
2075
|
+
<div id="clamp-min-max" class="member">
|
|
2076
|
+
<div class="member-link">
|
|
2077
|
+
<a name="clamp-min-max" href="#clamp-min-max"><tt><b>clamp</b>(min, max)</tt></a>
|
|
2078
|
+
</div>
|
|
2079
|
+
<div class="member-description hidden">
|
|
2080
|
+
<div class="member-text">
|
|
2081
|
+
<p>Returns a new point with the <a href="../classes/Point.html#x"><tt>x</tt></a> and <a href="../classes/Point.html#y"><tt>y</tt></a> values clamped to the range between the given minimum and maximum points. The object itself is not modified!</p>
|
|
2082
|
+
|
|
2083
|
+
|
|
2084
|
+
<ul class="member-list">
|
|
2085
|
+
<h4>Parameters:</h4>
|
|
2086
|
+
|
|
2087
|
+
<li>
|
|
2088
|
+
<tt>min:</tt>
|
|
2089
|
+
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
2090
|
+
— the point with the smallest values
|
|
2091
|
+
|
|
2092
|
+
</li>
|
|
2093
|
+
|
|
2094
|
+
<li>
|
|
2095
|
+
<tt>max:</tt>
|
|
2096
|
+
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
2097
|
+
— the point with the largest values
|
|
2098
|
+
|
|
2099
|
+
</li>
|
|
2100
|
+
|
|
2101
|
+
</ul>
|
|
2102
|
+
|
|
2103
|
+
|
|
2104
|
+
<ul class="member-list">
|
|
2105
|
+
<h4>Returns:</h4>
|
|
2106
|
+
|
|
2107
|
+
<li>
|
|
2108
|
+
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the clamped point as a new point
|
|
2109
|
+
</li>
|
|
2110
|
+
|
|
2111
|
+
|
|
2112
|
+
</ul>
|
|
2113
|
+
|
|
2114
|
+
|
|
2115
|
+
|
|
2116
|
+
|
|
2117
|
+
<h4>Example:</h4>
|
|
2118
|
+
|
|
2119
|
+
|
|
2120
|
+
<pre><code>var point = new Point(-5, 150);
|
|
2121
|
+
var clampPoint = point.clamp(new Point(0, 0), new Point(100, 100));
|
|
2122
|
+
console.log(clampPoint); // {x: 0, y: 100}</code></pre>
|
|
2123
|
+
|
|
2124
|
+
<h4>Example:<span class="description">Keep a point inside a rectangle:</span></h4>
|
|
2125
|
+
|
|
2126
|
+
|
|
2127
|
+
<pre><code>var rect = new Rectangle(10, 20, 100, 50);
|
|
2128
|
+
var point = new Point(200, 40);
|
|
2129
|
+
var clampPoint = point.clamp(rect.topLeft, rect.bottomRight);
|
|
2130
|
+
console.log(clampPoint); // {x: 110, y: 40}</code></pre>
|
|
2131
|
+
|
|
2132
|
+
</div>
|
|
2133
|
+
</div>
|
|
2134
|
+
</div>
|
|
2135
|
+
|
|
2026
2136
|
|
|
2027
2137
|
|
|
2028
2138
|
<h3>Math Operator Functions</h3>
|
|
@@ -2068,7 +2178,8 @@ console.log(absPoint); // {x: 5, y: 10}</code></pre>
|
|
|
2068
2178
|
|
|
2069
2179
|
|
|
2070
2180
|
<pre><code>var point = new Point(5, 10);
|
|
2071
|
-
var result = point + 20;
|
|
2181
|
+
var result = point + 20; // PaperScript
|
|
2182
|
+
var result = point.add(20); // JavaScript
|
|
2072
2183
|
console.log(result); // {x: 25, y: 30}</code></pre>
|
|
2073
2184
|
|
|
2074
2185
|
</div>
|
|
@@ -2116,7 +2227,8 @@ console.log(result); // {x: 25, y: 30}</code></pre>
|
|
|
2116
2227
|
|
|
2117
2228
|
<pre><code>var point1 = new Point(5, 10);
|
|
2118
2229
|
var point2 = new Point(10, 20);
|
|
2119
|
-
var result = point1 + point2;
|
|
2230
|
+
var result = point1 + point2; // PaperScript
|
|
2231
|
+
var result = point1.add(point2); // JavaScript
|
|
2120
2232
|
console.log(result); // {x: 15, y: 30}</code></pre>
|
|
2121
2233
|
|
|
2122
2234
|
</div>
|
|
@@ -2166,7 +2278,8 @@ console.log(result); // {x: 15, y: 30}</code></pre>
|
|
|
2166
2278
|
|
|
2167
2279
|
|
|
2168
2280
|
<pre><code>var point = new Point(10, 20);
|
|
2169
|
-
var result = point - 5;
|
|
2281
|
+
var result = point - 5; // PaperScript
|
|
2282
|
+
var result = point.subtract(5); // JavaScript
|
|
2170
2283
|
console.log(result); // {x: 5, y: 15}</code></pre>
|
|
2171
2284
|
|
|
2172
2285
|
</div>
|
|
@@ -2214,7 +2327,8 @@ console.log(result); // {x: 5, y: 15}</code></pre>
|
|
|
2214
2327
|
|
|
2215
2328
|
<pre><code>var firstPoint = new Point(10, 20);
|
|
2216
2329
|
var secondPoint = new Point(5, 5);
|
|
2217
|
-
var result = firstPoint - secondPoint;
|
|
2330
|
+
var result = firstPoint - secondPoint; // PaperScript
|
|
2331
|
+
var result = firstPoint.subtract(secondPoint); // JavaScript
|
|
2218
2332
|
console.log(result); // {x: 5, y: 15}</code></pre>
|
|
2219
2333
|
|
|
2220
2334
|
</div>
|
|
@@ -2264,7 +2378,8 @@ console.log(result); // {x: 5, y: 15}</code></pre>
|
|
|
2264
2378
|
|
|
2265
2379
|
|
|
2266
2380
|
<pre><code>var point = new Point(10, 20);
|
|
2267
|
-
var result = point * 2;
|
|
2381
|
+
var result = point * 2; // PaperScript
|
|
2382
|
+
var result = point.multiply(2); // JavaScript
|
|
2268
2383
|
console.log(result); // {x: 20, y: 40}</code></pre>
|
|
2269
2384
|
|
|
2270
2385
|
</div>
|
|
@@ -2312,7 +2427,8 @@ console.log(result); // {x: 20, y: 40}</code></pre>
|
|
|
2312
2427
|
|
|
2313
2428
|
<pre><code>var firstPoint = new Point(5, 10);
|
|
2314
2429
|
var secondPoint = new Point(4, 2);
|
|
2315
|
-
var result = firstPoint * secondPoint;
|
|
2430
|
+
var result = firstPoint * secondPoint; // PaperScript
|
|
2431
|
+
var result = firstPoint.multiply(secondPoint); // JavaScript
|
|
2316
2432
|
console.log(result); // {x: 20, y: 20}</code></pre>
|
|
2317
2433
|
|
|
2318
2434
|
</div>
|
|
@@ -2362,7 +2478,8 @@ console.log(result); // {x: 20, y: 20}</code></pre>
|
|
|
2362
2478
|
|
|
2363
2479
|
|
|
2364
2480
|
<pre><code>var point = new Point(10, 20);
|
|
2365
|
-
var result = point / 2;
|
|
2481
|
+
var result = point / 2; // PaperScript
|
|
2482
|
+
var result = point.divide(2); // JavaScript
|
|
2366
2483
|
console.log(result); // {x: 5, y: 10}</code></pre>
|
|
2367
2484
|
|
|
2368
2485
|
</div>
|
|
@@ -2410,7 +2527,8 @@ console.log(result); // {x: 5, y: 10}</code></pre>
|
|
|
2410
2527
|
|
|
2411
2528
|
<pre><code>var firstPoint = new Point(8, 10);
|
|
2412
2529
|
var secondPoint = new Point(2, 5);
|
|
2413
|
-
var result = firstPoint / secondPoint;
|
|
2530
|
+
var result = firstPoint / secondPoint; // PaperScript
|
|
2531
|
+
var result = firstPoint.divide(secondPoint); // JavaScript
|
|
2414
2532
|
console.log(result); // {x: 4, y: 2}</code></pre>
|
|
2415
2533
|
|
|
2416
2534
|
</div>
|
|
@@ -2460,7 +2578,9 @@ console.log(result); // {x: 4, y: 2}</code></pre>
|
|
|
2460
2578
|
|
|
2461
2579
|
|
|
2462
2580
|
<pre><code>var point = new Point(12, 6);
|
|
2463
|
-
|
|
2581
|
+
var result = point % 5; // PaperScript
|
|
2582
|
+
var result = point.modulo(5); // JavaScript
|
|
2583
|
+
console.log(result); // {x: 2, y: 1}</code></pre>
|
|
2464
2584
|
|
|
2465
2585
|
</div>
|
|
2466
2586
|
</div>
|
|
@@ -2506,7 +2626,9 @@ console.log(point % 5); // {x: 2, y: 1}</code></pre>
|
|
|
2506
2626
|
|
|
2507
2627
|
|
|
2508
2628
|
<pre><code>var point = new Point(12, 6);
|
|
2509
|
-
|
|
2629
|
+
var result = point % new Point(5, 2); // PaperScript
|
|
2630
|
+
var result = point.modulo(new Point(5, 2)); // JavaScript
|
|
2631
|
+
console.log(result); // {x: 2, y: 0}</code></pre>
|
|
2510
2632
|
|
|
2511
2633
|
</div>
|
|
2512
2634
|
</div>
|
|
@@ -2690,7 +2812,7 @@ var point = maxPoint * randomPoint;</code></pre>
|
|
|
2690
2812
|
|
|
2691
2813
|
<!-- =========================== copyright notice ========================== -->
|
|
2692
2814
|
<p class="footer">
|
|
2693
|
-
Paper.js v0.
|
|
2815
|
+
Paper.js v0.13.0<br>
|
|
2694
2816
|
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>
|
|
2695
2817
|
<div class="content-end"></div>
|
|
2696
2818
|
|
|
@@ -313,6 +313,7 @@ group.children['example'].fillColor = 'red';
|
|
|
313
313
|
|
|
314
314
|
<div class="member-text">
|
|
315
315
|
<p>The path style of the item.</p>
|
|
316
|
+
<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>
|
|
316
317
|
|
|
317
318
|
|
|
318
319
|
|
|
@@ -655,6 +656,37 @@ circle2.opacity = 0.5;
|
|
|
655
656
|
</div>
|
|
656
657
|
|
|
657
658
|
|
|
659
|
+
</div>
|
|
660
|
+
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
|
|
664
|
+
|
|
665
|
+
<div id="guide" class="member">
|
|
666
|
+
<div class="member-link">
|
|
667
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="member-description hidden">
|
|
670
|
+
|
|
671
|
+
<div class="member-text">
|
|
672
|
+
<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>
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
|
|
676
|
+
<ul class="member-list">
|
|
677
|
+
<h4>Default:</h4>
|
|
678
|
+
<li><tt>false</tt></li>
|
|
679
|
+
</ul>
|
|
680
|
+
|
|
681
|
+
<ul class="member-list">
|
|
682
|
+
<h4>Type:</h4>
|
|
683
|
+
<li>
|
|
684
|
+
<tt>Boolean</tt>
|
|
685
|
+
</li>
|
|
686
|
+
</ul>
|
|
687
|
+
|
|
688
|
+
|
|
689
|
+
|
|
658
690
|
</div>
|
|
659
691
|
|
|
660
692
|
</div>
|
|
@@ -1358,6 +1390,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1358
1390
|
|
|
1359
1391
|
<div class="member-text">
|
|
1360
1392
|
<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>
|
|
1393
|
+
<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>
|
|
1361
1394
|
<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>
|
|
1362
1395
|
|
|
1363
1396
|
|
|
@@ -3298,22 +3331,22 @@ function onMouseDown(event) {
|
|
|
3298
3331
|
<div class="member-description hidden">
|
|
3299
3332
|
<div class="member-text">
|
|
3300
3333
|
<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>
|
|
3301
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
3334
|
+
<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>
|
|
3302
3335
|
<ul class="member-list">
|
|
3303
3336
|
<h4>Options:</h4>
|
|
3304
|
-
<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>
|
|
3337
|
+
<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>
|
|
3305
3338
|
<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>
|
|
3306
3339
|
<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>
|
|
3307
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
3308
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
3309
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
3340
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3341
|
+
<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>
|
|
3342
|
+
<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>
|
|
3310
3343
|
<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>
|
|
3311
3344
|
<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>
|
|
3312
3345
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3313
3346
|
<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>
|
|
3314
3347
|
<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>
|
|
3315
3348
|
<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>
|
|
3316
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
3349
|
+
<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>
|
|
3317
3350
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3318
3351
|
</ul>
|
|
3319
3352
|
|
|
@@ -3552,7 +3585,7 @@ function onMouseDown(event) {
|
|
|
3552
3585
|
<h4>Returns:</h4>
|
|
3553
3586
|
|
|
3554
3587
|
<li>
|
|
3555
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3588
|
+
<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
|
|
3556
3589
|
</li>
|
|
3557
3590
|
|
|
3558
3591
|
|
|
@@ -3725,6 +3758,8 @@ function onMouseDown(event) {
|
|
|
3725
3758
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
3726
3759
|
<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>
|
|
3727
3760
|
<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>
|
|
3761
|
+
<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>
|
|
3762
|
+
<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>
|
|
3728
3763
|
<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>
|
|
3729
3764
|
</ul>
|
|
3730
3765
|
|
|
@@ -3767,9 +3802,13 @@ function onMouseDown(event) {
|
|
|
3767
3802
|
<div class="member-description hidden">
|
|
3768
3803
|
<div class="member-text">
|
|
3769
3804
|
<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>
|
|
3805
|
+
<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>
|
|
3770
3806
|
<ul class="member-list">
|
|
3771
3807
|
<h4>Options:</h4>
|
|
3772
3808
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3809
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3810
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3811
|
+
images with CORS</li>
|
|
3773
3812
|
<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>
|
|
3774
3813
|
<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>
|
|
3775
3814
|
<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>
|
|
@@ -4245,9 +4284,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4245
4284
|
</div>
|
|
4246
4285
|
|
|
4247
4286
|
|
|
4248
|
-
<div id="reduce
|
|
4287
|
+
<div id="reduce" class="member">
|
|
4249
4288
|
<div class="member-link">
|
|
4250
|
-
<a name="reduce
|
|
4289
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4251
4290
|
</div>
|
|
4252
4291
|
<div class="member-description hidden">
|
|
4253
4292
|
<div class="member-text">
|
|
@@ -4259,9 +4298,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4259
4298
|
|
|
4260
4299
|
<li>
|
|
4261
4300
|
<tt>options:</tt>
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4301
|
+
<tt>Object</tt>
|
|
4302
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4303
|
+
— optional
|
|
4265
4304
|
</li>
|
|
4266
4305
|
|
|
4267
4306
|
</ul>
|
|
@@ -4650,7 +4689,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4650
4689
|
</div>
|
|
4651
4690
|
<div class="member-description hidden">
|
|
4652
4691
|
<div class="member-text">
|
|
4653
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4692
|
+
<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>
|
|
4654
4693
|
|
|
4655
4694
|
|
|
4656
4695
|
<ul class="member-list">
|
|
@@ -4691,7 +4730,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4691
4730
|
</div>
|
|
4692
4731
|
<div class="member-description hidden">
|
|
4693
4732
|
<div class="member-text">
|
|
4694
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4733
|
+
<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>
|
|
4695
4734
|
|
|
4696
4735
|
|
|
4697
4736
|
<ul class="member-list">
|
|
@@ -5649,11 +5688,11 @@ circle.scale(3, 1);
|
|
|
5649
5688
|
|
|
5650
5689
|
<div id="fitbounds-rectangle" class="member">
|
|
5651
5690
|
<div class="member-link">
|
|
5652
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5691
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5653
5692
|
</div>
|
|
5654
5693
|
<div class="member-description hidden">
|
|
5655
5694
|
<div class="member-text">
|
|
5656
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5695
|
+
<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>
|
|
5657
5696
|
|
|
5658
5697
|
|
|
5659
5698
|
<ul class="member-list">
|
|
@@ -5667,10 +5706,10 @@ circle.scale(3, 1);
|
|
|
5667
5706
|
</li>
|
|
5668
5707
|
|
|
5669
5708
|
<li>
|
|
5670
|
-
<tt>
|
|
5671
|
-
<tt>Boolean</tt>
|
|
5672
|
-
|
|
5673
|
-
— optional, default: <tt
|
|
5709
|
+
<tt>fit:</tt>
|
|
5710
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5711
|
+
— 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>.
|
|
5712
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5674
5713
|
</li>
|
|
5675
5714
|
|
|
5676
5715
|
</ul>
|
|
@@ -5712,7 +5751,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5712
5751
|
</div>
|
|
5713
5752
|
|
|
5714
5753
|
|
|
5715
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5754
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
5716
5755
|
|
|
5717
5756
|
<div class="paperscript split">
|
|
5718
5757
|
|
|
@@ -5739,7 +5778,7 @@ var circlePath = new Path.Circle({
|
|
|
5739
5778
|
|
|
5740
5779
|
// Fit the circlePath to the bounding rectangle of
|
|
5741
5780
|
// the rectangular path:
|
|
5742
|
-
circlePath.fitBounds(path.bounds,
|
|
5781
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5743
5782
|
</script>
|
|
5744
5783
|
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
|
|
5745
5784
|
</div>
|
|
@@ -6389,7 +6428,7 @@ function onMouseDown(event) {
|
|
|
6389
6428
|
<ul class="member-list">
|
|
6390
6429
|
<h4>Options:</h4>
|
|
6391
6430
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
6392
|
-
<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>
|
|
6431
|
+
<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>
|
|
6393
6432
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6394
6433
|
</ul>
|
|
6395
6434
|
|
|
@@ -6969,6 +7008,37 @@ function onMouseMove(event) {
|
|
|
6969
7008
|
|
|
6970
7009
|
|
|
6971
7010
|
|
|
7011
|
+
</div>
|
|
7012
|
+
|
|
7013
|
+
</div>
|
|
7014
|
+
</div>
|
|
7015
|
+
|
|
7016
|
+
|
|
7017
|
+
<div id="tracking" class="member">
|
|
7018
|
+
<div class="member-link">
|
|
7019
|
+
<a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
|
|
7020
|
+
</div>
|
|
7021
|
+
<div class="member-description hidden">
|
|
7022
|
+
|
|
7023
|
+
<div class="member-text">
|
|
7024
|
+
<p>The tracking of text content: the space added after each character, in thousandths of an em, as in Adobe Illustrator and InDesign. A tracking of 100 adds a tenth of the font size.</p>
|
|
7025
|
+
|
|
7026
|
+
|
|
7027
|
+
|
|
7028
|
+
<ul class="member-list">
|
|
7029
|
+
<h4>Default:</h4>
|
|
7030
|
+
<li><tt>0</tt></li>
|
|
7031
|
+
</ul>
|
|
7032
|
+
|
|
7033
|
+
<ul class="member-list">
|
|
7034
|
+
<h4>Type:</h4>
|
|
7035
|
+
<li>
|
|
7036
|
+
<tt>Number</tt>
|
|
7037
|
+
</li>
|
|
7038
|
+
</ul>
|
|
7039
|
+
|
|
7040
|
+
|
|
7041
|
+
|
|
6972
7042
|
</div>
|
|
6973
7043
|
|
|
6974
7044
|
</div>
|
|
@@ -7019,7 +7089,7 @@ function onMouseMove(event) {
|
|
|
7019
7089
|
|
|
7020
7090
|
<!-- =========================== copyright notice ========================== -->
|
|
7021
7091
|
<p class="footer">
|
|
7022
|
-
Paper.js v0.
|
|
7092
|
+
Paper.js v0.13.0<br>
|
|
7023
7093
|
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>
|
|
7024
7094
|
<div class="content-end"></div>
|
|
7025
7095
|
|