paper 0.14.0 → 0.15.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 +252 -0
- package/README.md +3 -1
- package/dist/docs/assets/js/paper.js +6997 -1658
- package/dist/docs/classes/AreaText.html +8658 -0
- package/dist/docs/classes/ChangeFlag.html +2 -1
- package/dist/docs/classes/Color.html +2 -1
- package/dist/docs/classes/CompoundPath.html +152 -67
- package/dist/docs/classes/Curve.html +2 -1
- package/dist/docs/classes/CurveLocation.html +2 -1
- package/dist/docs/classes/Event.html +5 -4
- package/dist/docs/classes/Gradient.html +2 -1
- package/dist/docs/classes/GradientStop.html +2 -1
- package/dist/docs/classes/Group.html +117 -15
- package/dist/docs/classes/HitResult.html +2 -1
- package/dist/docs/classes/HostItem.html +80 -15
- package/dist/docs/classes/Item.html +137 -15
- package/dist/docs/classes/Key.html +2 -1
- package/dist/docs/classes/KeyEvent.html +5 -4
- package/dist/docs/classes/Layer.html +114 -15
- package/dist/docs/classes/Matrix.html +2 -1
- package/dist/docs/classes/MouseEvent.html +5 -4
- package/dist/docs/classes/PaperScope.html +4 -2
- package/dist/docs/classes/PaperScript.html +5 -2
- package/dist/docs/classes/Path.html +126 -67
- package/dist/docs/classes/PathItem.html +270 -185
- package/dist/docs/classes/PathText.html +8528 -0
- package/dist/docs/classes/Point.html +13 -2
- package/dist/docs/classes/PointText.html +1346 -59
- package/dist/docs/classes/Project.html +40 -7
- package/dist/docs/classes/Raster.html +80 -15
- package/dist/docs/classes/Rectangle.html +3 -2
- package/dist/docs/classes/Segment.html +2 -1
- package/dist/docs/classes/Shape.html +80 -15
- package/dist/docs/classes/Size.html +4 -2
- package/dist/docs/classes/Style.html +767 -14
- package/dist/docs/classes/SymbolDefinition.html +2 -1
- package/dist/docs/classes/SymbolItem.html +80 -15
- package/dist/docs/classes/TextItem.html +1469 -179
- package/dist/docs/classes/TextRange.html +186 -0
- package/dist/docs/classes/TextStory.html +355 -0
- package/dist/docs/classes/Tool.html +2 -1
- package/dist/docs/classes/ToolEvent.html +57 -4
- package/dist/docs/classes/Tween.html +17 -1
- package/dist/docs/classes/View.html +9 -8
- package/dist/docs/classes/global.html +2 -1
- package/dist/docs/classes/index.html +2 -2
- package/dist/docs/index.html +1 -1
- package/dist/paper-core.js +6832 -1637
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +6997 -1658
- package/dist/paper-full.min.js +3 -3
- package/dist/{paper-sourced.js → paper-hosted.js} +7109 -1682
- package/dist/paper.d.ts +1727 -163
- package/examples/Scripts/AreaText.html +65 -0
- package/examples/Scripts/PathText.html +48 -0
- package/examples/Scripts/TextRanges.html +51 -0
- package/package.json +3 -2
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
<p>The Curve object represents the parts of a path that are connected by two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
|
|
19
19
|
<p>While a segment describe the anchor point and its incoming and outgoing handles, a Curve object describes the curve passing between two such segments. Curves and segments represent two different ways of looking at the same thing, but focusing on different aspects. Curves for example offer many convenient ways to work with parts of the path, finding lengths, positions or tangents at given offsets.</p>
|
|
20
20
|
|
|
21
|
+
|
|
21
22
|
</div>
|
|
22
23
|
|
|
23
24
|
<!-- =============================== constructors ========================== -->
|
|
@@ -2316,7 +2317,7 @@
|
|
|
2316
2317
|
|
|
2317
2318
|
<!-- =========================== copyright notice ========================== -->
|
|
2318
2319
|
<p class="footer">
|
|
2319
|
-
Paper.js v0.
|
|
2320
|
+
Paper.js v0.15.0<br>
|
|
2320
2321
|
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>
|
|
2321
2322
|
<div class="content-end"></div>
|
|
2322
2323
|
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a> objects, as defined by the curve-time <a href="../classes/CurveLocation.html#time"><tt>time</tt></a>, a value between <code>0</code> (beginning of the curve) and <code>1</code> (end of the curve). If the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index"><tt>index</tt></a> inside the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
|
|
19
19
|
<p>The class is in use in many places, such as <a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, <a href="../classes/Path.html#getlocationof-point"><tt>path.getLocationOf(point)</tt></a>, <a href="../classes/PathItem.html#getnearestlocation-point"><tt>pathItem.getNearestLocation(point)</tt></a>, <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>, etc.</p>
|
|
20
20
|
|
|
21
|
+
|
|
21
22
|
</div>
|
|
22
23
|
|
|
23
24
|
<!-- =============================== constructors ========================== -->
|
|
@@ -663,7 +664,7 @@
|
|
|
663
664
|
|
|
664
665
|
<!-- =========================== copyright notice ========================== -->
|
|
665
666
|
<p class="footer">
|
|
666
|
-
Paper.js v0.
|
|
667
|
+
Paper.js v0.15.0<br>
|
|
667
668
|
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>
|
|
668
669
|
<div class="content-end"></div>
|
|
669
670
|
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<p>The Event object is the base class for any of the other event types, such as <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a>, <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> and <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a>.</p>
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
|
|
@@ -28,14 +29,14 @@
|
|
|
28
29
|
<h2>Properties</h2>
|
|
29
30
|
|
|
30
31
|
|
|
31
|
-
<div id="
|
|
32
|
+
<div id="time" class="member">
|
|
32
33
|
<div class="member-link">
|
|
33
|
-
<a name="
|
|
34
|
+
<a name="time" href="#time"><tt><b>time</b></tt></a>
|
|
34
35
|
</div>
|
|
35
36
|
<div class="member-description hidden">
|
|
36
37
|
|
|
37
38
|
<div class="member-text">
|
|
38
|
-
<p>The time at which the event was created, in
|
|
39
|
+
<p>The time at which the event was created, in seconds, as the times of frame events are. Browsers count from the page’s time origin, as <code>performance.now()</code> does, while <a href="../classes/View.html#dispatchmouseevent-type-point"><tt>view.dispatchMouseEvent(type, point[, options])</tt></a> and <a href="../classes/View.html#dispatchkeyevent-type-key"><tt>view.dispatchKeyEvent(type, key[, options])</tt></a> use <code>Date.now()</code> unless the host passes a time, so only compare the times of events from the same source.</p>
|
|
39
40
|
|
|
40
41
|
<p>Read only.</p>
|
|
41
42
|
|
|
@@ -167,7 +168,7 @@
|
|
|
167
168
|
|
|
168
169
|
<!-- =========================== copyright notice ========================== -->
|
|
169
170
|
<p class="footer">
|
|
170
|
-
Paper.js v0.
|
|
171
|
+
Paper.js v0.15.0<br>
|
|
171
172
|
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>
|
|
172
173
|
<div class="content-end"></div>
|
|
173
174
|
|
|
@@ -80,6 +80,7 @@ path.fillColor = {
|
|
|
80
80
|
</div>
|
|
81
81
|
|
|
82
82
|
|
|
83
|
+
|
|
83
84
|
</div>
|
|
84
85
|
|
|
85
86
|
|
|
@@ -231,7 +232,7 @@ path.fillColor = {
|
|
|
231
232
|
|
|
232
233
|
<!-- =========================== copyright notice ========================== -->
|
|
233
234
|
<p class="footer">
|
|
234
|
-
Paper.js v0.
|
|
235
|
+
Paper.js v0.15.0<br>
|
|
235
236
|
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>
|
|
236
237
|
<div class="content-end"></div>
|
|
237
238
|
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<p>The GradientStop object.</p>
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
<!-- =============================== constructors ========================== -->
|
|
@@ -264,7 +265,7 @@ function onFrame(event) {
|
|
|
264
265
|
|
|
265
266
|
<!-- =========================== copyright notice ========================== -->
|
|
266
267
|
<p class="footer">
|
|
267
|
-
Paper.js v0.
|
|
268
|
+
Paper.js v0.15.0<br>
|
|
268
269
|
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>
|
|
269
270
|
<div class="content-end"></div>
|
|
270
271
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
<p>A Group is a collection of items. When you transform a Group, its children are treated as a single unit without changing their relative positions.</p>
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
<!-- =============================== constructors ========================== -->
|
|
@@ -295,6 +296,43 @@ function onFrame(event) {
|
|
|
295
296
|
|
|
296
297
|
|
|
297
298
|
|
|
299
|
+
<!-- ============================== methods ================================ -->
|
|
300
|
+
<div class="reference-members">
|
|
301
|
+
<h2>Methods</h2>
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
<div id="ungroup" class="member">
|
|
305
|
+
<div class="member-link">
|
|
306
|
+
<a name="ungroup" href="#ungroup"><tt><b>ungroup</b>()</tt></a>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="member-description hidden">
|
|
309
|
+
<div class="member-text">
|
|
310
|
+
<p>Replaces the group with its children, which keep their appearance: the group’s matrix is applied to them, and its clipping mask is released.</p>
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
<ul class="member-list">
|
|
315
|
+
<h4>Returns:</h4>
|
|
316
|
+
|
|
317
|
+
<li>
|
|
318
|
+
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the children, or <code>null</code> if the group has no parent
|
|
319
|
+
</li>
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
</ul>
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
</div>
|
|
335
|
+
|
|
298
336
|
|
|
299
337
|
|
|
300
338
|
|
|
@@ -309,7 +347,7 @@ function onFrame(event) {
|
|
|
309
347
|
<div class="member-description hidden">
|
|
310
348
|
|
|
311
349
|
<div class="member-text">
|
|
312
|
-
<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#
|
|
350
|
+
<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#host"><tt>project.host</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>
|
|
313
351
|
|
|
314
352
|
|
|
315
353
|
|
|
@@ -674,7 +712,7 @@ path.visible = false;
|
|
|
674
712
|
<div class="member-description hidden">
|
|
675
713
|
|
|
676
714
|
<div class="member-text">
|
|
677
|
-
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported.
|
|
715
|
+
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. Where the canvas doesn’t support a CSS blend mode natively, it draws as <code>'normal'</code>. Paper.js’s own modes <code>'add'</code>, <code>'subtract'</code>, <code>'average'</code>, <code>'pin-light'</code> and <code>'negation'</code> are emulated, which can have an impact on performance.</p>
|
|
678
716
|
|
|
679
717
|
|
|
680
718
|
<ul class="member-list">
|
|
@@ -827,6 +865,42 @@ circle2.opacity = 0.5;
|
|
|
827
865
|
</div>
|
|
828
866
|
|
|
829
867
|
|
|
868
|
+
<div id="textwrap" class="member">
|
|
869
|
+
<div class="member-link">
|
|
870
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
871
|
+
</div>
|
|
872
|
+
<div class="member-description hidden">
|
|
873
|
+
|
|
874
|
+
<div class="member-text">
|
|
875
|
+
<p>Specifies whether, and how, the item pushes aside the text of the <a href="../classes/AreaText.html"><tt>AreaText</tt></a> items below it in its layer: <code>null</code>, or an object with <code>offset</code>, the space kept between them, and <code>invert</code>, to let the text flow inside it instead. <code>true</code> sets the defaults.</p>
|
|
876
|
+
|
|
877
|
+
|
|
878
|
+
|
|
879
|
+
<ul class="member-list">
|
|
880
|
+
<h4>Default:</h4>
|
|
881
|
+
<li><tt>null</tt></li>
|
|
882
|
+
</ul>
|
|
883
|
+
|
|
884
|
+
<ul class="member-list">
|
|
885
|
+
<h4>Type:</h4>
|
|
886
|
+
<li>
|
|
887
|
+
<tt>Object</tt>
|
|
888
|
+
</li>
|
|
889
|
+
</ul>
|
|
890
|
+
|
|
891
|
+
|
|
892
|
+
<h4>Example:</h4>
|
|
893
|
+
|
|
894
|
+
|
|
895
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
896
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
897
|
+
|
|
898
|
+
</div>
|
|
899
|
+
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
|
|
903
|
+
|
|
830
904
|
<div id="selected" class="member">
|
|
831
905
|
<div class="member-link">
|
|
832
906
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -884,6 +958,32 @@ path.selected = true; // Select the path
|
|
|
884
958
|
</div>
|
|
885
959
|
|
|
886
960
|
|
|
961
|
+
</div>
|
|
962
|
+
|
|
963
|
+
</div>
|
|
964
|
+
</div>
|
|
965
|
+
|
|
966
|
+
|
|
967
|
+
<div id="fullyselected" class="member">
|
|
968
|
+
<div class="member-link">
|
|
969
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
970
|
+
</div>
|
|
971
|
+
<div class="member-description hidden">
|
|
972
|
+
|
|
973
|
+
<div class="member-text">
|
|
974
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
975
|
+
|
|
976
|
+
|
|
977
|
+
|
|
978
|
+
<ul class="member-list">
|
|
979
|
+
<h4>Type:</h4>
|
|
980
|
+
<li>
|
|
981
|
+
<tt>Boolean</tt>
|
|
982
|
+
</li>
|
|
983
|
+
</ul>
|
|
984
|
+
|
|
985
|
+
|
|
986
|
+
|
|
887
987
|
</div>
|
|
888
988
|
|
|
889
989
|
</div>
|
|
@@ -1123,6 +1223,7 @@ circle.position.x += 100;
|
|
|
1123
1223
|
|
|
1124
1224
|
<div class="member-text">
|
|
1125
1225
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
1226
|
+
<p>Setting it fits the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> into the given rectangle minus the extent of the stroke on each side, also where this extent changes with the item’s proportions, as with miters. A rectangle smaller than the stroke itself shrinks the bounds to its center.</p>
|
|
1126
1227
|
|
|
1127
1228
|
|
|
1128
1229
|
|
|
@@ -3262,9 +3363,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
3262
3363
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
3263
3364
|
<ul class="member-list">
|
|
3264
3365
|
<h4>Options:</h4>
|
|
3265
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3266
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3267
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3366
|
+
<li><tt>options.resolution: <tt>Number</tt></tt> — the desired resolution to be used when rasterizing, in pixels per inch (DPI). If not specified, the value of <code>view.resolution</code> is used by default. — default: <tt>view.resolution</tt></li>
|
|
3367
|
+
<li><tt>options.raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused when rasterizing. If the raster has the desired size already, then the underlying canvas is reused and no new memory needs to be allocated. If no raster is provided, a new raster item is created and returned instead. — default: <tt>null</tt></li>
|
|
3368
|
+
<li><tt>options.insert: <tt>Boolean</tt></tt> — specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. — default: <tt>true</tt></li>
|
|
3268
3369
|
</ul>
|
|
3269
3370
|
|
|
3270
3371
|
<ul class="member-list">
|
|
@@ -3449,7 +3550,7 @@ function onMouseDown(event) {
|
|
|
3449
3550
|
</div>
|
|
3450
3551
|
<div class="member-description hidden">
|
|
3451
3552
|
<div class="member-text">
|
|
3452
|
-
|
|
3553
|
+
<p>Checks whether the item overlaps with the given item: whether their outlines cross, or one contains the other, as <a href="../classes/Rectangle.html#intersects-rect"><tt>rectangle.intersects(rect)</tt></a> does for rectangles. Items other than paths and shapes are checked through their bounds. To only check whether outlines cross, use <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>.</p>
|
|
3453
3554
|
|
|
3454
3555
|
|
|
3455
3556
|
<ul class="member-list">
|
|
@@ -3469,7 +3570,7 @@ function onMouseDown(event) {
|
|
|
3469
3570
|
<h4>Returns:</h4>
|
|
3470
3571
|
|
|
3471
3572
|
<li>
|
|
3472
|
-
<tt><tt>Boolean</tt></tt>
|
|
3573
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3473
3574
|
</li>
|
|
3474
3575
|
|
|
3475
3576
|
|
|
@@ -3965,6 +4066,7 @@ function onMouseDown(event) {
|
|
|
3965
4066
|
<div class="member-text">
|
|
3966
4067
|
<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>
|
|
3967
4068
|
<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>
|
|
4069
|
+
<p>URLs are fetched as they are, so validate URLs that come from untrusted sources first, especially on servers, where they could reach internal addresses.</p>
|
|
3968
4070
|
<ul class="member-list">
|
|
3969
4071
|
<h4>Options:</h4>
|
|
3970
4072
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4518,11 +4620,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4518
4620
|
|
|
4519
4621
|
<div id="replacewith-item" class="member">
|
|
4520
4622
|
<div class="member-link">
|
|
4521
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
4623
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4522
4624
|
</div>
|
|
4523
4625
|
<div class="member-description hidden">
|
|
4524
4626
|
<div class="member-text">
|
|
4525
|
-
<p>Replaces this item with the provided new
|
|
4627
|
+
<p>Replaces this item with the provided new items which will take its place in the project hierarchy instead, in the given order. This also ungroups a group, e.g. <code>group.replaceWith(…group.children)</code>, but note that the items keep their own matrices, see <a href="../classes/Group.html#ungroup"><tt>group.ungroup</tt></a>().</p>
|
|
4526
4628
|
|
|
4527
4629
|
|
|
4528
4630
|
<ul class="member-list">
|
|
@@ -4531,7 +4633,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4531
4633
|
<li>
|
|
4532
4634
|
<tt>item:</tt>
|
|
4533
4635
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4534
|
-
— the
|
|
4636
|
+
— the items that will replace this item
|
|
4535
4637
|
|
|
4536
4638
|
</li>
|
|
4537
4639
|
|
|
@@ -6346,10 +6448,10 @@ function onMouseDown(event) {
|
|
|
6346
6448
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6347
6449
|
<ul class="member-list">
|
|
6348
6450
|
<h4>Options:</h4>
|
|
6349
|
-
<li><tt>options.move:
|
|
6350
|
-
<li><tt>options.drag:
|
|
6351
|
-
<li><tt>options.down:
|
|
6352
|
-
<li><tt>options.up:
|
|
6451
|
+
<li><tt>options.move: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
|
|
6452
|
+
<li><tt>options.drag: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
|
|
6453
|
+
<li><tt>options.down: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
|
|
6454
|
+
<li><tt>options.up: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
|
|
6353
6455
|
</ul>
|
|
6354
6456
|
|
|
6355
6457
|
<ul class="member-list">
|
|
@@ -6978,7 +7080,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6978
7080
|
|
|
6979
7081
|
<!-- =========================== copyright notice ========================== -->
|
|
6980
7082
|
<p class="footer">
|
|
6981
|
-
Paper.js v0.
|
|
7083
|
+
Paper.js v0.15.0<br>
|
|
6982
7084
|
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>
|
|
6983
7085
|
<div class="content-end"></div>
|
|
6984
7086
|
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<p>A HitResult object contains information about the results of a hit test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and <a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
|
|
@@ -231,7 +232,7 @@
|
|
|
231
232
|
|
|
232
233
|
<!-- =========================== copyright notice ========================== -->
|
|
233
234
|
<p class="footer">
|
|
234
|
-
Paper.js v0.
|
|
235
|
+
Paper.js v0.15.0<br>
|
|
235
236
|
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>
|
|
236
237
|
<div class="content-end"></div>
|
|
237
238
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
<p>A HostItem represents a node of a host document that has no counterpart in Paper.js. Its bounds come from the host, it draws nothing, and only its matrix and attributes can be changed. Hosts can extend it to expose their own node kinds, storing their properties in <code>_values</code>, and declare <code>_hasChildren: true</code> for kinds that contain other items.</p>
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
<div class="member-description hidden">
|
|
44
45
|
|
|
45
46
|
<div class="member-text">
|
|
46
|
-
<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#
|
|
47
|
+
<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#host"><tt>project.host</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>
|
|
47
48
|
|
|
48
49
|
|
|
49
50
|
|
|
@@ -408,7 +409,7 @@ path.visible = false;
|
|
|
408
409
|
<div class="member-description hidden">
|
|
409
410
|
|
|
410
411
|
<div class="member-text">
|
|
411
|
-
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported.
|
|
412
|
+
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. Where the canvas doesn’t support a CSS blend mode natively, it draws as <code>'normal'</code>. Paper.js’s own modes <code>'add'</code>, <code>'subtract'</code>, <code>'average'</code>, <code>'pin-light'</code> and <code>'negation'</code> are emulated, which can have an impact on performance.</p>
|
|
412
413
|
|
|
413
414
|
|
|
414
415
|
<ul class="member-list">
|
|
@@ -561,6 +562,42 @@ circle2.opacity = 0.5;
|
|
|
561
562
|
</div>
|
|
562
563
|
|
|
563
564
|
|
|
565
|
+
<div id="textwrap" class="member">
|
|
566
|
+
<div class="member-link">
|
|
567
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="member-description hidden">
|
|
570
|
+
|
|
571
|
+
<div class="member-text">
|
|
572
|
+
<p>Specifies whether, and how, the item pushes aside the text of the <a href="../classes/AreaText.html"><tt>AreaText</tt></a> items below it in its layer: <code>null</code>, or an object with <code>offset</code>, the space kept between them, and <code>invert</code>, to let the text flow inside it instead. <code>true</code> sets the defaults.</p>
|
|
573
|
+
|
|
574
|
+
|
|
575
|
+
|
|
576
|
+
<ul class="member-list">
|
|
577
|
+
<h4>Default:</h4>
|
|
578
|
+
<li><tt>null</tt></li>
|
|
579
|
+
</ul>
|
|
580
|
+
|
|
581
|
+
<ul class="member-list">
|
|
582
|
+
<h4>Type:</h4>
|
|
583
|
+
<li>
|
|
584
|
+
<tt>Object</tt>
|
|
585
|
+
</li>
|
|
586
|
+
</ul>
|
|
587
|
+
|
|
588
|
+
|
|
589
|
+
<h4>Example:</h4>
|
|
590
|
+
|
|
591
|
+
|
|
592
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
593
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
594
|
+
|
|
595
|
+
</div>
|
|
596
|
+
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
|
|
600
|
+
|
|
564
601
|
<div id="selected" class="member">
|
|
565
602
|
<div class="member-link">
|
|
566
603
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -618,6 +655,32 @@ path.selected = true; // Select the path
|
|
|
618
655
|
</div>
|
|
619
656
|
|
|
620
657
|
|
|
658
|
+
</div>
|
|
659
|
+
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
|
|
663
|
+
|
|
664
|
+
<div id="fullyselected" class="member">
|
|
665
|
+
<div class="member-link">
|
|
666
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="member-description hidden">
|
|
669
|
+
|
|
670
|
+
<div class="member-text">
|
|
671
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
672
|
+
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
<ul class="member-list">
|
|
676
|
+
<h4>Type:</h4>
|
|
677
|
+
<li>
|
|
678
|
+
<tt>Boolean</tt>
|
|
679
|
+
</li>
|
|
680
|
+
</ul>
|
|
681
|
+
|
|
682
|
+
|
|
683
|
+
|
|
621
684
|
</div>
|
|
622
685
|
|
|
623
686
|
</div>
|
|
@@ -857,6 +920,7 @@ circle.position.x += 100;
|
|
|
857
920
|
|
|
858
921
|
<div class="member-text">
|
|
859
922
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
923
|
+
<p>Setting it fits the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> into the given rectangle minus the extent of the stroke on each side, also where this extent changes with the item’s proportions, as with miters. A rectangle smaller than the stroke itself shrinks the bounds to its center.</p>
|
|
860
924
|
|
|
861
925
|
|
|
862
926
|
|
|
@@ -2996,9 +3060,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
2996
3060
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
2997
3061
|
<ul class="member-list">
|
|
2998
3062
|
<h4>Options:</h4>
|
|
2999
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3000
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3001
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3063
|
+
<li><tt>options.resolution: <tt>Number</tt></tt> — the desired resolution to be used when rasterizing, in pixels per inch (DPI). If not specified, the value of <code>view.resolution</code> is used by default. — default: <tt>view.resolution</tt></li>
|
|
3064
|
+
<li><tt>options.raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused when rasterizing. If the raster has the desired size already, then the underlying canvas is reused and no new memory needs to be allocated. If no raster is provided, a new raster item is created and returned instead. — default: <tt>null</tt></li>
|
|
3065
|
+
<li><tt>options.insert: <tt>Boolean</tt></tt> — specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. — default: <tt>true</tt></li>
|
|
3002
3066
|
</ul>
|
|
3003
3067
|
|
|
3004
3068
|
<ul class="member-list">
|
|
@@ -3183,7 +3247,7 @@ function onMouseDown(event) {
|
|
|
3183
3247
|
</div>
|
|
3184
3248
|
<div class="member-description hidden">
|
|
3185
3249
|
<div class="member-text">
|
|
3186
|
-
|
|
3250
|
+
<p>Checks whether the item overlaps with the given item: whether their outlines cross, or one contains the other, as <a href="../classes/Rectangle.html#intersects-rect"><tt>rectangle.intersects(rect)</tt></a> does for rectangles. Items other than paths and shapes are checked through their bounds. To only check whether outlines cross, use <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>.</p>
|
|
3187
3251
|
|
|
3188
3252
|
|
|
3189
3253
|
<ul class="member-list">
|
|
@@ -3203,7 +3267,7 @@ function onMouseDown(event) {
|
|
|
3203
3267
|
<h4>Returns:</h4>
|
|
3204
3268
|
|
|
3205
3269
|
<li>
|
|
3206
|
-
<tt><tt>Boolean</tt></tt>
|
|
3270
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3207
3271
|
</li>
|
|
3208
3272
|
|
|
3209
3273
|
|
|
@@ -3699,6 +3763,7 @@ function onMouseDown(event) {
|
|
|
3699
3763
|
<div class="member-text">
|
|
3700
3764
|
<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>
|
|
3701
3765
|
<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>
|
|
3766
|
+
<p>URLs are fetched as they are, so validate URLs that come from untrusted sources first, especially on servers, where they could reach internal addresses.</p>
|
|
3702
3767
|
<ul class="member-list">
|
|
3703
3768
|
<h4>Options:</h4>
|
|
3704
3769
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4252,11 +4317,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4252
4317
|
|
|
4253
4318
|
<div id="replacewith-item" class="member">
|
|
4254
4319
|
<div class="member-link">
|
|
4255
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
4320
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4256
4321
|
</div>
|
|
4257
4322
|
<div class="member-description hidden">
|
|
4258
4323
|
<div class="member-text">
|
|
4259
|
-
<p>Replaces this item with the provided new
|
|
4324
|
+
<p>Replaces this item with the provided new items which will take its place in the project hierarchy instead, in the given order. This also ungroups a group, e.g. <code>group.replaceWith(…group.children)</code>, but note that the items keep their own matrices, see <a href="../classes/Group.html#ungroup"><tt>group.ungroup</tt></a>().</p>
|
|
4260
4325
|
|
|
4261
4326
|
|
|
4262
4327
|
<ul class="member-list">
|
|
@@ -4265,7 +4330,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4265
4330
|
<li>
|
|
4266
4331
|
<tt>item:</tt>
|
|
4267
4332
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4268
|
-
— the
|
|
4333
|
+
— the items that will replace this item
|
|
4269
4334
|
|
|
4270
4335
|
</li>
|
|
4271
4336
|
|
|
@@ -6080,10 +6145,10 @@ function onMouseDown(event) {
|
|
|
6080
6145
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6081
6146
|
<ul class="member-list">
|
|
6082
6147
|
<h4>Options:</h4>
|
|
6083
|
-
<li><tt>options.move:
|
|
6084
|
-
<li><tt>options.drag:
|
|
6085
|
-
<li><tt>options.down:
|
|
6086
|
-
<li><tt>options.up:
|
|
6148
|
+
<li><tt>options.move: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
|
|
6149
|
+
<li><tt>options.drag: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
|
|
6150
|
+
<li><tt>options.down: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
|
|
6151
|
+
<li><tt>options.up: <tt>Boolean</tt></tt> — remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
|
|
6087
6152
|
</ul>
|
|
6088
6153
|
|
|
6089
6154
|
<ul class="member-list">
|
|
@@ -6712,7 +6777,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6712
6777
|
|
|
6713
6778
|
<!-- =========================== copyright notice ========================== -->
|
|
6714
6779
|
<p class="footer">
|
|
6715
|
-
Paper.js v0.
|
|
6780
|
+
Paper.js v0.15.0<br>
|
|
6716
6781
|
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>
|
|
6717
6782
|
<div class="content-end"></div>
|
|
6718
6783
|
|