paper 0.12.19 → 0.13.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 +250 -0
- package/README.md +34 -27
- package/dist/docs/assets/js/paper.js +791 -366
- package/dist/docs/classes/Color.html +63 -47
- package/dist/docs/classes/CompoundPath.html +162 -59
- 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 +63 -24
- package/dist/docs/classes/HitResult.html +1 -1
- package/dist/docs/classes/Item.html +63 -24
- package/dist/docs/classes/Key.html +1 -1
- package/dist/docs/classes/KeyEvent.html +1 -1
- package/dist/docs/classes/Layer.html +63 -24
- package/dist/docs/classes/Matrix.html +1 -1
- package/dist/docs/classes/MouseEvent.html +1 -1
- package/dist/docs/classes/PaperScope.html +87 -1
- package/dist/docs/classes/PaperScript.html +1 -1
- package/dist/docs/classes/Path.html +174 -68
- package/dist/docs/classes/PathItem.html +280 -177
- package/dist/docs/classes/Point.html +143 -21
- package/dist/docs/classes/PointText.html +94 -24
- package/dist/docs/classes/Project.html +14 -8
- package/dist/docs/classes/Raster.html +93 -35
- package/dist/docs/classes/Rectangle.html +12 -11
- package/dist/docs/classes/Segment.html +1 -1
- package/dist/docs/classes/Shape.html +63 -24
- package/dist/docs/classes/Size.html +81 -21
- package/dist/docs/classes/Style.html +34 -2
- package/dist/docs/classes/SymbolDefinition.html +1 -1
- package/dist/docs/classes/SymbolItem.html +64 -25
- package/dist/docs/classes/TextItem.html +94 -24
- package/dist/docs/classes/Tool.html +2 -1
- package/dist/docs/classes/ToolEvent.html +27 -1
- package/dist/docs/classes/Tween.html +1 -1
- package/dist/docs/classes/View.html +203 -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 +10 -8
- package/dist/node/self.js +13 -4
- package/dist/paper-core.js +772 -355
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +791 -366
- package/dist/paper-full.min.js +3 -3
- package/dist/paper.d.ts +324 -73
- package/examples/Rasters/Smoothing.html +1 -1
- package/package.json +5 -11
- package/dist/node/xml.js +0 -40
|
@@ -551,22 +551,22 @@ var path2 = new Path.Circle(new Point(175, 50), 20);
|
|
|
551
551
|
<div class="member-description hidden">
|
|
552
552
|
<div class="member-text">
|
|
553
553
|
<p>Performs a hit-test on the items contained within the project at the location of the specified point.</p>
|
|
554
|
-
<p>The options object allows you to control the specifics of the hit-test and may contain a combination of the following values:</p>
|
|
554
|
+
<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>
|
|
555
555
|
<ul class="member-list">
|
|
556
556
|
<h4>Options:</h4>
|
|
557
|
-
<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>
|
|
557
|
+
<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>
|
|
558
558
|
<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>
|
|
559
559
|
<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>
|
|
560
|
-
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items
|
|
561
|
-
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path
|
|
562
|
-
<li><tt>options.segments: <tt>Boolean</tt></tt> — hit-test for <a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of
|
|
560
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
561
|
+
<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>
|
|
562
|
+
<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>
|
|
563
563
|
<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>
|
|
564
564
|
<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>
|
|
565
565
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
566
566
|
<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>
|
|
567
567
|
<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>
|
|
568
568
|
<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>
|
|
569
|
-
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <
|
|
569
|
+
<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>
|
|
570
570
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
571
571
|
</ul>
|
|
572
572
|
|
|
@@ -700,7 +700,7 @@ var path2 = new Path.Circle(new Point(175, 50), 20);
|
|
|
700
700
|
<h4>Returns:</h4>
|
|
701
701
|
|
|
702
702
|
<li>
|
|
703
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching items contained in the project
|
|
703
|
+
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching items contained in the project, in their stacking order from bottom to top, with each item listed before its own descendants
|
|
704
704
|
</li>
|
|
705
705
|
|
|
706
706
|
|
|
@@ -1151,6 +1151,8 @@ for (var i = 0; i < items.length; i++) {
|
|
|
1151
1151
|
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
|
1152
1152
|
<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>
|
|
1153
1153
|
<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>
|
|
1154
|
+
<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>
|
|
1155
|
+
<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>
|
|
1154
1156
|
<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>
|
|
1155
1157
|
</ul>
|
|
1156
1158
|
|
|
@@ -1193,9 +1195,13 @@ for (var i = 0; i < items.length; i++) {
|
|
|
1193
1195
|
<div class="member-description hidden">
|
|
1194
1196
|
<div class="member-text">
|
|
1195
1197
|
<p>Converts the provided SVG content into Paper.js items and adds them to the active layer of this project. Note that the project is not cleared first. You can call <a href="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
|
|
1198
|
+
<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>
|
|
1196
1199
|
<ul class="member-list">
|
|
1197
1200
|
<h4>Options:</h4>
|
|
1198
1201
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
1202
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
1203
|
+
value of the rasters created for `<image>` elements, to load their
|
|
1204
|
+
images with CORS</li>
|
|
1199
1205
|
<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>
|
|
1200
1206
|
<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>
|
|
1201
1207
|
<li><tt>options.insert: <tt>Boolean</tt></tt> — whether the imported items should be added to the project that <code>importSVG()</code> is called on — default: <tt>true</tt></li>
|
|
@@ -1297,7 +1303,7 @@ for (var i = 0; i < items.length; i++) {
|
|
|
1297
1303
|
|
|
1298
1304
|
<!-- =========================== copyright notice ========================== -->
|
|
1299
1305
|
<p class="footer">
|
|
1300
|
-
Paper.js v0.
|
|
1306
|
+
Paper.js v0.13.0<br>
|
|
1301
1307
|
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>
|
|
1302
1308
|
<div class="content-end"></div>
|
|
1303
1309
|
|
|
@@ -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
|
|
|
@@ -1369,6 +1388,7 @@ group.children['example'].fillColor = 'red';
|
|
|
1369
1388
|
|
|
1370
1389
|
<div class="member-text">
|
|
1371
1390
|
<p>The path style of the item.</p>
|
|
1391
|
+
<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
1392
|
|
|
1373
1393
|
|
|
1374
1394
|
|
|
@@ -1711,6 +1731,37 @@ circle2.opacity = 0.5;
|
|
|
1711
1731
|
</div>
|
|
1712
1732
|
|
|
1713
1733
|
|
|
1734
|
+
</div>
|
|
1735
|
+
|
|
1736
|
+
</div>
|
|
1737
|
+
</div>
|
|
1738
|
+
|
|
1739
|
+
|
|
1740
|
+
<div id="guide" class="member">
|
|
1741
|
+
<div class="member-link">
|
|
1742
|
+
<a name="guide" href="#guide"><tt><b>guide</b></tt></a>
|
|
1743
|
+
</div>
|
|
1744
|
+
<div class="member-description hidden">
|
|
1745
|
+
|
|
1746
|
+
<div class="member-text">
|
|
1747
|
+
<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>
|
|
1748
|
+
|
|
1749
|
+
|
|
1750
|
+
|
|
1751
|
+
<ul class="member-list">
|
|
1752
|
+
<h4>Default:</h4>
|
|
1753
|
+
<li><tt>false</tt></li>
|
|
1754
|
+
</ul>
|
|
1755
|
+
|
|
1756
|
+
<ul class="member-list">
|
|
1757
|
+
<h4>Type:</h4>
|
|
1758
|
+
<li>
|
|
1759
|
+
<tt>Boolean</tt>
|
|
1760
|
+
</li>
|
|
1761
|
+
</ul>
|
|
1762
|
+
|
|
1763
|
+
|
|
1764
|
+
|
|
1714
1765
|
</div>
|
|
1715
1766
|
|
|
1716
1767
|
</div>
|
|
@@ -2414,6 +2465,7 @@ console.log(group.children[0] == path); // true</code></pre>
|
|
|
2414
2465
|
|
|
2415
2466
|
<div class="member-text">
|
|
2416
2467
|
<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>
|
|
2468
|
+
<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
2469
|
<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
2470
|
|
|
2419
2471
|
|
|
@@ -4354,22 +4406,22 @@ function onMouseDown(event) {
|
|
|
4354
4406
|
<div class="member-description hidden">
|
|
4355
4407
|
<div class="member-text">
|
|
4356
4408
|
<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-
|
|
4409
|
+
<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
4410
|
<ul class="member-list">
|
|
4359
4411
|
<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>
|
|
4412
|
+
<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
4413
|
<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
4414
|
<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
|
|
4415
|
+
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items</li>
|
|
4416
|
+
<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>
|
|
4417
|
+
<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
4418
|
<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
4419
|
<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
4420
|
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
|
4369
4421
|
<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
4422
|
<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
4423
|
<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 <
|
|
4424
|
+
<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
4425
|
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
|
4374
4426
|
</ul>
|
|
4375
4427
|
|
|
@@ -4608,7 +4660,7 @@ function onMouseDown(event) {
|
|
|
4608
4660
|
<h4>Returns:</h4>
|
|
4609
4661
|
|
|
4610
4662
|
<li>
|
|
4611
|
-
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
|
4663
|
+
<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
4664
|
</li>
|
|
4613
4665
|
|
|
4614
4666
|
|
|
@@ -4781,6 +4833,8 @@ function onMouseDown(event) {
|
|
|
4781
4833
|
<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
4834
|
<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
4835
|
<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>
|
|
4836
|
+
<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>
|
|
4837
|
+
<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
4838
|
<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
4839
|
</ul>
|
|
4786
4840
|
|
|
@@ -4823,9 +4877,13 @@ function onMouseDown(event) {
|
|
|
4823
4877
|
<div class="member-description hidden">
|
|
4824
4878
|
<div class="member-text">
|
|
4825
4879
|
<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>
|
|
4880
|
+
<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
4881
|
<ul class="member-list">
|
|
4827
4882
|
<h4>Options:</h4>
|
|
4828
4883
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
4884
|
+
<li>[options.crossOrigin] {String} the {@link Raster#crossOrigin}
|
|
4885
|
+
value of the rasters created for `<image>` elements, to load their
|
|
4886
|
+
images with CORS</li>
|
|
4829
4887
|
<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
4888
|
<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
4889
|
<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 +5359,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5301
5359
|
</div>
|
|
5302
5360
|
|
|
5303
5361
|
|
|
5304
|
-
<div id="reduce
|
|
5362
|
+
<div id="reduce" class="member">
|
|
5305
5363
|
<div class="member-link">
|
|
5306
|
-
<a name="reduce
|
|
5364
|
+
<a name="reduce" href="#reduce"><tt><b>reduce</b>([options])</tt></a>
|
|
5307
5365
|
</div>
|
|
5308
5366
|
<div class="member-description hidden">
|
|
5309
5367
|
<div class="member-text">
|
|
@@ -5315,9 +5373,9 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5315
5373
|
|
|
5316
5374
|
<li>
|
|
5317
5375
|
<tt>options:</tt>
|
|
5318
|
-
|
|
5319
|
-
|
|
5320
|
-
|
|
5376
|
+
<tt>Object</tt>
|
|
5377
|
+
— the options passed on to <a href="../classes/Path.html#reduce-options"><tt>path.reduce(options)</tt></a>
|
|
5378
|
+
— optional
|
|
5321
5379
|
</li>
|
|
5322
5380
|
|
|
5323
5381
|
</ul>
|
|
@@ -5706,7 +5764,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5706
5764
|
</div>
|
|
5707
5765
|
<div class="member-description hidden">
|
|
5708
5766
|
<div class="member-text">
|
|
5709
|
-
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
|
5767
|
+
<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
5768
|
|
|
5711
5769
|
|
|
5712
5770
|
<ul class="member-list">
|
|
@@ -5747,7 +5805,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5747
5805
|
</div>
|
|
5748
5806
|
<div class="member-description hidden">
|
|
5749
5807
|
<div class="member-text">
|
|
5750
|
-
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
|
5808
|
+
<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
5809
|
|
|
5752
5810
|
|
|
5753
5811
|
<ul class="member-list">
|
|
@@ -6705,11 +6763,11 @@ circle.scale(3, 1);
|
|
|
6705
6763
|
|
|
6706
6764
|
<div id="fitbounds-rectangle" class="member">
|
|
6707
6765
|
<div class="member-link">
|
|
6708
|
-
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[,
|
|
6766
|
+
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fit])</tt></a>
|
|
6709
6767
|
</div>
|
|
6710
6768
|
<div class="member-description hidden">
|
|
6711
6769
|
<div class="member-text">
|
|
6712
|
-
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a>
|
|
6770
|
+
<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
6771
|
|
|
6714
6772
|
|
|
6715
6773
|
<ul class="member-list">
|
|
@@ -6723,10 +6781,10 @@ circle.scale(3, 1);
|
|
|
6723
6781
|
</li>
|
|
6724
6782
|
|
|
6725
6783
|
<li>
|
|
6726
|
-
<tt>
|
|
6727
|
-
<tt>Boolean</tt>
|
|
6728
|
-
|
|
6729
|
-
— optional, default: <tt
|
|
6784
|
+
<tt>fit:</tt>
|
|
6785
|
+
<tt>String</tt>⟋<tt>Boolean</tt>
|
|
6786
|
+
— 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>.
|
|
6787
|
+
— optional, default: <tt>‘contain’</tt>
|
|
6730
6788
|
</li>
|
|
6731
6789
|
|
|
6732
6790
|
</ul>
|
|
@@ -6768,7 +6826,7 @@ circlePath.fitBounds(path.bounds);
|
|
|
6768
6826
|
</div>
|
|
6769
6827
|
|
|
6770
6828
|
|
|
6771
|
-
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle
|
|
6829
|
+
<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
6830
|
|
|
6773
6831
|
<div class="paperscript split">
|
|
6774
6832
|
|
|
@@ -6795,7 +6853,7 @@ var circlePath = new Path.Circle({
|
|
|
6795
6853
|
|
|
6796
6854
|
// Fit the circlePath to the bounding rectangle of
|
|
6797
6855
|
// the rectangular path:
|
|
6798
|
-
circlePath.fitBounds(path.bounds,
|
|
6856
|
+
circlePath.fitBounds(path.bounds, 'cover');
|
|
6799
6857
|
</script>
|
|
6800
6858
|
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
|
|
6801
6859
|
</div>
|
|
@@ -7445,7 +7503,7 @@ function onMouseDown(event) {
|
|
|
7445
7503
|
<ul class="member-list">
|
|
7446
7504
|
<h4>Options:</h4>
|
|
7447
7505
|
<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>
|
|
7506
|
+
<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
7507
|
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
|
7450
7508
|
</ul>
|
|
7451
7509
|
|
|
@@ -7833,7 +7891,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
7833
7891
|
|
|
7834
7892
|
<!-- =========================== copyright notice ========================== -->
|
|
7835
7893
|
<p class="footer">
|
|
7836
|
-
Paper.js v0.
|
|
7894
|
+
Paper.js v0.13.0<br>
|
|
7837
7895
|
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
7896
|
<div class="content-end"></div>
|
|
7839
7897
|
|
|
@@ -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.13.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.13.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
|
|