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
|
@@ -220,6 +220,37 @@ function onMouseMove(event) {
|
|
|
220
220
|
|
|
221
221
|
|
|
222
222
|
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
<div id="tracking" class="member">
|
|
230
|
+
<div class="member-link">
|
|
231
|
+
<a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="member-description hidden">
|
|
234
|
+
|
|
235
|
+
<div class="member-text">
|
|
236
|
+
<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>
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
<ul class="member-list">
|
|
241
|
+
<h4>Default:</h4>
|
|
242
|
+
<li><tt>0</tt></li>
|
|
243
|
+
</ul>
|
|
244
|
+
|
|
245
|
+
<ul class="member-list">
|
|
246
|
+
<h4>Type:</h4>
|
|
247
|
+
<li>
|
|
248
|
+
<tt>Number</tt>
|
|
249
|
+
</li>
|
|
250
|
+
</ul>
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
|
|
223
254
|
</div>
|
|
224
255
|
|
|
225
256
|
</div>
|
|
@@ -276,6 +307,32 @@ function onMouseMove(event) {
|
|
|
276
307
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
277
308
|
|
|
278
309
|
|
|
310
|
+
<div id="key" class="member">
|
|
311
|
+
<div class="member-link">
|
|
312
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="member-description hidden">
|
|
315
|
+
|
|
316
|
+
<div class="member-text">
|
|
317
|
+
<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>
|
|
318
|
+
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
<ul class="member-list">
|
|
322
|
+
<h4>Type:</h4>
|
|
323
|
+
<li>
|
|
324
|
+
<tt>Number</tt>
|
|
325
|
+
</li>
|
|
326
|
+
</ul>
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
|
|
279
336
|
<div id="id" class="member">
|
|
280
337
|
<div class="member-link">
|
|
281
338
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -395,6 +452,7 @@ group.children['example'].fillColor = 'red';
|
|
|
395
452
|
|
|
396
453
|
<div class="member-text">
|
|
397
454
|
<p>The path style of the item.</p>
|
|
455
|
+
<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>
|
|
398
456
|
|
|
399
457
|
|
|
400
458
|
|
|
@@ -737,6 +795,37 @@ circle2.opacity = 0.5;
|
|
|
737
795
|
</div>
|
|
738
796
|
|
|
739
797
|
|
|
798
|
+
</div>
|
|
799
|
+
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
|
|
803
|
+
|
|
804
|
+
<div id="guide" class="member">
|
|
805
|
+
<div class="member-link">
|
|
806
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
807
|
+
</div>
|
|
808
|
+
<div class="member-description hidden">
|
|
809
|
+
|
|
810
|
+
<div class="member-text">
|
|
811
|
+
<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>
|
|
812
|
+
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
<ul class="member-list">
|
|
816
|
+
<h4>Default:</h4>
|
|
817
|
+
<li><tt>false</tt></li>
|
|
818
|
+
</ul>
|
|
819
|
+
|
|
820
|
+
<ul class="member-list">
|
|
821
|
+
<h4>Type:</h4>
|
|
822
|
+
<li>
|
|
823
|
+
<tt>Boolean</tt>
|
|
824
|
+
</li>
|
|
825
|
+
</ul>
|
|
826
|
+
|
|
827
|
+
|
|
828
|
+
|
|
740
829
|
</div>
|
|
741
830
|
|
|
742
831
|
</div>
|
|
@@ -1327,6 +1416,34 @@ circle.position.x += 100;
|
|
|
1327
1416
|
|
|
1328
1417
|
|
|
1329
1418
|
|
|
1419
|
+
</div>
|
|
1420
|
+
|
|
1421
|
+
</div>
|
|
1422
|
+
</div>
|
|
1423
|
+
|
|
1424
|
+
|
|
1425
|
+
<div id="scope" class="member">
|
|
1426
|
+
<div class="member-link">
|
|
1427
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
1428
|
+
</div>
|
|
1429
|
+
<div class="member-description hidden">
|
|
1430
|
+
|
|
1431
|
+
<div class="member-text">
|
|
1432
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
1433
|
+
|
|
1434
|
+
<p>Read only.</p>
|
|
1435
|
+
|
|
1436
|
+
|
|
1437
|
+
|
|
1438
|
+
<ul class="member-list">
|
|
1439
|
+
<h4>Type:</h4>
|
|
1440
|
+
<li>
|
|
1441
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
1442
|
+
</li>
|
|
1443
|
+
</ul>
|
|
1444
|
+
|
|
1445
|
+
|
|
1446
|
+
|
|
1330
1447
|
</div>
|
|
1331
1448
|
|
|
1332
1449
|
</div>
|
|
@@ -1440,6 +1557,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1440
1557
|
|
|
1441
1558
|
<div class="member-text">
|
|
1442
1559
|
<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>
|
|
1560
|
+
<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>
|
|
1443
1561
|
<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>
|
|
1444
1562
|
|
|
1445
1563
|
|
|
@@ -1941,7 +2059,7 @@ path3.strokeJoin = 'bevel';
|
|
|
1941
2059
|
<div class="member-description hidden">
|
|
1942
2060
|
|
|
1943
2061
|
<div class="member-text">
|
|
1944
|
-
<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>
|
|
2062
|
+
<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>
|
|
1945
2063
|
|
|
1946
2064
|
|
|
1947
2065
|
|
|
@@ -3380,22 +3498,22 @@ function onMouseDown(event) {
|
|
|
3380
3498
|
<div class="member-description hidden">
|
|
3381
3499
|
<div class="member-text">
|
|
3382
3500
|
<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>
|
|
3383
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
3501
|
+
<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>
|
|
3384
3502
|
<ul class="member-list">
|
|
3385
3503
|
<h4>Options:</h4>
|
|
3386
|
-
<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>
|
|
3504
|
+
<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>
|
|
3387
3505
|
<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>
|
|
3388
3506
|
<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>
|
|
3389
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
3390
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
3391
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
3507
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3508
|
+
<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>
|
|
3509
|
+
<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>
|
|
3392
3510
|
<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>
|
|
3393
3511
|
<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>
|
|
3394
3512
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3395
3513
|
<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>
|
|
3396
3514
|
<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>
|
|
3397
3515
|
<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>
|
|
3398
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
3516
|
+
<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>
|
|
3399
3517
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3400
3518
|
</ul>
|
|
3401
3519
|
|
|
@@ -3634,7 +3752,7 @@ function onMouseDown(event) {
|
|
|
3634
3752
|
<h4>Returns:</h4>
|
|
3635
3753
|
|
|
3636
3754
|
<li>
|
|
3637
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3755
|
+
<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
|
|
3638
3756
|
</li>
|
|
3639
3757
|
|
|
3640
3758
|
|
|
@@ -3807,6 +3925,8 @@ function onMouseDown(event) {
|
|
|
3807
3925
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
3808
3926
|
<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>
|
|
3809
3927
|
<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>
|
|
3928
|
+
<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>
|
|
3929
|
+
<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>
|
|
3810
3930
|
<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>
|
|
3811
3931
|
</ul>
|
|
3812
3932
|
|
|
@@ -3849,9 +3969,13 @@ function onMouseDown(event) {
|
|
|
3849
3969
|
<div class="member-description hidden">
|
|
3850
3970
|
<div class="member-text">
|
|
3851
3971
|
<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>
|
|
3972
|
+
<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>
|
|
3852
3973
|
<ul class="member-list">
|
|
3853
3974
|
<h4>Options:</h4>
|
|
3854
3975
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3976
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3977
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3978
|
+
images with CORS</li>
|
|
3855
3979
|
<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>
|
|
3856
3980
|
<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>
|
|
3857
3981
|
<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>
|
|
@@ -4327,9 +4451,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4327
4451
|
</div>
|
|
4328
4452
|
|
|
4329
4453
|
|
|
4330
|
-
<div id="reduce
|
|
4454
|
+
<div id="reduce" class="member">
|
|
4331
4455
|
<div class="member-link">
|
|
4332
|
-
<a name="reduce
|
|
4456
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4333
4457
|
</div>
|
|
4334
4458
|
<div class="member-description hidden">
|
|
4335
4459
|
<div class="member-text">
|
|
@@ -4341,9 +4465,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4341
4465
|
|
|
4342
4466
|
<li>
|
|
4343
4467
|
<tt>options:</tt>
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4468
|
+
<tt>Object</tt>
|
|
4469
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4470
|
+
— optional
|
|
4347
4471
|
</li>
|
|
4348
4472
|
|
|
4349
4473
|
</ul>
|
|
@@ -4585,7 +4709,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4585
4709
|
</div>
|
|
4586
4710
|
<div class="member-description hidden">
|
|
4587
4711
|
<div class="member-text">
|
|
4588
|
-
<p>Checks whether the item has a fill
|
|
4712
|
+
<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>
|
|
4589
4713
|
|
|
4590
4714
|
|
|
4591
4715
|
|
|
@@ -4593,7 +4717,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4593
4717
|
<h4>Returns:</h4>
|
|
4594
4718
|
|
|
4595
4719
|
<li>
|
|
4596
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
4720
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
4597
4721
|
</li>
|
|
4598
4722
|
|
|
4599
4723
|
|
|
@@ -4732,7 +4856,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4732
4856
|
</div>
|
|
4733
4857
|
<div class="member-description hidden">
|
|
4734
4858
|
<div class="member-text">
|
|
4735
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4859
|
+
<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>
|
|
4736
4860
|
|
|
4737
4861
|
|
|
4738
4862
|
<ul class="member-list">
|
|
@@ -4773,7 +4897,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4773
4897
|
</div>
|
|
4774
4898
|
<div class="member-description hidden">
|
|
4775
4899
|
<div class="member-text">
|
|
4776
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4900
|
+
<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>
|
|
4777
4901
|
|
|
4778
4902
|
|
|
4779
4903
|
<ul class="member-list">
|
|
@@ -5731,11 +5855,11 @@ circle.scale(3, 1);
|
|
|
5731
5855
|
|
|
5732
5856
|
<div id="fitbounds-rectangle" class="member">
|
|
5733
5857
|
<div class="member-link">
|
|
5734
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5858
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5735
5859
|
</div>
|
|
5736
5860
|
<div class="member-description hidden">
|
|
5737
5861
|
<div class="member-text">
|
|
5738
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5862
|
+
<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>
|
|
5739
5863
|
|
|
5740
5864
|
|
|
5741
5865
|
<ul class="member-list">
|
|
@@ -5749,10 +5873,10 @@ circle.scale(3, 1);
|
|
|
5749
5873
|
</li>
|
|
5750
5874
|
|
|
5751
5875
|
<li>
|
|
5752
|
-
<tt>
|
|
5753
|
-
<tt>Boolean</tt>
|
|
5754
|
-
|
|
5755
|
-
— optional, default: <tt
|
|
5876
|
+
<tt>fit:</tt>
|
|
5877
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5878
|
+
— 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>.
|
|
5879
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5756
5880
|
</li>
|
|
5757
5881
|
|
|
5758
5882
|
</ul>
|
|
@@ -5794,7 +5918,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5794
5918
|
</div>
|
|
5795
5919
|
|
|
5796
5920
|
|
|
5797
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5921
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
5798
5922
|
|
|
5799
5923
|
<div class="paperscript split">
|
|
5800
5924
|
|
|
@@ -5821,7 +5945,7 @@ var circlePath = new Path.Circle({
|
|
|
5821
5945
|
|
|
5822
5946
|
// Fit the circlePath to the bounding rectangle of
|
|
5823
5947
|
// the rectangular path:
|
|
5824
|
-
circlePath.fitBounds(path.bounds,
|
|
5948
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5825
5949
|
</script>
|
|
5826
5950
|
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
|
|
5827
5951
|
</div>
|
|
@@ -6471,7 +6595,7 @@ function onMouseDown(event) {
|
|
|
6471
6595
|
<ul class="member-list">
|
|
6472
6596
|
<h4>Options:</h4>
|
|
6473
6597
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
6474
|
-
<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>
|
|
6598
|
+
<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>
|
|
6475
6599
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6476
6600
|
</ul>
|
|
6477
6601
|
|
|
@@ -6859,7 +6983,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6859
6983
|
|
|
6860
6984
|
<!-- =========================== copyright notice ========================== -->
|
|
6861
6985
|
<p class="footer">
|
|
6862
|
-
Paper.js v0.
|
|
6986
|
+
Paper.js v0.14.0<br>
|
|
6863
6987
|
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>
|
|
6864
6988
|
<div class="content-end"></div>
|
|
6865
6989
|
|
|
@@ -59,6 +59,34 @@ tool.onMouseDrag = function(event) {
|
|
|
59
59
|
<h2>Properties</h2>
|
|
60
60
|
|
|
61
61
|
|
|
62
|
+
<div id="scope" class="member">
|
|
63
|
+
<div class="member-link">
|
|
64
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="member-description hidden">
|
|
67
|
+
|
|
68
|
+
<div class="member-text">
|
|
69
|
+
<p>The scope that this tool belongs to.</p>
|
|
70
|
+
|
|
71
|
+
<p>Read only.</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
<ul class="member-list">
|
|
76
|
+
<h4>Type:</h4>
|
|
77
|
+
<li>
|
|
78
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
79
|
+
</li>
|
|
80
|
+
</ul>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
|
|
62
90
|
<div id="mindistance" class="member">
|
|
63
91
|
<div class="member-link">
|
|
64
92
|
<a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
|
|
@@ -111,6 +139,41 @@ tool.onMouseDrag = function(event) {
|
|
|
111
139
|
</div>
|
|
112
140
|
|
|
113
141
|
|
|
142
|
+
<div id="eventinterval" class="member">
|
|
143
|
+
<div class="member-link">
|
|
144
|
+
<a name="eventinterval" href="#eventinterval"><tt><b>eventInterval</b></tt></a>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="member-description hidden">
|
|
147
|
+
|
|
148
|
+
<div class="member-text">
|
|
149
|
+
<p>The interval in milliseconds at which the onMouseDrag event fires again while the mouse button is held, also when the mouse doesn’t move. The repeated events are at the last point, with a zero <a href="../classes/ToolEvent.html#delta"><tt>toolEvent.delta</tt></a>. <code>null</code>, the default, or anything up to 0 turns it off.</p>
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
<ul class="member-list">
|
|
154
|
+
<h4>Default:</h4>
|
|
155
|
+
<li><tt>null</tt></li>
|
|
156
|
+
</ul>
|
|
157
|
+
|
|
158
|
+
<ul class="member-list">
|
|
159
|
+
<h4>Type:</h4>
|
|
160
|
+
<li>
|
|
161
|
+
<tt>Number</tt>
|
|
162
|
+
</li>
|
|
163
|
+
</ul>
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
<h4>Example:<span class="description">Fire the onMouseDrag event 10 times a second, while the mouse button is held:</span></h4>
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
<pre><code>tool.eventInterval = 100;</code></pre>
|
|
170
|
+
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
|
|
114
177
|
<div id="fixeddistance" class="member">
|
|
115
178
|
<div class="member-link">
|
|
116
179
|
<a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
|
|
@@ -243,6 +306,7 @@ tool.onMouseDrag = function(event) {
|
|
|
243
306
|
|
|
244
307
|
<div class="member-text">
|
|
245
308
|
<p>The function to be called the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
|
|
309
|
+
<p>While the mouse button is held down, the tool calls <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a> instead, if it defines one, and <code>onMouseMove</code> only otherwise.</p>
|
|
246
310
|
|
|
247
311
|
|
|
248
312
|
|
|
@@ -421,6 +485,68 @@ tool.onKeyDown = function(event) {
|
|
|
421
485
|
}
|
|
422
486
|
}</code></pre>
|
|
423
487
|
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
|
|
494
|
+
<h3>Activation Event Handlers</h3>
|
|
495
|
+
|
|
496
|
+
<div id="onactivate" class="member">
|
|
497
|
+
<div class="member-link">
|
|
498
|
+
<a name="onactivate" href="#onactivate"><tt><b>onActivate</b></tt></a>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="member-description hidden">
|
|
501
|
+
|
|
502
|
+
<div class="member-text">
|
|
503
|
+
<p>The function to be called when the tool is activated through <a href="../classes/Tool.html#activate"><tt>activate</tt></a>(). The function receives the previously active tool, which is the tool itself when it was already active.</p>
|
|
504
|
+
|
|
505
|
+
|
|
506
|
+
|
|
507
|
+
<ul class="member-list">
|
|
508
|
+
<h4>Type:</h4>
|
|
509
|
+
<li>
|
|
510
|
+
<tt>Function</tt>⟋<tt>null</tt>
|
|
511
|
+
</li>
|
|
512
|
+
</ul>
|
|
513
|
+
|
|
514
|
+
|
|
515
|
+
<h4>Example:</h4>
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
<pre><code>tool.onActivate = function(previous) {
|
|
519
|
+
if (previous == tool) {
|
|
520
|
+
console.log('The tool was activated again!');
|
|
521
|
+
}
|
|
522
|
+
}</code></pre>
|
|
523
|
+
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
|
|
529
|
+
|
|
530
|
+
<div id="ondeactivate" class="member">
|
|
531
|
+
<div class="member-link">
|
|
532
|
+
<a name="ondeactivate" href="#ondeactivate"><tt><b>onDeactivate</b></tt></a>
|
|
533
|
+
</div>
|
|
534
|
+
<div class="member-description hidden">
|
|
535
|
+
|
|
536
|
+
<div class="member-text">
|
|
537
|
+
<p>The function to be called when another tool is activated through <a href="../classes/Tool.html#activate"><tt>activate</tt></a>(), while this one is active.</p>
|
|
538
|
+
|
|
539
|
+
|
|
540
|
+
|
|
541
|
+
<ul class="member-list">
|
|
542
|
+
<h4>Type:</h4>
|
|
543
|
+
<li>
|
|
544
|
+
<tt>Function</tt>⟋<tt>null</tt>
|
|
545
|
+
</li>
|
|
546
|
+
</ul>
|
|
547
|
+
|
|
548
|
+
|
|
549
|
+
|
|
424
550
|
</div>
|
|
425
551
|
|
|
426
552
|
</div>
|
|
@@ -752,7 +878,7 @@ tool.onKeyDown = function(event) {
|
|
|
752
878
|
|
|
753
879
|
<!-- =========================== copyright notice ========================== -->
|
|
754
880
|
<p class="footer">
|
|
755
|
-
Paper.js v0.
|
|
881
|
+
Paper.js v0.14.0<br>
|
|
756
882
|
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>
|
|
757
883
|
<div class="content-end"></div>
|
|
758
884
|
|
|
@@ -55,6 +55,32 @@
|
|
|
55
55
|
|
|
56
56
|
|
|
57
57
|
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
<div id="tool" class="member">
|
|
65
|
+
<div class="member-link">
|
|
66
|
+
<a name="tool" href="#tool"><tt><b>tool</b></tt></a>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="member-description hidden">
|
|
69
|
+
|
|
70
|
+
<div class="member-text">
|
|
71
|
+
<p>The tool that fired the event.</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
<ul class="member-list">
|
|
76
|
+
<h4>Type:</h4>
|
|
77
|
+
<li>
|
|
78
|
+
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
|
79
|
+
</li>
|
|
80
|
+
</ul>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
58
84
|
</div>
|
|
59
85
|
|
|
60
86
|
</div>
|
|
@@ -437,7 +463,7 @@ function onMouseUp(event) {
|
|
|
437
463
|
|
|
438
464
|
<!-- =========================== copyright notice ========================== -->
|
|
439
465
|
<p class="footer">
|
|
440
|
-
Paper.js v0.
|
|
466
|
+
Paper.js v0.14.0<br>
|
|
441
467
|
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>
|
|
442
468
|
<div class="content-end"></div>
|
|
443
469
|
|
|
@@ -365,7 +365,7 @@ setTimeout(function(){
|
|
|
365
365
|
|
|
366
366
|
<!-- =========================== copyright notice ========================== -->
|
|
367
367
|
<p class="footer">
|
|
368
|
-
Paper.js v0.
|
|
368
|
+
Paper.js v0.14.0<br>
|
|
369
369
|
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>
|
|
370
370
|
<div class="content-end"></div>
|
|
371
371
|
|