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
|
@@ -28,6 +28,32 @@
|
|
|
28
28
|
<h2>Properties</h2>
|
|
29
29
|
|
|
30
30
|
|
|
31
|
+
<div id="key" class="member">
|
|
32
|
+
<div class="member-link">
|
|
33
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="member-description hidden">
|
|
36
|
+
|
|
37
|
+
<div class="member-text">
|
|
38
|
+
<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>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<ul class="member-list">
|
|
43
|
+
<h4>Type:</h4>
|
|
44
|
+
<li>
|
|
45
|
+
<tt>Number</tt>
|
|
46
|
+
</li>
|
|
47
|
+
</ul>
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
|
|
31
57
|
<div id="id" class="member">
|
|
32
58
|
<div class="member-link">
|
|
33
59
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -147,6 +173,7 @@ group.children['example'].fillColor = 'red';
|
|
|
147
173
|
|
|
148
174
|
<div class="member-text">
|
|
149
175
|
<p>The path style of the item.</p>
|
|
176
|
+
<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
177
|
|
|
151
178
|
|
|
152
179
|
|
|
@@ -489,6 +516,37 @@ circle2.opacity = 0.5;
|
|
|
489
516
|
</div>
|
|
490
517
|
|
|
491
518
|
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
<div id="guide" class="member">
|
|
526
|
+
<div class="member-link">
|
|
527
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
528
|
+
</div>
|
|
529
|
+
<div class="member-description hidden">
|
|
530
|
+
|
|
531
|
+
<div class="member-text">
|
|
532
|
+
<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>
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
|
|
536
|
+
<ul class="member-list">
|
|
537
|
+
<h4>Default:</h4>
|
|
538
|
+
<li><tt>false</tt></li>
|
|
539
|
+
</ul>
|
|
540
|
+
|
|
541
|
+
<ul class="member-list">
|
|
542
|
+
<h4>Type:</h4>
|
|
543
|
+
<li>
|
|
544
|
+
<tt>Boolean</tt>
|
|
545
|
+
</li>
|
|
546
|
+
</ul>
|
|
547
|
+
|
|
548
|
+
|
|
549
|
+
|
|
492
550
|
</div>
|
|
493
551
|
|
|
494
552
|
</div>
|
|
@@ -1079,6 +1137,34 @@ circle.position.x += 100;
|
|
|
1079
1137
|
|
|
1080
1138
|
|
|
1081
1139
|
|
|
1140
|
+
</div>
|
|
1141
|
+
|
|
1142
|
+
</div>
|
|
1143
|
+
</div>
|
|
1144
|
+
|
|
1145
|
+
|
|
1146
|
+
<div id="scope" class="member">
|
|
1147
|
+
<div class="member-link">
|
|
1148
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
1149
|
+
</div>
|
|
1150
|
+
<div class="member-description hidden">
|
|
1151
|
+
|
|
1152
|
+
<div class="member-text">
|
|
1153
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
1154
|
+
|
|
1155
|
+
<p>Read only.</p>
|
|
1156
|
+
|
|
1157
|
+
|
|
1158
|
+
|
|
1159
|
+
<ul class="member-list">
|
|
1160
|
+
<h4>Type:</h4>
|
|
1161
|
+
<li>
|
|
1162
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
1163
|
+
</li>
|
|
1164
|
+
</ul>
|
|
1165
|
+
|
|
1166
|
+
|
|
1167
|
+
|
|
1082
1168
|
</div>
|
|
1083
1169
|
|
|
1084
1170
|
</div>
|
|
@@ -1192,6 +1278,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
1192
1278
|
|
|
1193
1279
|
<div class="member-text">
|
|
1194
1280
|
<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>
|
|
1281
|
+
<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
1282
|
<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
1283
|
|
|
1197
1284
|
|
|
@@ -1693,7 +1780,7 @@ path3.strokeJoin = 'bevel';
|
|
|
1693
1780
|
<div class="member-description hidden">
|
|
1694
1781
|
|
|
1695
1782
|
<div class="member-text">
|
|
1696
|
-
<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>
|
|
1783
|
+
<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>
|
|
1697
1784
|
|
|
1698
1785
|
|
|
1699
1786
|
|
|
@@ -3136,22 +3223,22 @@ function onMouseDown(event) {
|
|
|
3136
3223
|
<div class="member-description hidden">
|
|
3137
3224
|
<div class="member-text">
|
|
3138
3225
|
<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-
|
|
3226
|
+
<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
3227
|
<ul class="member-list">
|
|
3141
3228
|
<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>
|
|
3229
|
+
<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
3230
|
<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
3231
|
<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
|
|
3232
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
3233
|
+
<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>
|
|
3234
|
+
<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
3235
|
<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
3236
|
<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
3237
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
3151
3238
|
<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
3239
|
<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
3240
|
<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 <
|
|
3241
|
+
<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
3242
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
3156
3243
|
</ul>
|
|
3157
3244
|
|
|
@@ -3390,7 +3477,7 @@ function onMouseDown(event) {
|
|
|
3390
3477
|
<h4>Returns:</h4>
|
|
3391
3478
|
|
|
3392
3479
|
<li>
|
|
3393
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
3480
|
+
<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
3481
|
</li>
|
|
3395
3482
|
|
|
3396
3483
|
|
|
@@ -3563,6 +3650,8 @@ function onMouseDown(event) {
|
|
|
3563
3650
|
<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
3651
|
<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
3652
|
<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>
|
|
3653
|
+
<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>
|
|
3654
|
+
<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
3655
|
<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
3656
|
</ul>
|
|
3568
3657
|
|
|
@@ -3605,9 +3694,13 @@ function onMouseDown(event) {
|
|
|
3605
3694
|
<div class="member-description hidden">
|
|
3606
3695
|
<div class="member-text">
|
|
3607
3696
|
<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>
|
|
3697
|
+
<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
3698
|
<ul class="member-list">
|
|
3609
3699
|
<h4>Options:</h4>
|
|
3610
3700
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
3701
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
3702
|
+
value of the rasters created for `<image>` elements, to load their
|
|
3703
|
+
images with CORS</li>
|
|
3611
3704
|
<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
3705
|
<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
3706
|
<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 +4176,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4083
4176
|
</div>
|
|
4084
4177
|
|
|
4085
4178
|
|
|
4086
|
-
<div id="reduce
|
|
4179
|
+
<div id="reduce" class="member">
|
|
4087
4180
|
<div class="member-link">
|
|
4088
|
-
<a name="reduce
|
|
4181
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
4089
4182
|
</div>
|
|
4090
4183
|
<div class="member-description hidden">
|
|
4091
4184
|
<div class="member-text">
|
|
@@ -4097,9 +4190,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4097
4190
|
|
|
4098
4191
|
<li>
|
|
4099
4192
|
<tt>options:</tt>
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4193
|
+
<tt>Object</tt>
|
|
4194
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
4195
|
+
— optional
|
|
4103
4196
|
</li>
|
|
4104
4197
|
|
|
4105
4198
|
</ul>
|
|
@@ -4341,7 +4434,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4341
4434
|
</div>
|
|
4342
4435
|
<div class="member-description hidden">
|
|
4343
4436
|
<div class="member-text">
|
|
4344
|
-
<p>Checks whether the item has a fill
|
|
4437
|
+
<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>
|
|
4345
4438
|
|
|
4346
4439
|
|
|
4347
4440
|
|
|
@@ -4349,7 +4442,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4349
4442
|
<h4>Returns:</h4>
|
|
4350
4443
|
|
|
4351
4444
|
<li>
|
|
4352
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
4445
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
4353
4446
|
</li>
|
|
4354
4447
|
|
|
4355
4448
|
|
|
@@ -4488,7 +4581,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4488
4581
|
</div>
|
|
4489
4582
|
<div class="member-description hidden">
|
|
4490
4583
|
<div class="member-text">
|
|
4491
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
4584
|
+
<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
4585
|
|
|
4493
4586
|
|
|
4494
4587
|
<ul class="member-list">
|
|
@@ -4529,7 +4622,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4529
4622
|
</div>
|
|
4530
4623
|
<div class="member-description hidden">
|
|
4531
4624
|
<div class="member-text">
|
|
4532
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
4625
|
+
<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
4626
|
|
|
4534
4627
|
|
|
4535
4628
|
<ul class="member-list">
|
|
@@ -5487,11 +5580,11 @@ circle.scale(3, 1);
|
|
|
5487
5580
|
|
|
5488
5581
|
<div id="fitbounds-rectangle" class="member">
|
|
5489
5582
|
<div class="member-link">
|
|
5490
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
5583
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
5491
5584
|
</div>
|
|
5492
5585
|
<div class="member-description hidden">
|
|
5493
5586
|
<div class="member-text">
|
|
5494
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
5587
|
+
<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
5588
|
|
|
5496
5589
|
|
|
5497
5590
|
<ul class="member-list">
|
|
@@ -5505,10 +5598,10 @@ circle.scale(3, 1);
|
|
|
5505
5598
|
</li>
|
|
5506
5599
|
|
|
5507
5600
|
<li>
|
|
5508
|
-
<tt>
|
|
5509
|
-
<tt>Boolean</tt>
|
|
5510
|
-
|
|
5511
|
-
— optional, default: <tt
|
|
5601
|
+
<tt>fit:</tt>
|
|
5602
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
5603
|
+
— 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>.
|
|
5604
|
+
— optional, default: <tt>‘contain’</tt>
|
|
5512
5605
|
</li>
|
|
5513
5606
|
|
|
5514
5607
|
</ul>
|
|
@@ -5550,7 +5643,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
5550
5643
|
</div>
|
|
5551
5644
|
|
|
5552
5645
|
|
|
5553
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
5646
|
+
<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
5647
|
|
|
5555
5648
|
<div class="paperscript split">
|
|
5556
5649
|
|
|
@@ -5577,7 +5670,7 @@ var circlePath = new Path.Circle({
|
|
|
5577
5670
|
|
|
5578
5671
|
// Fit the circlePath to the bounding rectangle of
|
|
5579
5672
|
// the rectangular path:
|
|
5580
|
-
circlePath.fitBounds(path.bounds,
|
|
5673
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
5581
5674
|
</script>
|
|
5582
5675
|
<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
|
|
5583
5676
|
</div>
|
|
@@ -6227,7 +6320,7 @@ function onMouseDown(event) {
|
|
|
6227
6320
|
<ul class="member-list">
|
|
6228
6321
|
<h4>Options:</h4>
|
|
6229
6322
|
<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>
|
|
6323
|
+
<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
6324
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
6232
6325
|
</ul>
|
|
6233
6326
|
|
|
@@ -6618,7 +6711,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6618
6711
|
|
|
6619
6712
|
<!-- =========================== copyright notice ========================== -->
|
|
6620
6713
|
<p class="footer">
|
|
6621
|
-
Paper.js v0.
|
|
6714
|
+
Paper.js v0.14.0<br>
|
|
6622
6715
|
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
6716
|
<div class="content-end"></div>
|
|
6624
6717
|
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
<!-- =========================== copyright notice ========================== -->
|
|
132
132
|
<p class="footer">
|
|
133
|
-
Paper.js v0.
|
|
133
|
+
Paper.js v0.14.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.14.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
|
|