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>Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don’t need to be updated with every transformation.</p>
|
|
19
19
|
|
|
20
|
+
|
|
20
21
|
</div>
|
|
21
22
|
|
|
22
23
|
<!-- =============================== constructors ========================== -->
|
|
@@ -302,7 +303,7 @@ for (var i = 0; i < 100; i++) {
|
|
|
302
303
|
|
|
303
304
|
<!-- =========================== copyright notice ========================== -->
|
|
304
305
|
<p class="footer">
|
|
305
|
-
Paper.js v0.
|
|
306
|
+
Paper.js v0.15.0<br>
|
|
306
307
|
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>
|
|
307
308
|
<div class="content-end"></div>
|
|
308
309
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
<p>A symbol item represents an instance of a symbol which has been placed in a Paper.js project. All instances share the symbol’s definition, which they draw as it is: styles set on a symbol item don’t reach the items of the definition, unlike <code><use></code> elements in SVG.</p>
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
<!-- =============================== constructors ========================== -->
|
|
@@ -169,7 +170,7 @@ for (var i = 0; i < 100; i++) {
|
|
|
169
170
|
<div class="member-description hidden">
|
|
170
171
|
|
|
171
172
|
<div class="member-text">
|
|
172
|
-
<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#
|
|
173
|
+
<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>
|
|
173
174
|
|
|
174
175
|
|
|
175
176
|
|
|
@@ -534,7 +535,7 @@ path.visible = false;
|
|
|
534
535
|
<div class="member-description hidden">
|
|
535
536
|
|
|
536
537
|
<div class="member-text">
|
|
537
|
-
<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.
|
|
538
|
+
<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>
|
|
538
539
|
|
|
539
540
|
|
|
540
541
|
<ul class="member-list">
|
|
@@ -687,6 +688,42 @@ circle2.opacity = 0.5;
|
|
|
687
688
|
</div>
|
|
688
689
|
|
|
689
690
|
|
|
691
|
+
<div id="textwrap" class="member">
|
|
692
|
+
<div class="member-link">
|
|
693
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="member-description hidden">
|
|
696
|
+
|
|
697
|
+
<div class="member-text">
|
|
698
|
+
<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>
|
|
699
|
+
|
|
700
|
+
|
|
701
|
+
|
|
702
|
+
<ul class="member-list">
|
|
703
|
+
<h4>Default:</h4>
|
|
704
|
+
<li><tt>null</tt></li>
|
|
705
|
+
</ul>
|
|
706
|
+
|
|
707
|
+
<ul class="member-list">
|
|
708
|
+
<h4>Type:</h4>
|
|
709
|
+
<li>
|
|
710
|
+
<tt>Object</tt>
|
|
711
|
+
</li>
|
|
712
|
+
</ul>
|
|
713
|
+
|
|
714
|
+
|
|
715
|
+
<h4>Example:</h4>
|
|
716
|
+
|
|
717
|
+
|
|
718
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
719
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
720
|
+
|
|
721
|
+
</div>
|
|
722
|
+
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
|
|
726
|
+
|
|
690
727
|
<div id="selected" class="member">
|
|
691
728
|
<div class="member-link">
|
|
692
729
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -744,6 +781,32 @@ path.selected = true; // Select the path
|
|
|
744
781
|
</div>
|
|
745
782
|
|
|
746
783
|
|
|
784
|
+
</div>
|
|
785
|
+
|
|
786
|
+
</div>
|
|
787
|
+
</div>
|
|
788
|
+
|
|
789
|
+
|
|
790
|
+
<div id="fullyselected" class="member">
|
|
791
|
+
<div class="member-link">
|
|
792
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
793
|
+
</div>
|
|
794
|
+
<div class="member-description hidden">
|
|
795
|
+
|
|
796
|
+
<div class="member-text">
|
|
797
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
798
|
+
|
|
799
|
+
|
|
800
|
+
|
|
801
|
+
<ul class="member-list">
|
|
802
|
+
<h4>Type:</h4>
|
|
803
|
+
<li>
|
|
804
|
+
<tt>Boolean</tt>
|
|
805
|
+
</li>
|
|
806
|
+
</ul>
|
|
807
|
+
|
|
808
|
+
|
|
809
|
+
|
|
747
810
|
</div>
|
|
748
811
|
|
|
749
812
|
</div>
|
|
@@ -983,6 +1046,7 @@ circle.position.x += 100;
|
|
|
983
1046
|
|
|
984
1047
|
<div class="member-text">
|
|
985
1048
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
1049
|
+
<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>
|
|
986
1050
|
|
|
987
1051
|
|
|
988
1052
|
|
|
@@ -3122,9 +3186,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
3122
3186
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
3123
3187
|
<ul class="member-list">
|
|
3124
3188
|
<h4>Options:</h4>
|
|
3125
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3126
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3127
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3189
|
+
<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>
|
|
3190
|
+
<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>
|
|
3191
|
+
<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>
|
|
3128
3192
|
</ul>
|
|
3129
3193
|
|
|
3130
3194
|
<ul class="member-list">
|
|
@@ -3309,7 +3373,7 @@ function onMouseDown(event) {
|
|
|
3309
3373
|
</div>
|
|
3310
3374
|
<div class="member-description hidden">
|
|
3311
3375
|
<div class="member-text">
|
|
3312
|
-
|
|
3376
|
+
<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>
|
|
3313
3377
|
|
|
3314
3378
|
|
|
3315
3379
|
<ul class="member-list">
|
|
@@ -3329,7 +3393,7 @@ function onMouseDown(event) {
|
|
|
3329
3393
|
<h4>Returns:</h4>
|
|
3330
3394
|
|
|
3331
3395
|
<li>
|
|
3332
|
-
<tt><tt>Boolean</tt></tt>
|
|
3396
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3333
3397
|
</li>
|
|
3334
3398
|
|
|
3335
3399
|
|
|
@@ -3825,6 +3889,7 @@ function onMouseDown(event) {
|
|
|
3825
3889
|
<div class="member-text">
|
|
3826
3890
|
<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>
|
|
3827
3891
|
<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>
|
|
3892
|
+
<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>
|
|
3828
3893
|
<ul class="member-list">
|
|
3829
3894
|
<h4>Options:</h4>
|
|
3830
3895
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4378,11 +4443,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4378
4443
|
|
|
4379
4444
|
<div id="replacewith-item" class="member">
|
|
4380
4445
|
<div class="member-link">
|
|
4381
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
4446
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4382
4447
|
</div>
|
|
4383
4448
|
<div class="member-description hidden">
|
|
4384
4449
|
<div class="member-text">
|
|
4385
|
-
<p>Replaces this item with the provided new
|
|
4450
|
+
<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>
|
|
4386
4451
|
|
|
4387
4452
|
|
|
4388
4453
|
<ul class="member-list">
|
|
@@ -4391,7 +4456,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4391
4456
|
<li>
|
|
4392
4457
|
<tt>item:</tt>
|
|
4393
4458
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4394
|
-
— the
|
|
4459
|
+
— the items that will replace this item
|
|
4395
4460
|
|
|
4396
4461
|
</li>
|
|
4397
4462
|
|
|
@@ -6206,10 +6271,10 @@ function onMouseDown(event) {
|
|
|
6206
6271
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6207
6272
|
<ul class="member-list">
|
|
6208
6273
|
<h4>Options:</h4>
|
|
6209
|
-
<li><tt>options.move:
|
|
6210
|
-
<li><tt>options.drag:
|
|
6211
|
-
<li><tt>options.down:
|
|
6212
|
-
<li><tt>options.up:
|
|
6274
|
+
<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>
|
|
6275
|
+
<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>
|
|
6276
|
+
<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>
|
|
6277
|
+
<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>
|
|
6213
6278
|
</ul>
|
|
6214
6279
|
|
|
6215
6280
|
<ul class="member-list">
|
|
@@ -6838,7 +6903,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6838
6903
|
|
|
6839
6904
|
<!-- =========================== copyright notice ========================== -->
|
|
6840
6905
|
<p class="footer">
|
|
6841
|
-
Paper.js v0.
|
|
6906
|
+
Paper.js v0.15.0<br>
|
|
6842
6907
|
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>
|
|
6843
6908
|
<div class="content-end"></div>
|
|
6844
6909
|
|