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.
Files changed (54) hide show
  1. package/CHANGELOG.md +318 -0
  2. package/README.md +45 -26
  3. package/dist/docs/assets/js/paper.js +1210 -481
  4. package/dist/docs/classes/ChangeFlag.html +384 -0
  5. package/dist/docs/classes/Color.html +63 -47
  6. package/dist/docs/classes/CompoundPath.html +219 -62
  7. package/dist/docs/classes/Curve.html +9 -7
  8. package/dist/docs/classes/CurveLocation.html +1 -1
  9. package/dist/docs/classes/Event.html +1 -1
  10. package/dist/docs/classes/Gradient.html +1 -1
  11. package/dist/docs/classes/GradientStop.html +1 -1
  12. package/dist/docs/classes/Group.html +151 -27
  13. package/dist/docs/classes/HitResult.html +3 -2
  14. package/dist/docs/classes/HostItem.html +6721 -0
  15. package/dist/docs/classes/Item.html +120 -27
  16. package/dist/docs/classes/Key.html +1 -1
  17. package/dist/docs/classes/KeyEvent.html +1 -1
  18. package/dist/docs/classes/Layer.html +151 -27
  19. package/dist/docs/classes/Matrix.html +1 -1
  20. package/dist/docs/classes/MouseEvent.html +1 -1
  21. package/dist/docs/classes/PaperScope.html +88 -1
  22. package/dist/docs/classes/PaperScript.html +2 -1
  23. package/dist/docs/classes/Path.html +232 -72
  24. package/dist/docs/classes/PathItem.html +337 -180
  25. package/dist/docs/classes/Point.html +143 -21
  26. package/dist/docs/classes/PointText.html +151 -27
  27. package/dist/docs/classes/Project.html +201 -8
  28. package/dist/docs/classes/Raster.html +150 -38
  29. package/dist/docs/classes/Rectangle.html +12 -11
  30. package/dist/docs/classes/Segment.html +1 -1
  31. package/dist/docs/classes/Shape.html +120 -27
  32. package/dist/docs/classes/Size.html +81 -21
  33. package/dist/docs/classes/Style.html +35 -3
  34. package/dist/docs/classes/SymbolDefinition.html +1 -1
  35. package/dist/docs/classes/SymbolItem.html +121 -28
  36. package/dist/docs/classes/TextItem.html +151 -27
  37. package/dist/docs/classes/Tool.html +127 -1
  38. package/dist/docs/classes/ToolEvent.html +27 -1
  39. package/dist/docs/classes/Tween.html +1 -1
  40. package/dist/docs/classes/View.html +345 -10
  41. package/dist/docs/classes/global.html +1 -1
  42. package/dist/docs/classes/index.html +2 -2
  43. package/dist/docs/index.html +1 -1
  44. package/dist/node/canvas.js +1 -1
  45. package/dist/node/self.js +4 -3
  46. package/dist/paper-core.js +1182 -465
  47. package/dist/paper-core.min.js +3 -3
  48. package/dist/paper-full.js +1210 -481
  49. package/dist/paper-full.min.js +3 -3
  50. package/dist/paper-sourced.js +18631 -0
  51. package/dist/paper.d.ts +606 -78
  52. package/examples/Rasters/Smoothing.html +1 -1
  53. package/package.json +6 -17
  54. 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 DOM Image, a Canvas, a data url, a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas). Reading this property will return the url of the source image or a data-url. 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>
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>HTMLImageElement</tt>⟋<tt>HTMLCanvasElement</tt>⟋<tt>String</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&rsquo;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&rsquo; 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
+ &mdash;&nbsp;the image format to encode
805
+ &mdash;&nbsp;optional, default: <tt>&lsquo;image/png&rsquo;</tt>
806
+ </li>
807
+
808
+ <li>
809
+ <tt>quality:</tt>
810
+ <tt>Number</tt>
811
+ &mdash;&nbsp;the image quality between <code>0</code> and <code>1</code>, for formats that use lossy compression, such as <code>&#39;image/jpeg&#39;</code>
812
+ &mdash;&nbsp;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>&nbsp;&mdash;&nbsp;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-rect" class="member">
1152
+ <div id="getimagedata" class="member">
1134
1153
  <div class="member-link">
1135
- <a name="getimagedata-rect" href="#getimagedata-rect"><tt><b>getImageData</b>(rect)</tt></a>
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
+ &mdash;&nbsp;the area of the raster to get the image data of, in pixel coordinates
1168
+ &mdash;&nbsp;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>&nbsp;&mdash;&nbsp;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&rsquo;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- test and may contain a combination of the following values:</p>
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> &mdash; the tolerance of the hit-test &mdash;&nbsp;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> &mdash; the tolerance of the hit-test, in project coordinates &mdash;&nbsp;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> &mdash; 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>, &hellip;</li>
4362
4468
  <li><tt>options.match: <tt>Function</tt></tt> &mdash; 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> &mdash; hit-test the fill of items &mdash;&nbsp;default: <tt>true</tt></li>
