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
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
<p>The Item type allows you to access and modify the items in Paper.js projects. Its functionality is inherited by different project item types such as <a href="../classes/Path.html"><tt>Path</tt></a>, <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, <a href="../classes/Group.html"><tt>Group</tt></a>, <a href="../classes/Layer.html"><tt>Layer</tt></a> and <a href="../classes/Raster.html"><tt>Raster</tt></a>. They each add a layer of functionality that is unique to their type, but share the underlying properties and functions that they inherit from Item.</p>
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
<div class="member-description hidden">
|
|
36
37
|
|
|
37
38
|
<div class="member-text">
|
|
38
|
-
<p>The key of the host’s node that the item represents, in a project backed by a host document, see <a href="../classes/Project.html#
|
|
39
|
+
<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>
|
|
39
40
|
|
|
40
41
|
|
|
41
42
|
|
|
@@ -400,7 +401,7 @@ path.visible = false;
|
|
|
400
401
|
<div class="member-description hidden">
|
|
401
402
|
|
|
402
403
|
<div class="member-text">
|
|
403
|
-
<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.
|
|
404
|
+
<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>
|
|
404
405
|
|
|
405
406
|
|
|
406
407
|
<ul class="member-list">
|
|
@@ -553,6 +554,42 @@ circle2.opacity = 0.5;
|
|
|
553
554
|
</div>
|
|
554
555
|
|
|
555
556
|
|
|
557
|
+
<div id="textwrap" class="member">
|
|
558
|
+
<div class="member-link">
|
|
559
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="member-description hidden">
|
|
562
|
+
|
|
563
|
+
<div class="member-text">
|
|
564
|
+
<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>
|
|
565
|
+
|
|
566
|
+
|
|
567
|
+
|
|
568
|
+
<ul class="member-list">
|
|
569
|
+
<h4>Default:</h4>
|
|
570
|
+
<li><tt>null</tt></li>
|
|
571
|
+
</ul>
|
|
572
|
+
|
|
573
|
+
<ul class="member-list">
|
|
574
|
+
<h4>Type:</h4>
|
|
575
|
+
<li>
|
|
576
|
+
<tt>Object</tt>
|
|
577
|
+
</li>
|
|
578
|
+
</ul>
|
|
579
|
+
|
|
580
|
+
|
|
581
|
+
<h4>Example:</h4>
|
|
582
|
+
|
|
583
|
+
|
|
584
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
585
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
586
|
+
|
|
587
|
+
</div>
|
|
588
|
+
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
592
|
+
|
|
556
593
|
<div id="selected" class="member">
|
|
557
594
|
<div class="member-link">
|
|
558
595
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -610,6 +647,32 @@ path.selected = true; // Select the path
|
|
|
610
647
|
</div>
|
|
611
648
|
|
|
612
649
|
|
|
650
|
+
</div>
|
|
651
|
+
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
|
|
656
|
+
<div id="fullyselected" class="member">
|
|
657
|
+
<div class="member-link">
|
|
658
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
659
|
+
</div>
|
|
660
|
+
<div class="member-description hidden">
|
|
661
|
+
|
|
662
|
+
<div class="member-text">
|
|
663
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
664
|
+
|
|
665
|
+
|
|
666
|
+
|
|
667
|
+
<ul class="member-list">
|
|
668
|
+
<h4>Type:</h4>
|
|
669
|
+
<li>
|
|
670
|
+
<tt>Boolean</tt>
|
|
671
|
+
</li>
|
|
672
|
+
</ul>
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
|
|
613
676
|
</div>
|
|
614
677
|
|
|
615
678
|
</div>
|
|
@@ -849,6 +912,7 @@ circle.position.x += 100;
|
|
|
849
912
|
|
|
850
913
|
<div class="member-text">
|
|
851
914
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
915
|
+
<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>
|
|
852
916
|
|
|
853
917
|
|
|
854
918
|
|
|
@@ -2992,9 +3056,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
2992
3056
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
2993
3057
|
<ul class="member-list">
|
|
2994
3058
|
<h4>Options:</h4>
|
|
2995
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
2996
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
2997
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3059
|
+
<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>
|
|
3060
|
+
<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>
|
|
3061
|
+
<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>
|
|
2998
3062
|
</ul>
|
|
2999
3063
|
|
|
3000
3064
|
<ul class="member-list">
|
|
@@ -3179,7 +3243,7 @@ function onMouseDown(event) {
|
|
|
3179
3243
|
</div>
|
|
3180
3244
|
<div class="member-description hidden">
|
|
3181
3245
|
<div class="member-text">
|
|
3182
|
-
|
|
3246
|
+
<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>
|
|
3183
3247
|
|
|
3184
3248
|
|
|
3185
3249
|
<ul class="member-list">
|
|
@@ -3199,7 +3263,7 @@ function onMouseDown(event) {
|
|
|
3199
3263
|
<h4>Returns:</h4>
|
|
3200
3264
|
|
|
3201
3265
|
<li>
|
|
3202
|
-
<tt><tt>Boolean</tt></tt>
|
|
3266
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3203
3267
|
</li>
|
|
3204
3268
|
|
|
3205
3269
|
|
|
@@ -3695,6 +3759,7 @@ function onMouseDown(event) {
|
|
|
3695
3759
|
<div class="member-text">
|
|
3696
3760
|
<p>Converts the provided SVG content into Paper.js items and adds them to the this item’s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
|
|
3697
3761
|
<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>
|
|
3762
|
+
<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>
|
|
3698
3763
|
<ul class="member-list">
|
|
3699
3764
|
<h4>Options:</h4>
|
|
3700
3765
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4248,11 +4313,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4248
4313
|
|
|
4249
4314
|
<div id="replacewith-item" class="member">
|
|
4250
4315
|
<div class="member-link">
|
|
4251
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
4316
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4252
4317
|
</div>
|
|
4253
4318
|
<div class="member-description hidden">
|
|
4254
4319
|
<div class="member-text">
|
|
4255
|
-
<p>Replaces this item with the provided new
|
|
4320
|
+
<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>
|
|
4256
4321
|
|
|
4257
4322
|
|
|
4258
4323
|
<ul class="member-list">
|
|
@@ -4261,7 +4326,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4261
4326
|
<li>
|
|
4262
4327
|
<tt>item:</tt>
|
|
4263
4328
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4264
|
-
— the
|
|
4329
|
+
— the items that will replace this item
|
|
4265
4330
|
|
|
4266
4331
|
</li>
|
|
4267
4332
|
|
|
@@ -6076,10 +6141,10 @@ function onMouseDown(event) {
|
|
|
6076
6141
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6077
6142
|
<ul class="member-list">
|
|
6078
6143
|
<h4>Options:</h4>
|
|
6079
|
-
<li><tt>options.move:
|
|
6080
|
-
<li><tt>options.drag:
|
|
6081
|
-
<li><tt>options.down:
|
|
6082
|
-
<li><tt>options.up:
|
|
6144
|
+
<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>
|
|
6145
|
+
<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>
|
|
6146
|
+
<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>
|
|
6147
|
+
<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>
|
|
6083
6148
|
</ul>
|
|
6084
6149
|
|
|
6085
6150
|
<ul class="member-list">
|
|
@@ -6707,11 +6772,68 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6707
6772
|
</div>
|
|
6708
6773
|
|
|
6709
6774
|
|
|
6775
|
+
<div class="reference-members">
|
|
6776
|
+
<h2>Static Methods</h2>
|
|
6777
|
+
|
|
6778
|
+
|
|
6779
|
+
<div id="getbounds-items" class="member">
|
|
6780
|
+
<div class="member-link">
|
|
6781
|
+
<a name="getbounds-items" href="#getbounds-items"><tt><b>Item.getBounds</b>(items[, options])</tt></a>
|
|
6782
|
+
</div>
|
|
6783
|
+
<div class="member-description hidden">
|
|
6784
|
+
<div class="member-text">
|
|
6785
|
+
<p>Returns the bounds of the given items in project coordinates, as if they were grouped, without moving them, e.g. the bounds of the selection: <code>Item.getBounds(project.selectedItems)</code>. As in groups, items that aren’t visible or are empty are left out.</p>
|
|
6786
|
+
<ul class="member-list">
|
|
6787
|
+
<h4>Options:</h4>
|
|
6788
|
+
<li><tt>options.stroke: <tt>Boolean</tt></tt> — include the stroke widths, as <a href="../classes/Item.html#strokebounds"><tt>item.strokeBounds</tt></a> does — default: <tt>false</tt></li>
|
|
6789
|
+
<li><tt>options.handle: <tt>Boolean</tt></tt> — include the handles, as <a href="../classes/Item.html#handlebounds"><tt>item.handleBounds</tt></a> does — default: <tt>false</tt></li>
|
|
6790
|
+
</ul>
|
|
6791
|
+
|
|
6792
|
+
<ul class="member-list">
|
|
6793
|
+
<h4>Parameters:</h4>
|
|
6794
|
+
|
|
6795
|
+
<li>
|
|
6796
|
+
<tt>items:</tt>
|
|
6797
|
+
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
6798
|
+
— the items to get the bounds of
|
|
6799
|
+
|
|
6800
|
+
</li>
|
|
6801
|
+
|
|
6802
|
+
<li>
|
|
6803
|
+
<tt>options:</tt>
|
|
6804
|
+
<tt>Object</tt>
|
|
6805
|
+
— the kind of bounds
|
|
6806
|
+
— optional
|
|
6807
|
+
</li>
|
|
6808
|
+
|
|
6809
|
+
</ul>
|
|
6810
|
+
|
|
6811
|
+
|
|
6812
|
+
<ul class="member-list">
|
|
6813
|
+
<h4>Returns:</h4>
|
|
6814
|
+
|
|
6815
|
+
<li>
|
|
6816
|
+
<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt> — the bounds of the items, empty if there are none
|
|
6817
|
+
</li>
|
|
6818
|
+
|
|
6819
|
+
|
|
6820
|
+
</ul>
|
|
6821
|
+
|
|
6822
|
+
|
|
6823
|
+
|
|
6824
|
+
|
|
6825
|
+
|
|
6826
|
+
</div>
|
|
6827
|
+
</div>
|
|
6828
|
+
</div>
|
|
6829
|
+
|
|
6830
|
+
</div>
|
|
6831
|
+
|
|
6710
6832
|
|
|
6711
6833
|
|
|
6712
6834
|
<!-- =========================== copyright notice ========================== -->
|
|
6713
6835
|
<p class="footer">
|
|
6714
|
-
Paper.js v0.
|
|
6836
|
+
Paper.js v0.15.0<br>
|
|
6715
6837
|
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>
|
|
6716
6838
|
<div class="content-end"></div>
|
|
6717
6839
|
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
|
|
131
132
|
<!-- =========================== copyright notice ========================== -->
|
|
132
133
|
<p class="footer">
|
|
133
|
-
Paper.js v0.
|
|
134
|
+
Paper.js v0.15.0<br>
|
|
134
135
|
Copyright © 2011—2026 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
135
136
|
<div class="content-end"></div>
|
|
136
137
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
<p>The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>’s keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>. The KeyEvent object is the only parameter passed to these functions and contains information about the keyboard event.</p>
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
|
|
@@ -167,14 +168,14 @@
|
|
|
167
168
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
|
168
169
|
|
|
169
170
|
|
|
170
|
-
<div id="
|
|
171
|
+
<div id="time" class="member">
|
|
171
172
|
<div class="member-link">
|
|
172
|
-
<a name="
|
|
173
|
+
<a name="time" href="#time"><tt><b>time</b></tt></a>
|
|
173
174
|
</div>
|
|
174
175
|
<div class="member-description hidden">
|
|
175
176
|
|
|
176
177
|
<div class="member-text">
|
|
177
|
-
<p>The time at which the event was created, in
|
|
178
|
+
<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>
|
|
178
179
|
|
|
179
180
|
<p>Read only.</p>
|
|
180
181
|
|
|
@@ -299,7 +300,7 @@
|
|
|
299
300
|
|
|
300
301
|
<!-- =========================== copyright notice ========================== -->
|
|
301
302
|
<p class="footer">
|
|
302
|
-
Paper.js v0.
|
|
303
|
+
Paper.js v0.15.0<br>
|
|
303
304
|
Copyright © 2011—2026 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
|
304
305
|
<div class="content-end"></div>
|
|
305
306
|
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
<p>The Layer item represents a layer in a Paper.js project.</p>
|
|
21
21
|
<p>The layer which is currently active can be accessed through <a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>. An array of all layers in a project can be accessed through <a href="../classes/Project.html#layers"><tt>project.layers</tt></a>.</p>
|
|
22
22
|
|
|
23
|
+
|
|
23
24
|
</div>
|
|
24
25
|
|
|
25
26
|
<!-- =============================== constructors ========================== -->
|
|
@@ -194,7 +195,7 @@ console.log(project.activeLayer == firstLayer); // true</code></pre>
|
|
|
194
195
|
<div class="member-description hidden">
|
|
195
196
|
|
|
196
197
|
<div class="member-text">
|
|
197
|
-
<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#
|
|
198
|
+
<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>
|
|
198
199
|
|
|
199
200
|
|
|
200
201
|
|
|
@@ -559,7 +560,7 @@ path.visible = false;
|
|
|
559
560
|
<div class="member-description hidden">
|
|
560
561
|
|
|
561
562
|
<div class="member-text">
|
|
562
|
-
<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.
|
|
563
|
+
<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>
|
|
563
564
|
|
|
564
565
|
|
|
565
566
|
<ul class="member-list">
|
|
@@ -712,6 +713,42 @@ circle2.opacity = 0.5;
|
|
|
712
713
|
</div>
|
|
713
714
|
|
|
714
715
|
|
|
716
|
+
<div id="textwrap" class="member">
|
|
717
|
+
<div class="member-link">
|
|
718
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
719
|
+
</div>
|
|
720
|
+
<div class="member-description hidden">
|
|
721
|
+
|
|
722
|
+
<div class="member-text">
|
|
723
|
+
<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>
|
|
724
|
+
|
|
725
|
+
|
|
726
|
+
|
|
727
|
+
<ul class="member-list">
|
|
728
|
+
<h4>Default:</h4>
|
|
729
|
+
<li><tt>null</tt></li>
|
|
730
|
+
</ul>
|
|
731
|
+
|
|
732
|
+
<ul class="member-list">
|
|
733
|
+
<h4>Type:</h4>
|
|
734
|
+
<li>
|
|
735
|
+
<tt>Object</tt>
|
|
736
|
+
</li>
|
|
737
|
+
</ul>
|
|
738
|
+
|
|
739
|
+
|
|
740
|
+
<h4>Example:</h4>
|
|
741
|
+
|
|
742
|
+
|
|
743
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
744
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
745
|
+
|
|
746
|
+
</div>
|
|
747
|
+
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
|
|
751
|
+
|
|
715
752
|
<div id="selected" class="member">
|
|
716
753
|
<div class="member-link">
|
|
717
754
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -769,6 +806,32 @@ path.selected = true; // Select the path
|
|
|
769
806
|
</div>
|
|
770
807
|
|
|
771
808
|
|
|
809
|
+
</div>
|
|
810
|
+
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
<div id="fullyselected" class="member">
|
|
816
|
+
<div class="member-link">
|
|
817
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
818
|
+
</div>
|
|
819
|
+
<div class="member-description hidden">
|
|
820
|
+
|
|
821
|
+
<div class="member-text">
|
|
822
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
823
|
+
|
|
824
|
+
|
|
825
|
+
|
|
826
|
+
<ul class="member-list">
|
|
827
|
+
<h4>Type:</h4>
|
|
828
|
+
<li>
|
|
829
|
+
<tt>Boolean</tt>
|
|
830
|
+
</li>
|
|
831
|
+
</ul>
|
|
832
|
+
|
|
833
|
+
|
|
834
|
+
|
|
772
835
|
</div>
|
|
773
836
|
|
|
774
837
|
</div>
|
|
@@ -1008,6 +1071,7 @@ circle.position.x += 100;
|
|
|
1008
1071
|
|
|
1009
1072
|
<div class="member-text">
|
|
1010
1073
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
1074
|
+
<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>
|
|
1011
1075
|
|
|
1012
1076
|
|
|
1013
1077
|
|
|
@@ -3147,9 +3211,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
3147
3211
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
3148
3212
|
<ul class="member-list">
|
|
3149
3213
|
<h4>Options:</h4>
|
|
3150
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3151
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3152
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3214
|
+
<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>
|
|
3215
|
+
<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>
|
|
3216
|
+
<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>
|
|
3153
3217
|
</ul>
|
|
3154
3218
|
|
|
3155
3219
|
<ul class="member-list">
|
|
@@ -3334,7 +3398,7 @@ function onMouseDown(event) {
|
|
|
3334
3398
|
</div>
|
|
3335
3399
|
<div class="member-description hidden">
|
|
3336
3400
|
<div class="member-text">
|
|
3337
|
-
|
|
3401
|
+
<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>
|
|
3338
3402
|
|
|
3339
3403
|
|
|
3340
3404
|
<ul class="member-list">
|
|
@@ -3354,7 +3418,7 @@ function onMouseDown(event) {
|
|
|
3354
3418
|
<h4>Returns:</h4>
|
|
3355
3419
|
|
|
3356
3420
|
<li>
|
|
3357
|
-
<tt><tt>Boolean</tt></tt>
|
|
3421
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3358
3422
|
</li>
|
|
3359
3423
|
|
|
3360
3424
|
|
|
@@ -3850,6 +3914,7 @@ function onMouseDown(event) {
|
|
|
3850
3914
|
<div class="member-text">
|
|
3851
3915
|
<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>
|
|
3852
3916
|
<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>
|
|
3917
|
+
<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>
|
|
3853
3918
|
<ul class="member-list">
|
|
3854
3919
|
<h4>Options:</h4>
|
|
3855
3920
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4403,11 +4468,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4403
4468
|
|
|
4404
4469
|
<div id="replacewith-item" class="member">
|
|
4405
4470
|
<div class="member-link">
|
|
4406
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
4471
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4407
4472
|
</div>
|
|
4408
4473
|
<div class="member-description hidden">
|
|
4409
4474
|
<div class="member-text">
|
|
4410
|
-
<p>Replaces this item with the provided new
|
|
4475
|
+
<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>
|
|
4411
4476
|
|
|
4412
4477
|
|
|
4413
4478
|
<ul class="member-list">
|
|
@@ -4416,7 +4481,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4416
4481
|
<li>
|
|
4417
4482
|
<tt>item:</tt>
|
|
4418
4483
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4419
|
-
— the
|
|
4484
|
+
— the items that will replace this item
|
|
4420
4485
|
|
|
4421
4486
|
</li>
|
|
4422
4487
|
|
|
@@ -6231,10 +6296,10 @@ function onMouseDown(event) {
|
|
|
6231
6296
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6232
6297
|
<ul class="member-list">
|
|
6233
6298
|
<h4>Options:</h4>
|
|
6234
|
-
<li><tt>options.move:
|
|
6235
|
-
<li><tt>options.drag:
|
|
6236
|
-
<li><tt>options.down:
|
|
6237
|
-
<li><tt>options.up:
|
|
6299
|
+
<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>
|
|
6300
|
+
<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>
|
|
6301
|
+
<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>
|
|
6302
|
+
<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>
|
|
6238
6303
|
</ul>
|
|
6239
6304
|
|
|
6240
6305
|
<ul class="member-list">
|
|
@@ -6960,11 +7025,45 @@ function onFrame(event) {
|
|
|
6960
7025
|
</div>
|
|
6961
7026
|
|
|
6962
7027
|
|
|
7028
|
+
<!-- =========================== inherited methods ========================= -->
|
|
7029
|
+
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Group.html"><tt>Group</tt></a></h2>
|
|
7030
|
+
|
|
7031
|
+
|
|
7032
|
+
<div id="ungroup" class="member">
|
|
7033
|
+
<div class="member-link">
|
|
7034
|
+
<a name="ungroup" href="#ungroup"><tt><b>ungroup</b>()</tt></a>
|
|
7035
|
+
</div>
|
|
7036
|
+
<div class="member-description hidden">
|
|
7037
|
+
<div class="member-text">
|
|
7038
|
+
<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>
|
|
7039
|
+
|
|
7040
|
+
|
|
7041
|
+
|
|
7042
|
+
<ul class="member-list">
|
|
7043
|
+
<h4>Returns:</h4>
|
|
7044
|
+
|
|
7045
|
+
<li>
|
|
7046
|
+
<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
|
|
7047
|
+
</li>
|
|
7048
|
+
|
|
7049
|
+
|
|
7050
|
+
</ul>
|
|
7051
|
+
|
|
7052
|
+
|
|
7053
|
+
|
|
7054
|
+
|
|
7055
|
+
|
|
7056
|
+
</div>
|
|
7057
|
+
</div>
|
|
7058
|
+
</div>
|
|
7059
|
+
|
|
7060
|
+
</div>
|
|
7061
|
+
|
|
6963
7062
|
|
|
6964
7063
|
|
|
6965
7064
|
<!-- =========================== copyright notice ========================== -->
|
|
6966
7065
|
<p class="footer">
|
|
6967
|
-
Paper.js v0.
|
|
7066
|
+
Paper.js v0.15.0<br>
|
|
6968
7067
|
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>
|
|
6969
7068
|
<div class="content-end"></div>
|
|
6970
7069
|
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
<p>Note the locations of b and c.</p>
|
|
25
25
|
<p>This class is optimized for speed and minimizes calculations based on its knowledge of the underlying matrix (as opposed to say simply performing matrix multiplication).</p>
|
|
26
26
|
|
|
27
|
+
|
|
27
28
|
</div>
|
|
28
29
|
|
|
29
30
|
<!-- =============================== constructors ========================== -->
|
|
@@ -1735,7 +1736,7 @@ Array of <tt>Numbers</tt>
|
|
|
1735
1736
|
|
|
1736
1737
|
<!-- =========================== copyright notice ========================== -->
|
|
1737
1738
|
<p class="footer">
|
|
1738
|
-
Paper.js v0.
|
|
1739
|
+
Paper.js v0.15.0<br>
|
|
1739
1740
|
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>
|
|
1740
1741
|
<div class="content-end"></div>
|
|
1741
1742
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
<p>The MouseEvent object is received by the <a href="../classes/Item.html"><tt>Item</tt></a>’s mouse event handlers <a href="../classes/Item.html#onmousedown"><tt>item.onMouseDown</tt></a>, <a href="../classes/Item.html#onmousedrag"><tt>item.onMouseDrag</tt></a>, <a href="../classes/Item.html#onmousemove"><tt>item.onMouseMove</tt></a>, <a href="../classes/Item.html#onmouseup"><tt>item.onMouseUp</tt></a>, <a href="../classes/Item.html#onclick"><tt>item.onClick</tt></a>, <a href="../classes/Item.html#ondoubleclick"><tt>item.onDoubleClick</tt></a>, <a href="../classes/Item.html#onmouseenter"><tt>item.onMouseEnter</tt></a> and <a href="../classes/Item.html#onmouseleave"><tt>item.onMouseLeave</tt></a>. The MouseEvent object is the only parameter passed to these functions and contains information about the mouse event.</p>
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
|
|
@@ -214,14 +215,14 @@
|
|
|
214
215
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
|
215
216
|
|
|
216
217
|
|
|
217
|
-
<div id="
|
|
218
|
+
<div id="time" class="member">
|
|
218
219
|
<div class="member-link">
|
|
219
|
-
<a name="
|
|
220
|
+
<a name="time" href="#time"><tt><b>time</b></tt></a>
|
|
220
221
|
</div>
|
|
221
222
|
<div class="member-description hidden">
|
|
222
223
|
|
|
223
224
|
<div class="member-text">
|
|
224
|
-
<p>The time at which the event was created, in
|
|
225
|
+
<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>
|
|
225
226
|
|
|
226
227
|
<p>Read only.</p>
|
|
227
228
|
|
|
@@ -346,7 +347,7 @@
|
|
|
346
347
|
|
|
347
348
|
<!-- =========================== copyright notice ========================== -->
|
|
348
349
|
<p class="footer">
|
|
349
|
-
Paper.js v0.
|
|
350
|
+
Paper.js v0.15.0<br>
|
|
350
351
|
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>
|
|
351
352
|
<div class="content-end"></div>
|
|
352
353
|
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
<p>Paper classes can only be accessed through <code>PaperScope</code> objects. Thus in PaperScript they are global, while in JavaScript, they are available on the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use <a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects on the global scope. Note that when working with more than one scope, this still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>, since they are not updated in the injected scope if scopes are switched.</p>
|
|
21
21
|
<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active <code>PaperScope</code>.</p>
|
|
22
22
|
|
|
23
|
+
|
|
23
24
|
</div>
|
|
24
25
|
|
|
25
26
|
<!-- =============================== constructors ========================== -->
|
|
@@ -116,7 +117,8 @@
|
|
|
116
117
|
<li><tt>settings.insertItems: <tt>Boolean</tt></tt> — controls whether newly created items are automatically inserted into the scene graph, by adding them to <a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a> — default: <tt>true</tt></li>
|
|
117
118
|
<li><tt>settings.applyMatrix: <tt>Boolean</tt></tt> — controls what value newly created items have their <a href="../classes/Item.html#applymatrix"><tt>item.applyMatrix</tt></a> property set to (Note that not all items can set this to <code>false</code>) — default: <tt>true</tt></li>
|
|
118
119
|
<li><tt>settings.handleSize: <tt>Number</tt></tt> — the size of the curve handles when drawing selections — default: <tt>4</tt></li>
|
|
119
|
-
<li><tt>settings.
|
|
120
|
+
<li><tt>settings.segmentSize: <tt>Number</tt></tt> — the size of the segments when drawing selections, or <code>null</code> to use <code>settings.handleSize</code>, e.g. with <code>handleSize: 0</code> to only draw the segments and not their handles — default: <tt>null</tt></li>
|
|
121
|
+
<li><tt>settings.hitTolerance: <tt>Number</tt></tt> — the default tolerance for hit- tests, when no value is specified, and for the mouse events of items — default: <tt>0</tt></li>
|
|
120
122
|
<li><tt>settings.scaleStrokes: <tt>Boolean</tt></tt> — controls whether applying a matrix to the content of paths and compound paths also scales their <a href="../classes/Style.html#strokewidth"><tt>style.strokeWidth</tt></a>, by the geometric mean of the scale factors for non-uniform scaling. Items that keep their matrix, with <a href="../classes/Item.html#applymatrix"><tt>item.applyMatrix</tt></a> set to <code>false</code>, scale their strokes when drawing anyway, unless <a href="../classes/Style.html#strokescaling"><tt>style.strokeScaling</tt></a> is <code>false</code> — default: <tt>false</tt></li>
|
|
121
123
|
</ul>
|
|
122
124
|
|
|
@@ -537,7 +539,7 @@
|
|
|
537
539
|
|
|
538
540
|
<!-- =========================== copyright notice ========================== -->
|
|
539
541
|
<p class="footer">
|
|
540
|
-
Paper.js v0.
|
|
542
|
+
Paper.js v0.15.0<br>
|
|
541
543
|
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>
|
|
542
544
|
<div class="content-end"></div>
|
|
543
545
|
|