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
|
@@ -474,14 +474,14 @@ raster.rotate(10);
|
|
|
474
474
|
<div class="member-description hidden">
|
|
475
475
|
|
|
476
476
|
<div class="member-text">
|
|
477
|
-
<p>The source of the raster, which can be set using a
|
|
477
|
+
<p>The source of the raster, which can be set using a string describing the URL to load the image from, or a data url. Reading this property will return the url of the source image or a data-url. To set the raster to a DOM Image or a Canvas, use <a href="../classes/Raster.html#image"><tt>image</tt></a> or <a href="../classes/Raster.html#canvas"><tt>canvas</tt></a> instead. The ID of a DOM Image or Canvas element is only accepted by the constructor. Note that for consistency, a <a href="../classes/Raster.html#onload"><tt>onLoad</tt></a> event will be triggered on the raster even if the image has already finished loading before.</p>
|
|
478
478
|
|
|
479
479
|
|
|
480
480
|
|
|
481
481
|
<ul class="member-list">
|
|
482
482
|
<h4>Type:</h4>
|
|
483
483
|
<li>
|
|
484
|
-
<tt>
|
|
484
|
+
<tt>String</tt>
|
|
485
485
|
</li>
|
|
486
486
|
</ul>
|
|
487
487
|
|
|
@@ -788,19 +788,38 @@ raster.on('load', function() {
|
|
|
788
788
|
|
|
789
789
|
<div id="todataurl" class="member">
|
|
790
790
|
<div class="member-link">
|
|
791
|
-
<a name="todataurl" href="#todataurl"><tt><b>toDataURL</b>()</tt></a>
|
|
791
|
+
<a name="todataurl" href="#todataurl"><tt><b>toDataURL</b>([type[, quality]])</tt></a>
|
|
792
792
|
</div>
|
|
793
793
|
<div class="member-description hidden">
|
|
794
794
|
<div class="member-text">
|
|
795
|
-
<p>Returns a Base 64 encoded <code>data:</code> URL representation of the raster.</p>
|
|
795
|
+
<p>Returns a Base 64 encoded <code>data:</code> URL representation of the raster. If the raster shows an image that was loaded from a <code>data:</code> URL, that URL is returned unchanged. Otherwise, the arguments are passed on to <code>HTMLCanvasElement#toDataURL()</code> of the raster’s <a href="../classes/Raster.html#canvas"><tt>canvas</tt></a>. In web-workers, where the canvas is an <code>OffscreenCanvas</code>, this is not supported, and neither are <a href="../classes/Raster.html#source"><tt>source</tt></a> and exporting the raster to JSON, which rely on it. Use the canvas’ asynchronous <code>convertToBlob()</code> there instead.</p>
|
|
796
796
|
|
|
797
797
|
|
|
798
|
+
<ul class="member-list">
|
|
799
|
+
<h4>Parameters:</h4>
|
|
800
|
+
|
|
801
|
+
<li>
|
|
802
|
+
<tt>type:</tt>
|
|
803
|
+
<tt>String</tt>
|
|
804
|
+
— the image format to encode
|
|
805
|
+
— optional, default: <tt>‘image/png’</tt>
|
|
806
|
+
</li>
|
|
807
|
+
|
|
808
|
+
<li>
|
|
809
|
+
<tt>quality:</tt>
|
|
810
|
+
<tt>Number</tt>
|
|
811
|
+
— the image quality between <code>0</code> and <code>1</code>, for formats that use lossy compression, such as <code>'image/jpeg'</code>
|
|
812
|
+
— optional
|
|
813
|
+
</li>
|
|
814
|
+
|
|
815
|
+
</ul>
|
|
816
|
+
|
|
798
817
|
|
|
799
818
|
<ul class="member-list">
|
|
800
819
|
<h4>Returns:</h4>
|
|
801
820
|
|
|
802
821
|
<li>
|
|
803
|
-
<tt><tt>String</tt></tt>
|
|
822
|
+
<tt><tt>String</tt></tt> — the <code>data:</code> URL of the raster
|
|
804
823
|
</li>
|
|
805
824
|
|
|
806
825
|
|
|
@@ -1130,13 +1149,13 @@ raster.on('load', function() {
|
|
|
1130
1149
|
</div>
|
|
1131
1150
|
|
|
1132
1151
|
|
|
1133
|
-
<div id="getimagedata
|
|
1152
|
+
<div id="getimagedata" class="member">
|
|
1134
1153
|
<div class="member-link">
|
|
1135
|
-
<a name="getimagedata
|
|
1154
|
+
<a name="getimagedata" href="#getimagedata"><tt><b>getImageData</b>([rect])</tt></a>
|
|
1136
1155
|
</div>
|
|
1137
1156
|
<div class="member-description hidden">
|
|
1138
1157
|
<div class="member-text">
|
|
1139
|
-
|
|
1158
|
+
<p>Returns the image data of the pixels within the specified rectangle, or of the whole raster if no rectangle or an empty one is passed.</p>
|
|
1140
1159
|
|
|
1141
1160
|
|
|
1142
1161
|
<ul class="member-list">
|
|
@@ -1145,8 +1164,8 @@ raster.on('load', function() {
|
|
|
1145
1164
|
<li>
|
|
1146
1165
|
<tt>rect:</tt>
|
|
1147
1166
|
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
|
1148
|
-
|
|
1149
|
-
|
|
1167
|
+
— the area of the raster to get the image data of, in pixel coordinates
|
|
1168
|
+
— optional
|
|
1150
1169
|
</li>
|
|
1151
1170
|
|
|
1152
1171
|
</ul>
|
|
@@ -1156,7 +1175,7 @@ raster.on('load', function() {
|
|
|
1156
1175
|
<h4>Returns:</h4>
|
|
1157
1176
|
|
|
1158
1177
|
<li>
|
|
1159
|
-
<tt><tt>ImageData</tt></tt
|
|
1178
|
+
<tt><tt>ImageData</tt></tt> — the image data of the specified area
|
|
1160
1179
|
</li>
|
|
1161
1180
|
|
|
1162
1181
|
|
|
@@ -1250,6 +1269,32 @@ raster.on('load', function() {
|
|
|
1250
1269
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
1251
1270
|
|
|
1252
1271
|
|
|
1272
|
+
<div id="key" class="member">
|
|
1273
|
+
<div class="member-link">
|
|
1274
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
1275
|
+
</div>
|
|
1276
|
+
<div class="member-description hidden">
|
|
1277
|
+
|
|
1278
|
+
<div class="member-text">
|
|
1279
|
+
<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>
|
|
1280
|
+
|
|
1281
|
+
|
|
1282
|
+
|
|
1283
|
+
<ul class="member-list">
|
|
1284
|
+
<h4>Type:</h4>
|
|
1285
|
+
<li>
|
|
1286
|
+
<tt>Number</tt>
|
|
1287
|
+
</li>
|
|
1288
|
+
</ul>
|
|
1289
|
+
|
|
1290
|
+
|
|
1291
|
+
|
|
1292
|
+
</div>
|
|
1293
|
+
|
|
1294
|
+
</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
|
|
1297
|
+
|
|
1253
1298
|
<div id="id" class="member">
|
|
1254
1299
|
<div class="member-link">
|
|
1255
1300
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -1369,6 +1414,7 @@ group.children['example'].fillColor = 'red';
|
|
|
1369
1414
|
|
|
1370
1415
|
<div class="member-text">
|
|
1371
1416
|
<p>The path style of the item.</p>
|
|
1417
|
+
<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>
|
|
1372
1418
|
|
|
1373
1419
|
|
|
1374
1420
|
|
|
@@ -1711,6 +1757,37 @@ circle2.opacity = 0.5;
|
|
|
1711
1757
|
</div>
|
|
1712
1758
|
|
|
1713
1759
|
|
|
1760
|
+
</div>
|
|
1761
|
+
|
|
1762
|
+
</div>
|
|
1763
|
+
</div>
|
|
1764
|
+
|
|
1765
|
+
|
|
1766
|
+
<div id="guide" class="member">
|
|
1767
|
+
<div class="member-link">
|
|
1768
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
1769
|
+
</div>
|
|
1770
|
+
<div class="member-description hidden">
|
|
1771
|
+
|
|
1772
|
+
<div class="member-text">
|
|
1773
|
+
<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>
|
|
1774
|
+
|
|
1775
|
+
|
|
1776
|
+
|
|
1777
|
+
<ul class="member-list">
|
|
1778
|
+
<h4>Default:</h4>
|
|
1779
|
+
<li><tt>false</tt></li>
|
|
1780
|
+
</ul>
|
|
1781
|
+
|
|
1782
|
+
<ul class="member-list">
|
|
1783
|
+
<h4>Type:</h4>
|
|
1784
|
+
<li>
|
|
1785
|
+
<tt>Boolean</tt>
|
|
1786
|
+
</li>
|
|
1787
|
+
</ul>
|
|
1788
|
+
|
|
1789
|
+
|
|
1790
|
+
|
|
1714
1791
|
</div>
|
|
1715
1792
|
|
|
1716
1793
|
</div>
|
|
@@ -2301,6 +2378,34 @@ circle.position.x += 100;
|
|
|
2301
2378
|
|
|
2302
2379
|
|
|
2303
2380
|
|
|
2381
|
+
</div>
|
|
2382
|
+
|
|
2383
|
+
</div>
|
|
2384
|
+
</div>
|
|
2385
|
+
|
|
2386
|
+
|
|
2387
|
+
<div id="scope" class="member">
|
|
2388
|
+
<div class="member-link">
|
|
2389
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
2390
|
+
</div>
|
|
2391
|
+
<div class="member-description hidden">
|
|
2392
|
+
|
|
2393
|
+
<div class="member-text">
|
|
2394
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
2395
|
+
|
|
2396
|
+
<p>Read only.</p>
|
|
2397
|
+
|
|
2398
|
+
|
|
2399
|
+
|
|
2400
|
+
<ul class="member-list">
|
|
2401
|
+
<h4>Type:</h4>
|
|
2402
|
+
<li>
|
|
2403
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
2404
|
+
</li>
|
|
2405
|
+
</ul>
|
|
2406
|
+
|
|
2407
|
+
|
|
2408
|
+
|
|
2304
2409
|
</div>
|
|
2305
2410
|
|
|
2306
2411
|
</div>
|
|
@@ -2414,6 +2519,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
2414
2519
|
|
|
2415
2520
|
<div class="member-text">
|
|
2416
2521
|
<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>
|
|
2522
|
+
<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>
|
|
2417
2523
|
<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>
|
|
2418
2524
|
|
|
2419
2525
|
|
|
@@ -2915,7 +3021,7 @@ path3.strokeJoin = 'bevel';
|
|
|
2915
3021
|
<div class="member-description hidden">
|
|
2916
3022
|
|
|
2917
3023
|
<div class="member-text">
|
|
2918
|
-
<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>
|
|
3024
|
+
<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>
|
|
2919
3025
|
|
|
2920
3026
|
|
|
2921
3027
|
|
|
@@ -4354,22 +4460,22 @@ function onMouseDown(event) {
|
|
|
4354
4460
|
<div class="member-description hidden">
|
|
4355
4461
|
<div class="member-text">
|
|
4356
4462
|
<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>
|
|
4357
|
-
<p>The options object allows you to control the specifics of the hit-
|
|
4463
|
+
<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>
|
|
4358
4464
|
<ul class="member-list">
|
|
4359
4465
|
<h4>Options:</h4>
|
|
4360
|
-
<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>
|
|
4466
|
+
<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>
|
|
4361
4467
|
<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>
|
|
4362
4468
|
<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>
|
|
4363
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
4364
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
4365
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
4469
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
4470
|
+
<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>
|
|
4471
|
+
<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>
|
|
4366
4472
|
<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>
|
|
4367
4473
|
<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>
|
|
4368
4474
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
4369
4475
|
<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>
|
|
4370
4476
|
<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>
|
|
4371
4477
|
<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>
|
|
4372
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
4478
|
+
<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>
|
|
4373
4479
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
4374
4480
|
</ul>
|
|
4375
4481
|
|
|
@@ -4608,7 +4714,7 @@ function onMouseDown(event) {
|
|
|
4608
4714
|
<h4>Returns:</h4>
|
|
4609
4715
|
|
|
4610
4716
|
<li>
|
|
4611
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
4717
|
+
<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
|
|
4612
4718
|
</li>
|
|
4613
4719
|
|
|
4614
4720
|
|
|
@@ -4781,6 +4887,8 @@ function onMouseDown(event) {
|
|
|
4781
4887
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
4782
4888
|
<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>
|
|
4783
4889
|
<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>
|
|
4890
|
+
<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>
|
|
4891
|
+
<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>
|
|
4784
4892
|
<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>
|
|
4785
4893
|
</ul>
|
|
4786
4894
|
|
|
@@ -4823,9 +4931,13 @@ function onMouseDown(event) {
|
|
|
4823
4931
|
<div class="member-description hidden">
|
|
4824
4932
|
<div class="member-text">
|
|
4825
4933
|
<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>
|
|
4934
|
+
<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>
|
|
4826
4935
|
<ul class="member-list">
|
|
4827
4936
|
<h4>Options:</h4>
|
|
4828
4937
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
4938
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
4939
|
+
value of the rasters created for `<image>` elements, to load their
|
|
4940
|
+
images with CORS</li>
|
|
4829
4941
|
<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>
|
|
4830
4942
|
<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>
|
|
4831
4943
|
<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>
|
|
@@ -5301,9 +5413,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5301
5413
|
</div>
|
|
5302
5414
|
|
|
5303
5415
|
|
|
5304
|
-
<div id="reduce
|
|
5416
|
+
<div id="reduce" class="member">
|
|
5305
5417
|
<div class="member-link">
|
|
5306
|
-
<a name="reduce
|
|
5418
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
5307
5419
|
</div>
|
|
5308
5420
|
<div class="member-description hidden">
|
|
5309
5421
|
<div class="member-text">
|
|
@@ -5315,9 +5427,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5315
5427
|
|
|
5316
5428
|
<li>
|
|
5317
5429
|
<tt>options:</tt>
|
|
5318
|
-
|
|
5319
|
-
|
|
5320
|
-
|
|
5430
|
+
<tt>Object</tt>
|
|
5431
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
5432
|
+
— optional
|
|
5321
5433
|
</li>
|
|
5322
5434
|
|
|
5323
5435
|
</ul>
|
|
@@ -5559,7 +5671,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5559
5671
|
</div>
|
|
5560
5672
|
<div class="member-description hidden">
|
|
5561
5673
|
<div class="member-text">
|
|
5562
|
-
<p>Checks whether the item has a fill
|
|
5674
|
+
<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>
|
|
5563
5675
|
|
|
5564
5676
|
|
|
5565
5677
|
|
|
@@ -5567,7 +5679,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5567
5679
|
<h4>Returns:</h4>
|
|
5568
5680
|
|
|
5569
5681
|
<li>
|
|
5570
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
5682
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
5571
5683
|
</li>
|
|
5572
5684
|
|
|
5573
5685
|
|
|
@@ -5706,7 +5818,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5706
5818
|
</div>
|
|
5707
5819
|
<div class="member-description hidden">
|
|
5708
5820
|
<div class="member-text">
|
|
5709
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
5821
|
+
<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>
|
|
5710
5822
|
|
|
5711
5823
|
|
|
5712
5824
|
<ul class="member-list">
|
|
@@ -5747,7 +5859,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5747
5859
|
</div>
|
|
5748
5860
|
<div class="member-description hidden">
|
|
5749
5861
|
<div class="member-text">
|
|
5750
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
5862
|
+
<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>
|
|
5751
5863
|
|
|
5752
5864
|
|
|
5753
5865
|
<ul class="member-list">
|
|
@@ -6705,11 +6817,11 @@ circle.scale(3, 1);
|
|
|
6705
6817
|
|
|
6706
6818
|
<div id="fitbounds-rectangle" class="member">
|
|
6707
6819
|
<div class="member-link">
|
|
6708
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
6820
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
6709
6821
|
</div>
|
|
6710
6822
|
<div class="member-description hidden">
|
|
6711
6823
|
<div class="member-text">
|
|
6712
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
6824
|
+
<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>
|
|
6713
6825
|
|
|
6714
6826
|
|
|
6715
6827
|
<ul class="member-list">
|
|
@@ -6723,10 +6835,10 @@ circle.scale(3, 1);
|
|
|
6723
6835
|
</li>
|
|
6724
6836
|
|
|
6725
6837
|
<li>
|
|
6726
|
-
<tt>
|
|
6727
|
-
<tt>Boolean</tt>
|
|
6728
|
-
|
|
6729
|
-
— optional, default: <tt
|
|
6838
|
+
<tt>fit:</tt>
|
|
6839
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
6840
|
+
— 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>.
|
|
6841
|
+
— optional, default: <tt>‘contain’</tt>
|
|
6730
6842
|
</li>
|
|
6731
6843
|
|
|
6732
6844
|
</ul>
|
|
@@ -6768,7 +6880,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
6768
6880
|
</div>
|
|
6769
6881
|
|
|
6770
6882
|
|
|
6771
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
6883
|
+
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle, covering all of it:</span></h4>
|
|
6772
6884
|
|
|
6773
6885
|
<div class="paperscript split">
|
|
6774
6886
|
|
|
@@ -6795,7 +6907,7 @@ var circlePath = new Path.Circle({
|
|
|
6795
6907
|
|
|
6796
6908
|
// Fit the circlePath to the bounding rectangle of
|
|
6797
6909
|
// the rectangular path:
|
|
6798
|
-
circlePath.fitBounds(path.bounds,
|
|
6910
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
6799
6911
|
</script>
|
|
6800
6912
|
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
|
|
6801
6913
|
</div>
|
|
@@ -7445,7 +7557,7 @@ function onMouseDown(event) {
|
|
|
7445
7557
|
<ul class="member-list">
|
|
7446
7558
|
<h4>Options:</h4>
|
|
7447
7559
|
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
|
7448
|
-
<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>
|
|
7560
|
+
<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>
|
|
7449
7561
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
7450
7562
|
</ul>
|
|
7451
7563
|
|
|
@@ -7833,7 +7945,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
7833
7945
|
|
|
7834
7946
|
<!-- =========================== copyright notice ========================== -->
|
|
7835
7947
|
<p class="footer">
|
|
7836
|
-
Paper.js v0.
|
|
7948
|
+
Paper.js v0.14.0<br>
|
|
7837
7949
|
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>
|
|
7838
7950
|
<div class="content-end"></div>
|
|
7839
7951
|
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
<div class="member-description hidden">
|
|
401
401
|
|
|
402
402
|
<div class="member-text">
|
|
403
|
-
<p>The top-left point of the rectangle</p>
|
|
403
|
+
<p>The top-left point of the rectangle. Setting it moves the whole rectangle, unlike <a href="../classes/Rectangle.html#topleft"><tt>topLeft</tt></a>.</p>
|
|
404
404
|
|
|
405
405
|
|
|
406
406
|
|
|
@@ -560,7 +560,7 @@
|
|
|
560
560
|
<div class="member-description hidden">
|
|
561
561
|
|
|
562
562
|
<div class="member-text">
|
|
563
|
-
<p>The center point of the rectangle.</p>
|
|
563
|
+
<p>The center point of the rectangle. Setting it moves the whole rectangle.</p>
|
|
564
564
|
|
|
565
565
|
|
|
566
566
|
|
|
@@ -586,7 +586,7 @@
|
|
|
586
586
|
<div class="member-description hidden">
|
|
587
587
|
|
|
588
588
|
<div class="member-text">
|
|
589
|
-
<p>The top-left point of the rectangle.</p>
|
|
589
|
+
<p>The top-left point of the rectangle. Note that this doesn’t move the whole rectangle; the bottom-right corner stays where it was.</p>
|
|
590
590
|
|
|
591
591
|
|
|
592
592
|
|
|
@@ -612,7 +612,7 @@
|
|
|
612
612
|
<div class="member-description hidden">
|
|
613
613
|
|
|
614
614
|
<div class="member-text">
|
|
615
|
-
<p>The top-right point of the rectangle.</p>
|
|
615
|
+
<p>The top-right point of the rectangle. Note that this doesn’t move the whole rectangle; the bottom-left corner stays where it was.</p>
|
|
616
616
|
|
|
617
617
|
|
|
618
618
|
|
|
@@ -638,7 +638,7 @@
|
|
|
638
638
|
<div class="member-description hidden">
|
|
639
639
|
|
|
640
640
|
<div class="member-text">
|
|
641
|
-
<p>The bottom-left point of the rectangle.</p>
|
|
641
|
+
<p>The bottom-left point of the rectangle. Note that this doesn’t move the whole rectangle; the top-right corner stays where it was.</p>
|
|
642
642
|
|
|
643
643
|
|
|
644
644
|
|
|
@@ -664,7 +664,7 @@
|
|
|
664
664
|
<div class="member-description hidden">
|
|
665
665
|
|
|
666
666
|
<div class="member-text">
|
|
667
|
-
<p>The bottom-right point of the rectangle.</p>
|
|
667
|
+
<p>The bottom-right point of the rectangle. Note that this doesn’t move the whole rectangle; the top-left corner stays where it was.</p>
|
|
668
668
|
|
|
669
669
|
|
|
670
670
|
|
|
@@ -690,7 +690,7 @@
|
|
|
690
690
|
<div class="member-description hidden">
|
|
691
691
|
|
|
692
692
|
<div class="member-text">
|
|
693
|
-
<p>The left-center point of the rectangle.</p>
|
|
693
|
+
<p>The left-center point of the rectangle. Setting it moves the left hand side while the right hand side stays where it was, and moves the whole rectangle vertically.</p>
|
|
694
694
|
|
|
695
695
|
|
|
696
696
|
|
|
@@ -716,7 +716,7 @@
|
|
|
716
716
|
<div class="member-description hidden">
|
|
717
717
|
|
|
718
718
|
<div class="member-text">
|
|
719
|
-
<p>The top-center point of the rectangle.</p>
|
|
719
|
+
<p>The top-center point of the rectangle. Setting it moves the top while the bottom stays where it was, and moves the whole rectangle horizontally.</p>
|
|
720
720
|
|
|
721
721
|
|
|
722
722
|
|
|
@@ -742,7 +742,7 @@
|
|
|
742
742
|
<div class="member-description hidden">
|
|
743
743
|
|
|
744
744
|
<div class="member-text">
|
|
745
|
-
<p>The right-center point of the rectangle.</p>
|
|
745
|
+
<p>The right-center point of the rectangle. Setting it moves the right hand side while the left hand side stays where it was, and moves the whole rectangle vertically.</p>
|
|
746
746
|
|
|
747
747
|
|
|
748
748
|
|
|
@@ -768,7 +768,7 @@
|
|
|
768
768
|
<div class="member-description hidden">
|
|
769
769
|
|
|
770
770
|
<div class="member-text">
|
|
771
|
-
<p>The bottom-center point of the rectangle.</p>
|
|
771
|
+
<p>The bottom-center point of the rectangle. Setting it moves the bottom while the top stays where it was, and moves the whole rectangle horizontally.</p>
|
|
772
772
|
|
|
773
773
|
|
|
774
774
|
|
|
@@ -826,6 +826,7 @@
|
|
|
826
826
|
<div class="member-text">
|
|
827
827
|
<p>Specifies whether an item’s bounds are to appear as selected.</p>
|
|
828
828
|
<p>Paper.js draws the bounds of items with selected bounds on top of your project. This is very useful when debugging.</p>
|
|
829
|
+
<p>This property is only available on the rectangle returned by <a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>, and the selection always shows these bounds. Rectangles returned by other getters such as <a href="../classes/Item.html#strokebounds"><tt>item.strokeBounds</tt></a> don’t have it.</p>
|
|
829
830
|
|
|
830
831
|
|
|
831
832
|
|
|
@@ -1645,7 +1646,7 @@ intersectionPath.fillColor = 'red';
|
|
|
1645
1646
|
|
|
1646
1647
|
<!-- =========================== copyright notice ========================== -->
|
|
1647
1648
|
<p class="footer">
|
|
1648
|
-
Paper.js v0.
|
|
1649
|
+
Paper.js v0.14.0<br>
|
|
1649
1650
|
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>
|
|
1650
1651
|
<div class="content-end"></div>
|
|
1651
1652
|
|
|
@@ -930,7 +930,7 @@ path.segments[2].selected = true;
|
|
|
930
930
|
|
|
931
931
|
<!-- =========================== copyright notice ========================== -->
|
|
932
932
|
<p class="footer">
|
|
933
|
-
Paper.js v0.
|
|
933
|
+
Paper.js v0.14.0<br>
|
|
934
934
|
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>
|
|
935
935
|
<div class="content-end"></div>
|
|
936
936
|
|