4364
- <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; hit-test the stroke of path items, taking into account the setting of stroke color and width &mdash;&nbsp;default: <tt>true</tt></li>
4365
- <li><tt>options.segments: <tt>Boolean</tt></tt> &mdash; 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 &mdash;&nbsp;default: <tt>true</tt></li>
4469
+ <li><tt>options.fill: <tt>Boolean</tt></tt> &mdash; hit-test the fill of items</li>
4470
+ <li><tt>options.stroke: <tt>Boolean</tt></tt> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; 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> &mdash; hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
4478
+ <li><tt>options.guides: <tt>Boolean</tt></tt> &mdash; 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> &mdash; 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>&nbsp;&mdash;&nbsp;the list of matching descendant items
4717
+ <tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;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> &mdash; the amount of fractional digits in numbers used in SVG data &mdash;&nbsp;default: <tt>5</tt></li>
4782
4888
  <li><tt>options.matchShapes: <tt>Boolean</tt></tt> &mdash; whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match &mdash;&nbsp;default: <tt>false</tt></li>
4783
4889
  <li><tt>options.embedImages: <tt>Boolean</tt></tt> &mdash; whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. &mdash;&nbsp;default: <tt>true</tt></li>
4890
+ <li><tt>options.reuseImages: <tt>Boolean</tt></tt> &mdash; whether raster images with the same content should only be exported once into the <code>&lt;defs&gt;</code> element, and placed through <code>&lt;use&gt;</code> elements referencing it &mdash;&nbsp;default: <tt>false</tt></li>
4891
+ <li><tt>options.idPrefix: <tt>String</tt></tt> &mdash; 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 &mdash;&nbsp;default: <tt>&rsquo;&rsquo;</tt></li>
4784
4892
  <li><tt>options.reduceAttributes: <tt>Boolean</tt></tt> &mdash; 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). &mdash;&nbsp;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&rsquo;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>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
4826
4935
  <ul class="member-list">
4827
4936
  <h4>Options:</h4>
4828
4937
  <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape items should be expanded to path items &mdash;&nbsp;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> &mdash; 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> &mdash; 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> &mdash; whether the imported items should be added to the item that <code>importSVG()</code> is called on &mdash;&nbsp;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-options" class="member">
5416
+ <div id="reduce" class="member">
5305
5417
  <div class="member-link">
5306
- <a name="reduce-options" href="#reduce-options"><tt><b>reduce</b>(options)</tt></a>
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
+ &mdash;&nbsp;the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
5432
+ &mdash;&nbsp;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.</p>
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>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
5682
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<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[, fill])</tt></a>
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> fit within the specified rectangle, without changing its aspect ratio.</p>
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>fill:</tt>
6727
- <tt>Boolean</tt>
6728
-
6729
- &mdash;&nbsp;optional, default: <tt>false</tt>
6838
+ <tt>fit:</tt>
6839
+ <tt>String</tt>⟋<tt>Boolean</tt>
6840
+ &mdash;&nbsp;how to fit the item, as in CSS&rsquo;s <code>object-fit</code>: <code>&#39;contain&#39;</code> fits all of it within the rectangle, <code>&#39;cover&#39;</code> makes it cover the whole rectangle, and <code>&#39;fill&#39;</code> stretches it to the rectangle, changing its aspect ratio. The deprecated <code>true</code> and <code>false</code> stand for <code>&#39;cover&#39;</code> and <code>&#39;contain&#39;</code>.
6841
+ &mdash;&nbsp;optional, default: <tt>&lsquo;contain&rsquo;</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 with the fill parameter set to true:</span></h4>
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, true);
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> &mdash; the duration of the tweening</li>
7448
- <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
7560
+ <li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> &mdash; an easing function or the type of the easing: <tt>&lsquo;linear&rsquo; &lsquo;easeInQuad&rsquo; &lsquo;easeOutQuad&rsquo; &lsquo;easeInOutQuad&rsquo; &lsquo;easeInCubic&rsquo; &lsquo;easeOutCubic&rsquo; &lsquo;easeInOutCubic&rsquo; &lsquo;easeInQuart&rsquo; &lsquo;easeOutQuart&rsquo; &lsquo;easeInOutQuart&rsquo; &lsquo;easeInQuint&rsquo; &lsquo;easeOutQuint&rsquo; &lsquo;easeInOutQuint&rsquo; &lsquo;easeInSine&rsquo; &lsquo;easeOutSine&rsquo; &lsquo;easeInOutSine&rsquo; &lsquo;easeInExpo&rsquo; &lsquo;easeOutExpo&rsquo; &lsquo;easeInOutExpo&rsquo; &lsquo;easeInCirc&rsquo; &lsquo;easeOutCirc&rsquo; &lsquo;easeInOutCirc&rsquo;</tt> &mdash;&nbsp;default: <tt>&lsquo;linear&rsquo;</tt></li>
7449
7561
  <li><tt>options.start: <tt>Boolean</tt></tt> &mdash; whether to start tweening automatically &mdash;&nbsp;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.12.20<br>
7948
+ Paper.js v0.14.0<br>
7837
7949
  Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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.12.20<br>
1649
+ Paper.js v0.14.0<br>
1649
1650
  Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <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.12.20<br>
933
+ Paper.js v0.14.0<br>
934
934
  Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
935
935
  <div class="content-end"></div>
936
936