paper 0.12.20 → 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 +233 -0
- package/README.md +29 -13
- package/dist/docs/assets/js/paper.js +788 -365
- 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 +1 -1
- package/dist/node/self.js +4 -3
- package/dist/paper-core.js +769 -354
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +788 -365
- 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 +1 -8
- package/dist/node/xml.js +0 -40
|
@@ -620,6 +620,8 @@
|
|
|
620
620
|
<div class="member-text">
|
|
621
621
|
<p>The bounding rectangle of the curve including handles.</p>
|
|
622
622
|
|
|
623
|
+
<p>Read only.</p>
|
|
624
|
+
|
|
623
625
|
|
|
624
626
|
|
|
625
627
|
<ul class="member-list">
|
|
@@ -1362,7 +1364,7 @@
|
|
|
1362
1364
|
</div>
|
|
1363
1365
|
<div class="member-description hidden">
|
|
1364
1366
|
<div class="member-text">
|
|
1365
|
-
<p>Calculates the curve location at the specified offset on the curve.</p>
|
|
1367
|
+
<p>Calculates the curve location at the specified offset on the curve, or <code>null</code> if the offset exceeds the length of the curve.</p>
|
|
1366
1368
|
|
|
1367
1369
|
|
|
1368
1370
|
<ul class="member-list">
|
|
@@ -1403,7 +1405,7 @@
|
|
|
1403
1405
|
</div>
|
|
1404
1406
|
<div class="member-description hidden">
|
|
1405
1407
|
<div class="member-text">
|
|
1406
|
-
<p>Calculates the curve location at the specified curve-time parameter on the curve
|
|
1408
|
+
<p>Calculates the curve location at the specified curve-time parameter on the curve, or <code>null</code> if the parameter lies outside of <code>0..1</code>.</p>
|
|
1407
1409
|
|
|
1408
1410
|
|
|
1409
1411
|
<ul class="member-list">
|
|
@@ -1471,7 +1473,7 @@
|
|
|
1471
1473
|
<h4>Returns:</h4>
|
|
1472
1474
|
|
|
1473
1475
|
<li>
|
|
1474
|
-
<tt><tt>Number</tt></tt> — the curve-time parameter at the specified location
|
|
1476
|
+
<tt><tt>Number</tt></tt> — the curve-time parameter at the specified location, or <code>null</code> if the offset exceeds the length of the curve
|
|
1475
1477
|
</li>
|
|
1476
1478
|
|
|
1477
1479
|
|
|
@@ -1594,7 +1596,7 @@
|
|
|
1594
1596
|
<h4>Returns:</h4>
|
|
1595
1597
|
|
|
1596
1598
|
<li>
|
|
1597
|
-
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt> — the curve location of the specified point
|
|
1599
|
+
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>⟋<tt>null</tt></tt> — the curve location of the specified point
|
|
1598
1600
|
</li>
|
|
1599
1601
|
|
|
1600
1602
|
|
|
@@ -1635,7 +1637,7 @@
|
|
|
1635
1637
|
<h4>Returns:</h4>
|
|
1636
1638
|
|
|
1637
1639
|
<li>
|
|
1638
|
-
<tt><tt>Number</tt></tt> — the length of the path up to the specified point
|
|
1640
|
+
<tt><tt>Number</tt>⟋<tt>null</tt></tt> — the length of the path up to the specified point
|
|
1639
1641
|
</li>
|
|
1640
1642
|
|
|
1641
1643
|
|
|
@@ -1676,7 +1678,7 @@
|
|
|
1676
1678
|
<h4>Returns:</h4>
|
|
1677
1679
|
|
|
1678
1680
|
<li>
|
|
1679
|
-
<tt><tt>Number</tt></tt> — the curve-time parameter of the specified point
|
|
1681
|
+
<tt><tt>Number</tt>⟋<tt>null</tt></tt> — the curve-time parameter of the specified point
|
|
1680
1682
|
</li>
|
|
1681
1683
|
|
|
1682
1684
|
|
|
@@ -2314,7 +2316,7 @@
|
|
|
2314
2316
|
|
|
2315
2317
|
<!-- =========================== copyright notice ========================== -->
|
|
2316
2318
|
<p class="footer">
|
|
2317
|
-
Paper.js v0.
|
|
2319
|
+
Paper.js v0.13.0<br>
|
|
2318
2320
|
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>
|
|
2319
2321
|
<div class="content-end"></div>
|
|
2320
2322
|
|
|
@@ -663,7 +663,7 @@
|
|
|
663
663
|
|
|
664
664
|
<!-- =========================== copyright notice ========================== -->
|
|
665
665
|
<p class="footer">
|
|
666
|
-
Paper.js v0.
|
|
666
|
+
Paper.js v0.13.0<br>
|
|
667
667
|
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>
|
|
668
668
|
<div class="content-end"></div>
|
|
669
669
|
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
|
|
168
168
|
<!-- =========================== copyright notice ========================== -->
|
|
169
169
|
<p class="footer">
|
|
170
|
-
Paper.js v0.
|
|
170
|
+
Paper.js v0.13.0<br>
|
|
171
171
|
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>
|
|
172
172
|
<div class="content-end"></div>
|
|
173
173
|
|
|
@@ -231,7 +231,7 @@ path.fillColor = {
|
|
|
231
231
|
|
|
232
232
|
<!-- =========================== copyright notice ========================== -->
|
|
233
233
|
<p class="footer">
|
|
234
|
-
Paper.js v0.
|
|
234
|
+
Paper.js v0.13.0<br>
|
|
235
235
|
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>
|
|
236
236
|
<div class="content-end"></div>
|
|
237
237
|
|
|
@@ -264,7 +264,7 @@ function onFrame(event) {
|
|
|
264
264
|
|
|
265
265
|
<!-- =========================== copyright notice ========================== -->
|
|
266
266
|
<p class="footer">
|
|
267
|
-
Paper.js v0.
|
|
267
|
+
Paper.js v0.13.0<br>
|
|
268
268
|
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>
|
|
269
269
|
<div class="content-end"></div>
|
|
270
270
|
|
|
@@ -390,6 +390,7 @@ group.children['example'].fillColor = 'red';
|
|
|
390
390
|
|
|
391
391
|
<div class="member-text">
|
|
392
392
|
<p>The path style of the item.</p>
|
|
393
|
+
<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>
|
|
393
394
|
|
|
394
395
|
|
|
395
396
|
|
|
@@ -732,6 +733,37 @@ circle2.opacity = 0.5;
|
|
|
732
733
|
</div>
|
|
733
734
|
|
|
734
735
|
|
|
736
|
+
</div>
|
|
737
|
+
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
|
|
741
|
+
|
|
742
|
+
<div id="guide" class="member">
|
|
743
|
+
<div class="member-link">
|
|
744
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="member-description hidden">
|
|
747
|
+
|
|
748
|
+
<div class="member-text">
|
|
749
|
+
<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>
|
|
750
|
+
|
|
751
|
+
|
|
752
|
+
|
|
753
|
+
<ul class="member-list">
|
|
754
|
+
<h4>Default:</h4>
|
|
755
|
+
<li><tt>false</tt></li>
|
|
756
|
+
</ul>
|
|
757
|
+
|
|
758
|
+
<ul class="member-list">
|
|
759
|
+
<h4>Type:</h4>
|
|
760
|
+
<li>
|
|
761
|
+
<tt>Boolean</tt>
|
|
762
|
+
</li>
|
|
763
|
+
</ul>
|
|
764
|
+
|
|
765
|
+
|
|
766
|
+
|
|
735
767
|
</div>
|
|
736
768
|
|
|
737
769
|
</div>
|
|
@@ -1435,6 +1467,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1435
1467
|
|
|
1436
1468
|
<div class="member-text">
|
|
1437
1469
|
<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>
|
|
1470
|
+
<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>
|
|
1438
1471
|
<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>
|
|
1439
1472
|
|
|
1440
1473
|
|
|
@@ -3375,22 +3408,22 @@ function onMouseDown(event) {
|
|
|
3375
3408
|
<div class="member-description hidden">
|
|
3376
3409
|
<div class="member-text">
|
|
3377
3410
|
<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>
|
|
3378
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
3411
|
+
<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>
|
|
3379
3412
|
<ul class="member-list">
|
|
3380
3413
|
<h4>Options:</h4>
|
|
3381
|
-
<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>
|
|
3414
|
+
<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>
|
|
3382
3415
|
<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>
|
|
3383
3416
|
<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>
|
|
3384
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
3385
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
3386
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
3417
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3418
|
+
<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>
|
|
3419
|
+
<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>
|
|
3387
3420
|
<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>
|
|
3388
3421
|
<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>
|
|
3389
3422
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3390
3423
|
<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>
|
|
3391
3424
|
<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>
|
|
3392
3425
|
<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>
|
|
3393
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
3426
|
+
<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>
|
|
3394
3427
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3395
3428
|
</ul>
|
|
3396
3429
|
|
|
@@ -3629,7 +3662,7 @@ function onMouseDown(event) {
|
|
|
3629
3662
|
<h4>Returns:</h4>
|
|
3630
3663
|
|
|
3631
3664
|
<li>
|
|
3632
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3665
|
+
<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
|
|
3633
3666
|
</li>
|
|
3634
3667
|
|
|
3635
3668
|
|
|
@@ -3802,6 +3835,8 @@ function onMouseDown(event) {
|
|
|
3802
3835
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
3803
3836
|
<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>
|
|
3804
3837
|
<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>
|
|
3838
|
+
<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>
|
|
3839
|
+
<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>
|
|
3805
3840
|
<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>
|
|
3806
3841
|
</ul>
|
|
3807
3842
|
|
|
@@ -3844,9 +3879,13 @@ function onMouseDown(event) {
|
|
|
3844
3879
|
<div class="member-description hidden">
|
|
3845
3880
|
<div class="member-text">
|
|
3846
3881
|
<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>
|
|
3882
|
+
<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>
|
|
3847
3883
|
<ul class="member-list">
|
|
3848
3884
|
<h4>Options:</h4>
|
|
3849
3885
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3886
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3887
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3888
|
+
images with CORS</li>
|
|
3850
3889
|
<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>
|
|
3851
3890
|
<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>
|
|
3852
3891
|
<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>
|
|
@@ -4322,9 +4361,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4322
4361
|
</div>
|
|
4323
4362
|
|
|
4324
4363
|
|
|
4325
|
-
<div id="reduce
|
|
4364
|
+
<div id="reduce" class="member">
|
|
4326
4365
|
<div class="member-link">
|
|
4327
|
-
<a name="reduce
|
|
4366
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4328
4367
|
</div>
|
|
4329
4368
|
<div class="member-description hidden">
|
|
4330
4369
|
<div class="member-text">
|
|
@@ -4336,9 +4375,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4336
4375
|
|
|
4337
4376
|
<li>
|
|
4338
4377
|
<tt>options:</tt>
|
|
4339
|
-
|
|
4340
|
-
|
|
4341
|
-
|
|
4378
|
+
<tt>Object</tt>
|
|
4379
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4380
|
+
— optional
|
|
4342
4381
|
</li>
|
|
4343
4382
|
|
|
4344
4383
|
</ul>
|
|
@@ -4727,7 +4766,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4727
4766
|
</div>
|
|
4728
4767
|
<div class="member-description hidden">
|
|
4729
4768
|
<div class="member-text">
|
|
4730
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4769
|
+
<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>
|
|
4731
4770
|
|
|
4732
4771
|
|
|
4733
4772
|
<ul class="member-list">
|
|
@@ -4768,7 +4807,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4768
4807
|
</div>
|
|
4769
4808
|
<div class="member-description hidden">
|
|
4770
4809
|
<div class="member-text">
|
|
4771
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4810
|
+
<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>
|
|
4772
4811
|
|
|
4773
4812
|
|
|
4774
4813
|
<ul class="member-list">
|
|
@@ -5726,11 +5765,11 @@ circle.scale(3, 1);
|
|
|
5726
5765
|
|
|
5727
5766
|
<div id="fitbounds-rectangle" class="member">
|
|
5728
5767
|
<div class="member-link">
|
|
5729
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5768
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5730
5769
|
</div>
|
|
5731
5770
|
<div class="member-description hidden">
|
|
5732
5771
|
<div class="member-text">
|
|
5733
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5772
|
+
<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>
|
|
5734
5773
|
|
|
5735
5774
|
|
|
5736
5775
|
<ul class="member-list">
|
|
@@ -5744,10 +5783,10 @@ circle.scale(3, 1);
|
|
|
5744
5783
|
</li>
|
|
5745
5784
|
|
|
5746
5785
|
<li>
|
|
5747
|
-
<tt>
|
|
5748
|
-
<tt>Boolean</tt>
|
|
5749
|
-
|
|
5750
|
-
— optional, default: <tt
|
|
5786
|
+
<tt>fit:</tt>
|
|
5787
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5788
|
+
— 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>.
|
|
5789
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5751
5790
|
</li>
|
|
5752
5791
|
|
|
5753
5792
|
</ul>
|
|
@@ -5789,7 +5828,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5789
5828
|
</div>
|
|
5790
5829
|
|
|
5791
5830
|
|
|
5792
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5831
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
5793
5832
|
|
|
5794
5833
|
<div class="paperscript split">
|
|
5795
5834
|
|
|
@@ -5816,7 +5855,7 @@ var circlePath = new Path.Circle({
|
|
|
5816
5855
|
|
|
5817
5856
|
// Fit the circlePath to the bounding rectangle of
|
|
5818
5857
|
// the rectangular path:
|
|
5819
|
-
circlePath.fitBounds(path.bounds,
|
|
5858
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5820
5859
|
</script>
|
|
5821
5860
|
<div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
|
|
5822
5861
|
</div>
|
|
@@ -6466,7 +6505,7 @@ function onMouseDown(event) {
|
|
|
6466
6505
|
<ul class="member-list">
|
|
6467
6506
|
<h4>Options:</h4>
|
|
6468
6507
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
6469
|
-
<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>
|
|
6508
|
+
<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>
|
|
6470
6509
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6471
6510
|
</ul>
|
|
6472
6511
|
|
|
@@ -6854,7 +6893,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6854
6893
|
|
|
6855
6894
|
<!-- =========================== copyright notice ========================== -->
|
|
6856
6895
|
<p class="footer">
|
|
6857
|
-
Paper.js v0.
|
|
6896
|
+
Paper.js v0.13.0<br>
|
|
6858
6897
|
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>
|
|
6859
6898
|
<div class="content-end"></div>
|
|
6860
6899
|
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
|
|
231
231
|
<!-- =========================== copyright notice ========================== -->
|
|
232
232
|
<p class="footer">
|
|
233
|
-
Paper.js v0.
|
|
233
|
+
Paper.js v0.13.0<br>
|
|
234
234
|
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>
|
|
235
235
|
<div class="content-end"></div>
|
|
236
236
|
|
|
@@ -147,6 +147,7 @@ group.children['example'].fillColor = 'red';
|
|
|
147
147
|
|
|
148
148
|
<div class="member-text">
|
|
149
149
|
<p>The path style of the item.</p>
|
|
150
|
+
<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>
|
|
150
151
|
|
|
151
152
|
|
|
152
153
|
|
|
@@ -489,6 +490,37 @@ circle2.opacity = 0.5;
|
|
|
489
490
|
</div>
|
|
490
491
|
|
|
491
492
|
|
|
493
|
+
</div>
|
|
494
|
+
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
<div id="guide" class="member">
|
|
500
|
+
<div class="member-link">
|
|
501
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
502
|
+
</div>
|
|
503
|
+
<div class="member-description hidden">
|
|
504
|
+
|
|
505
|
+
<div class="member-text">
|
|
506
|
+
<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>
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
|
|
510
|
+
<ul class="member-list">
|
|
511
|
+
<h4>Default:</h4>
|
|
512
|
+
<li><tt>false</tt></li>
|
|
513
|
+
</ul>
|
|
514
|
+
|
|
515
|
+
<ul class="member-list">
|
|
516
|
+
<h4>Type:</h4>
|
|
517
|
+
<li>
|
|
518
|
+
<tt>Boolean</tt>
|
|
519
|
+
</li>
|
|
520
|
+
</ul>
|
|
521
|
+
|
|
522
|
+
|
|
523
|
+
|
|
492
524
|
</div>
|
|
493
525
|
|
|
494
526
|
</div>
|
|
@@ -1192,6 +1224,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1192
1224
|
|
|
1193
1225
|
<div class="member-text">
|
|
1194
1226
|
<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>
|
|
1227
|
+
<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>
|
|
1195
1228
|
<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>
|
|
1196
1229
|
|
|
1197
1230
|
|
|
@@ -3136,22 +3169,22 @@ function onMouseDown(event) {
|
|
|
3136
3169
|
<div class="member-description hidden">
|
|
3137
3170
|
<div class="member-text">
|
|
3138
3171
|
<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>
|
|
3139
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
3172
|
+
<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>
|
|
3140
3173
|
<ul class="member-list">
|
|
3141
3174
|
<h4>Options:</h4>
|
|
3142
|
-
<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>
|
|
3175
|
+
<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>
|
|
3143
3176
|
<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>
|
|
3144
3177
|
<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>
|
|
3145
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
3146
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
3147
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
3178
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3179
|
+
<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>
|
|
3180
|
+
<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>
|
|
3148
3181
|
<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>
|
|
3149
3182
|
<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>
|
|
3150
3183
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3151
3184
|
<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>
|
|
3152
3185
|
<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>
|
|
3153
3186
|
<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>
|
|
3154
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
3187
|
+
<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>
|
|
3155
3188
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3156
3189
|
</ul>
|
|
3157
3190
|
|
|
@@ -3390,7 +3423,7 @@ function onMouseDown(event) {
|
|
|
3390
3423
|
<h4>Returns:</h4>
|
|
3391
3424
|
|
|
3392
3425
|
<li>
|
|
3393
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3426
|
+
<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
|
|
3394
3427
|
</li>
|
|
3395
3428
|
|
|
3396
3429
|
|
|
@@ -3563,6 +3596,8 @@ function onMouseDown(event) {
|
|
|
3563
3596
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
3564
3597
|
<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>
|
|
3565
3598
|
<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>
|
|
3599
|
+
<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>
|
|
3600
|
+
<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>
|
|
3566
3601
|
<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>
|
|
3567
3602
|
</ul>
|
|
3568
3603
|
|
|
@@ -3605,9 +3640,13 @@ function onMouseDown(event) {
|
|
|
3605
3640
|
<div class="member-description hidden">
|
|
3606
3641
|
<div class="member-text">
|
|
3607
3642
|
<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>
|
|
3643
|
+
<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>
|
|
3608
3644
|
<ul class="member-list">
|
|
3609
3645
|
<h4>Options:</h4>
|
|
3610
3646
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3647
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3648
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3649
|
+
images with CORS</li>
|
|
3611
3650
|
<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>
|
|
3612
3651
|
<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>
|
|
3613
3652
|
<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>
|
|
@@ -4083,9 +4122,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4083
4122
|
</div>
|
|
4084
4123
|
|
|
4085
4124
|
|
|
4086
|
-
<div id="reduce
|
|
4125
|
+
<div id="reduce" class="member">
|
|
4087
4126
|
<div class="member-link">
|
|
4088
|
-
<a name="reduce
|
|
4127
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4089
4128
|
</div>
|
|
4090
4129
|
<div class="member-description hidden">
|
|
4091
4130
|
<div class="member-text">
|
|
@@ -4097,9 +4136,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4097
4136
|
|
|
4098
4137
|
<li>
|
|
4099
4138
|
<tt>options:</tt>
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4139
|
+
<tt>Object</tt>
|
|
4140
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4141
|
+
— optional
|
|
4103
4142
|
</li>
|
|
4104
4143
|
|
|
4105
4144
|
</ul>
|
|
@@ -4488,7 +4527,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4488
4527
|
</div>
|
|
4489
4528
|
<div class="member-description hidden">
|
|
4490
4529
|
<div class="member-text">
|
|
4491
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4530
|
+
<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>
|
|
4492
4531
|
|
|
4493
4532
|
|
|
4494
4533
|
<ul class="member-list">
|
|
@@ -4529,7 +4568,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4529
4568
|
</div>
|
|
4530
4569
|
<div class="member-description hidden">
|
|
4531
4570
|
<div class="member-text">
|
|
4532
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4571
|
+
<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>
|
|
4533
4572
|
|
|
4534
4573
|
|
|
4535
4574
|
<ul class="member-list">
|
|
@@ -5487,11 +5526,11 @@ circle.scale(3, 1);
|
|
|
5487
5526
|
|
|
5488
5527
|
<div id="fitbounds-rectangle" class="member">
|
|
5489
5528
|
<div class="member-link">
|
|
5490
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5529
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5491
5530
|
</div>
|
|
5492
5531
|
<div class="member-description hidden">
|
|
5493
5532
|
<div class="member-text">
|
|
5494
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5533
|
+
<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>
|
|
5495
5534
|
|
|
5496
5535
|
|
|
5497
5536
|
<ul class="member-list">
|
|
@@ -5505,10 +5544,10 @@ circle.scale(3, 1);
|
|
|
5505
5544
|
</li>
|
|
5506
5545
|
|
|
5507
5546
|
<li>
|
|
5508
|
-
<tt>
|
|
5509
|
-
<tt>Boolean</tt>
|
|
5510
|
-
|
|
5511
|
-
— optional, default: <tt
|
|
5547
|
+
<tt>fit:</tt>
|
|
5548
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5549
|
+
— 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>.
|
|
5550
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5512
5551
|
</li>
|
|
5513
5552
|
|
|
5514
5553
|
</ul>
|
|
@@ -5550,7 +5589,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5550
5589
|
</div>
|
|
5551
5590
|
|
|
5552
5591
|
|
|
5553
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5592
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
5554
5593
|
|
|
5555
5594
|
<div class="paperscript split">
|
|
5556
5595
|
|
|
@@ -5577,7 +5616,7 @@ var circlePath = new Path.Circle({
|
|
|
5577
5616
|
|
|
5578
5617
|
// Fit the circlePath to the bounding rectangle of
|
|
5579
5618
|
// the rectangular path:
|
|
5580
|
-
circlePath.fitBounds(path.bounds,
|
|
5619
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5581
5620
|
</script>
|
|
5582
5621
|
<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
|
|
5583
5622
|
</div>
|
|
@@ -6227,7 +6266,7 @@ function onMouseDown(event) {
|
|
|
6227
6266
|
<ul class="member-list">
|
|
6228
6267
|
<h4>Options:</h4>
|
|
6229
6268
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
6230
|
-
<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>
|
|
6269
|
+
<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>
|
|
6231
6270
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6232
6271
|
</ul>
|
|
6233
6272
|
|
|
@@ -6618,7 +6657,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6618
6657
|
|
|
6619
6658
|
<!-- =========================== copyright notice ========================== -->
|
|
6620
6659
|
<p class="footer">
|
|
6621
|
-
Paper.js v0.
|
|
6660
|
+
Paper.js v0.13.0<br>
|
|
6622
6661
|
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>
|
|
6623
6662
|
<div class="content-end"></div>
|
|
6624
6663
|
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
<!-- =========================== copyright notice ========================== -->
|
|
132
132
|
<p class="footer">
|
|
133
|
-
Paper.js v0.
|
|
133
|
+
Paper.js v0.13.0<br>
|
|
134
134
|
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>
|
|
135
135
|
<div class="content-end"></div>
|
|
136
136
|
|
|
@@ -299,7 +299,7 @@
|
|
|
299
299
|
|
|
300
300
|
<!-- =========================== copyright notice ========================== -->
|
|
301
301
|
<p class="footer">
|
|
302
|
-
Paper.js v0.
|
|
302
|
+
Paper.js v0.13.0<br>
|
|
303
303
|
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>
|
|
304
304
|
<div class="content-end"></div>
|
|
305
305
|
|