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
|
@@ -187,6 +187,32 @@ console.log(project.activeLayer == firstLayer); // true</code></pre>
|
|
|
187
187
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
188
188
|
|
|
189
189
|
|
|
190
|
+
<div id="key" class="member">
|
|
191
|
+
<div class="member-link">
|
|
192
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="member-description hidden">
|
|
195
|
+
|
|
196
|
+
<div class="member-text">
|
|
197
|
+
<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>
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
<ul class="member-list">
|
|
202
|
+
<h4>Type:</h4>
|
|
203
|
+
<li>
|
|
204
|
+
<tt>Number</tt>
|
|
205
|
+
</li>
|
|
206
|
+
</ul>
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
|
|
190
216
|
<div id="id" class="member">
|
|
191
217
|
<div class="member-link">
|
|
192
218
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -306,6 +332,7 @@ group.children['example'].fillColor = 'red';
|
|
|
306
332
|
|
|
307
333
|
<div class="member-text">
|
|
308
334
|
<p>The path style of the item.</p>
|
|
335
|
+
<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>
|
|
309
336
|
|
|
310
337
|
|
|
311
338
|
|
|
@@ -648,6 +675,37 @@ circle2.opacity = 0.5;
|
|
|
648
675
|
</div>
|
|
649
676
|
|
|
650
677
|
|
|
678
|
+
</div>
|
|
679
|
+
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
|
|
683
|
+
|
|
684
|
+
<div id="guide" class="member">
|
|
685
|
+
<div class="member-link">
|
|
686
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="member-description hidden">
|
|
689
|
+
|
|
690
|
+
<div class="member-text">
|
|
691
|
+
<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>
|
|
692
|
+
|
|
693
|
+
|
|
694
|
+
|
|
695
|
+
<ul class="member-list">
|
|
696
|
+
<h4>Default:</h4>
|
|
697
|
+
<li><tt>false</tt></li>
|
|
698
|
+
</ul>
|
|
699
|
+
|
|
700
|
+
<ul class="member-list">
|
|
701
|
+
<h4>Type:</h4>
|
|
702
|
+
<li>
|
|
703
|
+
<tt>Boolean</tt>
|
|
704
|
+
</li>
|
|
705
|
+
</ul>
|
|
706
|
+
|
|
707
|
+
|
|
708
|
+
|
|
651
709
|
</div>
|
|
652
710
|
|
|
653
711
|
</div>
|
|
@@ -1238,6 +1296,34 @@ circle.position.x += 100;
|
|
|
1238
1296
|
|
|
1239
1297
|
|
|
1240
1298
|
|
|
1299
|
+
</div>
|
|
1300
|
+
|
|
1301
|
+
</div>
|
|
1302
|
+
</div>
|
|
1303
|
+
|
|
1304
|
+
|
|
1305
|
+
<div id="scope" class="member">
|
|
1306
|
+
<div class="member-link">
|
|
1307
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
1308
|
+
</div>
|
|
1309
|
+
<div class="member-description hidden">
|
|
1310
|
+
|
|
1311
|
+
<div class="member-text">
|
|
1312
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
1313
|
+
|
|
1314
|
+
<p>Read only.</p>
|
|
1315
|
+
|
|
1316
|
+
|
|
1317
|
+
|
|
1318
|
+
<ul class="member-list">
|
|
1319
|
+
<h4>Type:</h4>
|
|
1320
|
+
<li>
|
|
1321
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
1322
|
+
</li>
|
|
1323
|
+
</ul>
|
|
1324
|
+
|
|
1325
|
+
|
|
1326
|
+
|
|
1241
1327
|
</div>
|
|
1242
1328
|
|
|
1243
1329
|
</div>
|
|
@@ -1351,6 +1437,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1351
1437
|
|
|
1352
1438
|
<div class="member-text">
|
|
1353
1439
|
<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>
|
|
1440
|
+
<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>
|
|
1354
1441
|
<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>
|
|
1355
1442
|
|
|
1356
1443
|
|
|
@@ -1852,7 +1939,7 @@ path3.strokeJoin = 'bevel';
|
|
|
1852
1939
|
<div class="member-description hidden">
|
|
1853
1940
|
|
|
1854
1941
|
<div class="member-text">
|
|
1855
|
-
<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>
|
|
1942
|
+
<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>
|
|
1856
1943
|
|
|
1857
1944
|
|
|
1858
1945
|
|
|
@@ -3291,22 +3378,22 @@ function onMouseDown(event) {
|
|
|
3291
3378
|
<div class="member-description hidden">
|
|
3292
3379
|
<div class="member-text">
|
|
3293
3380
|
<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>
|
|
3294
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
3381
|
+
<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>
|
|
3295
3382
|
<ul class="member-list">
|
|
3296
3383
|
<h4>Options:</h4>
|
|
3297
|
-
<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>
|
|
3384
|
+
<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>
|
|
3298
3385
|
<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>
|
|
3299
3386
|
<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>
|
|
3300
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
3301
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
3302
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
3387
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3388
|
+
<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>
|
|
3389
|
+
<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>
|
|
3303
3390
|
<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>
|
|
3304
3391
|
<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>
|
|
3305
3392
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3306
3393
|
<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>
|
|
3307
3394
|
<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>
|
|
3308
3395
|
<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>
|
|
3309
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
3396
|
+
<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>
|
|
3310
3397
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3311
3398
|
</ul>
|
|
3312
3399
|
|
|
@@ -3545,7 +3632,7 @@ function onMouseDown(event) {
|
|
|
3545
3632
|
<h4>Returns:</h4>
|
|
3546
3633
|
|
|
3547
3634
|
<li>
|
|
3548
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3635
|
+
<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
|
|
3549
3636
|
</li>
|
|
3550
3637
|
|
|
3551
3638
|
|
|
@@ -3718,6 +3805,8 @@ function onMouseDown(event) {
|
|
|
3718
3805
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
3719
3806
|
<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>
|
|
3720
3807
|
<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>
|
|
3808
|
+
<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>
|
|
3809
|
+
<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>
|
|
3721
3810
|
<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>
|
|
3722
3811
|
</ul>
|
|
3723
3812
|
|
|
@@ -3760,9 +3849,13 @@ function onMouseDown(event) {
|
|
|
3760
3849
|
<div class="member-description hidden">
|
|
3761
3850
|
<div class="member-text">
|
|
3762
3851
|
<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>
|
|
3852
|
+
<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>
|
|
3763
3853
|
<ul class="member-list">
|
|
3764
3854
|
<h4>Options:</h4>
|
|
3765
3855
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3856
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3857
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3858
|
+
images with CORS</li>
|
|
3766
3859
|
<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>
|
|
3767
3860
|
<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>
|
|
3768
3861
|
<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>
|
|
@@ -4238,9 +4331,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4238
4331
|
</div>
|
|
4239
4332
|
|
|
4240
4333
|
|
|
4241
|
-
<div id="reduce
|
|
4334
|
+
<div id="reduce" class="member">
|
|
4242
4335
|
<div class="member-link">
|
|
4243
|
-
<a name="reduce
|
|
4336
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4244
4337
|
</div>
|
|
4245
4338
|
<div class="member-description hidden">
|
|
4246
4339
|
<div class="member-text">
|
|
@@ -4252,9 +4345,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4252
4345
|
|
|
4253
4346
|
<li>
|
|
4254
4347
|
<tt>options:</tt>
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4348
|
+
<tt>Object</tt>
|
|
4349
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4350
|
+
— optional
|
|
4258
4351
|
</li>
|
|
4259
4352
|
|
|
4260
4353
|
</ul>
|
|
@@ -4496,7 +4589,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4496
4589
|
</div>
|
|
4497
4590
|
<div class="member-description hidden">
|
|
4498
4591
|
<div class="member-text">
|
|
4499
|
-
<p>Checks whether the item has a fill
|
|
4592
|
+
<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>
|
|
4500
4593
|
|
|
4501
4594
|
|
|
4502
4595
|
|
|
@@ -4504,7 +4597,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4504
4597
|
<h4>Returns:</h4>
|
|
4505
4598
|
|
|
4506
4599
|
<li>
|
|
4507
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
4600
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
4508
4601
|
</li>
|
|
4509
4602
|
|
|
4510
4603
|
|
|
@@ -4643,7 +4736,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4643
4736
|
</div>
|
|
4644
4737
|
<div class="member-description hidden">
|
|
4645
4738
|
<div class="member-text">
|
|
4646
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4739
|
+
<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>
|
|
4647
4740
|
|
|
4648
4741
|
|
|
4649
4742
|
<ul class="member-list">
|
|
@@ -4684,7 +4777,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4684
4777
|
</div>
|
|
4685
4778
|
<div class="member-description hidden">
|
|
4686
4779
|
<div class="member-text">
|
|
4687
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4780
|
+
<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>
|
|
4688
4781
|
|
|
4689
4782
|
|
|
4690
4783
|
<ul class="member-list">
|
|
@@ -5642,11 +5735,11 @@ circle.scale(3, 1);
|
|
|
5642
5735
|
|
|
5643
5736
|
<div id="fitbounds-rectangle" class="member">
|
|
5644
5737
|
<div class="member-link">
|
|
5645
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5738
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5646
5739
|
</div>
|
|
5647
5740
|
<div class="member-description hidden">
|
|
5648
5741
|
<div class="member-text">
|
|
5649
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5742
|
+
<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>
|
|
5650
5743
|
|
|
5651
5744
|
|
|
5652
5745
|
<ul class="member-list">
|
|
@@ -5660,10 +5753,10 @@ circle.scale(3, 1);
|
|
|
5660
5753
|
</li>
|
|
5661
5754
|
|
|
5662
5755
|
<li>
|
|
5663
|
-
<tt>
|
|
5664
|
-
<tt>Boolean</tt>
|
|
5665
|
-
|
|
5666
|
-
— optional, default: <tt
|
|
5756
|
+
<tt>fit:</tt>
|
|
5757
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5758
|
+
— 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>.
|
|
5759
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5667
5760
|
</li>
|
|
5668
5761
|
|
|
5669
5762
|
</ul>
|
|
@@ -5705,7 +5798,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5705
5798
|
</div>
|
|
5706
5799
|
|
|
5707
5800
|
|
|
5708
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5801
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
5709
5802
|
|
|
5710
5803
|
<div class="paperscript split">
|
|
5711
5804
|
|
|
@@ -5732,7 +5825,7 @@ var circlePath = new Path.Circle({
|
|
|
5732
5825
|
|
|
5733
5826
|
// Fit the circlePath to the bounding rectangle of
|
|
5734
5827
|
// the rectangular path:
|
|
5735
|
-
circlePath.fitBounds(path.bounds,
|
|
5828
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5736
5829
|
</script>
|
|
5737
5830
|
<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
|
|
5738
5831
|
</div>
|
|
@@ -6382,7 +6475,7 @@ function onMouseDown(event) {
|
|
|
6382
6475
|
<ul class="member-list">
|
|
6383
6476
|
<h4>Options:</h4>
|
|
6384
6477
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
6385
|
-
<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>
|
|
6478
|
+
<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>
|
|
6386
6479
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6387
6480
|
</ul>
|
|
6388
6481
|
|
|
@@ -6828,6 +6921,37 @@ function onFrame(event) {
|
|
|
6828
6921
|
</div>
|
|
6829
6922
|
|
|
6830
6923
|
|
|
6924
|
+
</div>
|
|
6925
|
+
|
|
6926
|
+
</div>
|
|
6927
|
+
</div>
|
|
6928
|
+
|
|
6929
|
+
|
|
6930
|
+
<div id="isolated" class="member">
|
|
6931
|
+
<div class="member-link">
|
|
6932
|
+
<a name="isolated" href="#isolated"><tt><b>isolated</b></tt></a>
|
|
6933
|
+
</div>
|
|
6934
|
+
<div class="member-description hidden">
|
|
6935
|
+
|
|
6936
|
+
<div class="member-text">
|
|
6937
|
+
<p>Specifies whether the group is isolated, drawn through a temporary canvas, so that the blend modes of its children only apply within it, like CSS’s <code>isolation: isolate</code>. Without it, a compositing mode such as <code>'destination-out'</code> affects everything drawn below the group, also in other layers. Groups with an <a href="../classes/Item.html#opacity"><tt>item.opacity</tt></a> below 1 or a <a href="../classes/Item.html#blendmode"><tt>item.blendMode</tt></a> are isolated anyway.</p>
|
|
6938
|
+
|
|
6939
|
+
|
|
6940
|
+
|
|
6941
|
+
<ul class="member-list">
|
|
6942
|
+
<h4>Default:</h4>
|
|
6943
|
+
<li><tt>false</tt></li>
|
|
6944
|
+
</ul>
|
|
6945
|
+
|
|
6946
|
+
<ul class="member-list">
|
|
6947
|
+
<h4>Type:</h4>
|
|
6948
|
+
<li>
|
|
6949
|
+
<tt>Boolean</tt>
|
|
6950
|
+
</li>
|
|
6951
|
+
</ul>
|
|
6952
|
+
|
|
6953
|
+
|
|
6954
|
+
|
|
6831
6955
|
</div>
|
|
6832
6956
|
|
|
6833
6957
|
</div>
|
|
@@ -6840,7 +6964,7 @@ function onFrame(event) {
|
|
|
6840
6964
|
|
|
6841
6965
|
<!-- =========================== copyright notice ========================== -->
|
|
6842
6966
|
<p class="footer">
|
|
6843
|
-
Paper.js v0.
|
|
6967
|
+
Paper.js v0.14.0<br>
|
|
6844
6968
|
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>
|
|
6845
6969
|
<div class="content-end"></div>
|
|
6846
6970
|
|
|
@@ -1735,7 +1735,7 @@ Array of <tt>Numbers</tt>
|
|
|
1735
1735
|
|
|
1736
1736
|
<!-- =========================== copyright notice ========================== -->
|
|
1737
1737
|
<p class="footer">
|
|
1738
|
-
Paper.js v0.
|
|
1738
|
+
Paper.js v0.14.0<br>
|
|
1739
1739
|
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>
|
|
1740
1740
|
<div class="content-end"></div>
|
|
1741
1741
|
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
|
|
347
347
|
<!-- =========================== copyright notice ========================== -->
|
|
348
348
|
<p class="footer">
|
|
349
|
-
Paper.js v0.
|
|
349
|
+
Paper.js v0.14.0<br>
|
|
350
350
|
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>
|
|
351
351
|
<div class="content-end"></div>
|
|
352
352
|
|
|
@@ -117,6 +117,7 @@
|
|
|
117
117
|
<li><tt>settings.applyMatrix: <tt>Boolean</tt></tt> — controls what value newly created items have their <a href="../classes/Item.html#applymatrix"><tt>item.applyMatrix</tt></a> property set to (Note that not all items can set this to <code>false</code>) — default: <tt>true</tt></li>
|
|
118
118
|
<li><tt>settings.handleSize: <tt>Number</tt></tt> — the size of the curve handles when drawing selections — default: <tt>4</tt></li>
|
|
119
119
|
<li><tt>settings.hitTolerance: <tt>Number</tt></tt> — the default tolerance for hit- tests, when no value is specified — default: <tt>0</tt></li>
|
|
120
|
+
<li><tt>settings.scaleStrokes: <tt>Boolean</tt></tt> — controls whether applying a matrix to the content of paths and compound paths also scales their <a href="../classes/Style.html#strokewidth"><tt>style.strokeWidth</tt></a>, by the geometric mean of the scale factors for non-uniform scaling. Items that keep their matrix, with <a href="../classes/Item.html#applymatrix"><tt>item.applyMatrix</tt></a> set to <code>false</code>, scale their strokes when drawing anyway, unless <a href="../classes/Style.html#strokescaling"><tt>style.strokeScaling</tt></a> is <code>false</code> — default: <tt>false</tt></li>
|
|
120
121
|
</ul>
|
|
121
122
|
|
|
122
123
|
|
|
@@ -372,6 +373,54 @@
|
|
|
372
373
|
|
|
373
374
|
|
|
374
375
|
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
|
|
381
|
+
<div id="createcanvas-width-height" class="member">
|
|
382
|
+
<div class="member-link">
|
|
383
|
+
<a name="createcanvas-width-height" href="#createcanvas-width-height"><tt><b>createCanvas</b>(width, height)</tt></a>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="member-description hidden">
|
|
386
|
+
<div class="member-text">
|
|
387
|
+
<p>Creates a canvas of the given size, or reuses one that was released internally.</p>
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
<ul class="member-list">
|
|
391
|
+
<h4>Parameters:</h4>
|
|
392
|
+
|
|
393
|
+
<li>
|
|
394
|
+
<tt>width:</tt>
|
|
395
|
+
<tt>Number</tt>
|
|
396
|
+
— the width of the canvas
|
|
397
|
+
|
|
398
|
+
</li>
|
|
399
|
+
|
|
400
|
+
<li>
|
|
401
|
+
<tt>height:</tt>
|
|
402
|
+
<tt>Number</tt>
|
|
403
|
+
— the height of the canvas
|
|
404
|
+
|
|
405
|
+
</li>
|
|
406
|
+
|
|
407
|
+
</ul>
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
<ul class="member-list">
|
|
411
|
+
<h4>Returns:</h4>
|
|
412
|
+
|
|
413
|
+
<li>
|
|
414
|
+
<tt><tt>HTMLCanvasElement</tt></tt> — the canvas
|
|
415
|
+
</li>
|
|
416
|
+
|
|
417
|
+
|
|
418
|
+
</ul>
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
|
|
375
424
|
</div>
|
|
376
425
|
</div>
|
|
377
426
|
</div>
|
|
@@ -391,6 +440,44 @@
|
|
|
391
440
|
|
|
392
441
|
|
|
393
442
|
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
<div id="clear" class="member">
|
|
449
|
+
<div class="member-link">
|
|
450
|
+
<a name="clear" href="#clear"><tt><b>clear</b>()</tt></a>
|
|
451
|
+
</div>
|
|
452
|
+
<div class="member-description hidden">
|
|
453
|
+
<div class="member-text">
|
|
454
|
+
<p>Removes all projects, views and tools of this scope, along with their installed event handlers.</p>
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
|
|
466
|
+
|
|
467
|
+
<div id="remove" class="member">
|
|
468
|
+
<div class="member-link">
|
|
469
|
+
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="member-description hidden">
|
|
472
|
+
<div class="member-text">
|
|
473
|
+
<p>Clears this scope and removes it from the list of scopes.</p>
|
|
474
|
+
|
|
475
|
+
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
|
|
479
|
+
|
|
480
|
+
|
|
394
481
|
</div>
|
|
395
482
|
</div>
|
|
396
483
|
</div>
|
|
@@ -450,7 +537,7 @@
|
|
|
450
537
|
|
|
451
538
|
<!-- =========================== copyright notice ========================== -->
|
|
452
539
|
<p class="footer">
|
|
453
|
-
Paper.js v0.
|
|
540
|
+
Paper.js v0.14.0<br>
|
|
454
541
|
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>
|
|
455
542
|
<div class="content-end"></div>
|
|
456
543
|
|
|
@@ -95,6 +95,7 @@
|
|
|
95
95
|
<h4>Options:</h4>
|
|
96
96
|
<li><tt>options.url: <tt>String</tt></tt> — the url of the source, for source-map generation</li>
|
|
97
97
|
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
|
98
|
+
<li><tt>options.handlers: Array of <tt>Strings</tt></tt> — the names of further global handlers to export next to <code>onFrame</code>, <code>onResize</code> and the tool’s handlers, for hosts that call them themselves</li>
|
|
98
99
|
</ul>
|
|
99
100
|
|
|
100
101
|
<ul class="member-list">
|
|
@@ -189,7 +190,7 @@
|
|
|
189
190
|
|
|
190
191
|
<!-- =========================== copyright notice ========================== -->
|
|
191
192
|
<p class="footer">
|
|
192
|
-
Paper.js v0.
|
|
193
|
+
Paper.js v0.14.0<br>
|
|
193
194
|
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>
|
|
194
195
|
<div class="content-end"></div>
|
|
195
196
|
|