paper 0.13.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 +337 -0
- package/README.md +19 -14
- package/dist/docs/assets/js/paper.js +7351 -1706
- package/dist/docs/classes/AreaText.html +8658 -0
- package/dist/docs/classes/ChangeFlag.html +385 -0
- package/dist/docs/classes/Color.html +2 -1
- package/dist/docs/classes/CompoundPath.html +208 -69
- 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 +204 -17
- package/dist/docs/classes/HitResult.html +4 -2
- package/dist/docs/classes/HostItem.html +6786 -0
- package/dist/docs/classes/Item.html +193 -17
- package/dist/docs/classes/Key.html +2 -1
- package/dist/docs/classes/KeyEvent.html +5 -4
- package/dist/docs/classes/Layer.html +201 -17
- package/dist/docs/classes/Matrix.html +2 -1
- package/dist/docs/classes/MouseEvent.html +5 -4
- package/dist/docs/classes/PaperScope.html +5 -2
- package/dist/docs/classes/PaperScript.html +6 -2
- package/dist/docs/classes/Path.html +183 -70
- package/dist/docs/classes/PathItem.html +326 -187
- package/dist/docs/classes/PathText.html +8528 -0
- package/dist/docs/classes/Point.html +13 -2
- package/dist/docs/classes/PointText.html +1404 -63
- package/dist/docs/classes/Project.html +221 -1
- package/dist/docs/classes/Raster.html +136 -17
- package/dist/docs/classes/Rectangle.html +3 -2
- package/dist/docs/classes/Segment.html +2 -1
- package/dist/docs/classes/Shape.html +136 -17
- package/dist/docs/classes/Size.html +4 -2
- package/dist/docs/classes/Style.html +768 -15
- package/dist/docs/classes/SymbolDefinition.html +2 -1
- package/dist/docs/classes/SymbolItem.html +136 -17
- package/dist/docs/classes/TextItem.html +1566 -222
- package/dist/docs/classes/TextRange.html +186 -0
- package/dist/docs/classes/TextStory.html +355 -0
- package/dist/docs/classes/Tool.html +127 -1
- package/dist/docs/classes/ToolEvent.html +57 -4
- package/dist/docs/classes/Tween.html +17 -1
- package/dist/docs/classes/View.html +148 -5
- 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 +7160 -1663
- package/dist/paper-core.min.js +3 -3
- package/dist/paper-full.js +7351 -1706
- package/dist/paper-full.min.js +3 -3
- package/dist/paper-hosted.js +24058 -0
- package/dist/paper.d.ts +1996 -155
- package/examples/Scripts/AreaText.html +65 -0
- package/examples/Scripts/PathText.html +48 -0
- package/examples/Scripts/TextRanges.html +51 -0
- package/package.json +8 -11
|
@@ -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 ========================== -->
|
|
@@ -162,6 +163,32 @@ for (var i = 0; i < 100; i++) {
|
|
|
162
163
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
163
164
|
|
|
164
165
|
|
|
166
|
+
<div id="key" class="member">
|
|
167
|
+
<div class="member-link">
|
|
168
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="member-description hidden">
|
|
171
|
+
|
|
172
|
+
<div class="member-text">
|
|
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>
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
<ul class="member-list">
|
|
178
|
+
<h4>Type:</h4>
|
|
179
|
+
<li>
|
|
180
|
+
<tt>Number</tt>
|
|
181
|
+
</li>
|
|
182
|
+
</ul>
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
|
|
165
192
|
<div id="id" class="member">
|
|
166
193
|
<div class="member-link">
|
|
167
194
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -508,7 +535,7 @@ path.visible = false;
|
|
|
508
535
|
<div class="member-description hidden">
|
|
509
536
|
|
|
510
537
|
<div class="member-text">
|
|
511
|
-
<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>
|
|
512
539
|
|
|
513
540
|
|
|
514
541
|
<ul class="member-list">
|
|
@@ -661,6 +688,42 @@ circle2.opacity = 0.5;
|
|
|
661
688
|
</div>
|
|
662
689
|
|
|
663
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
|
+
|
|
664
727
|
<div id="selected" class="member">
|
|
665
728
|
<div class="member-link">
|
|
666
729
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -718,6 +781,32 @@ path.selected = true; // Select the path
|
|
|
718
781
|
</div>
|
|
719
782
|
|
|
720
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
|
+
|
|
721
810
|
</div>
|
|
722
811
|
|
|
723
812
|
</div>
|
|
@@ -957,6 +1046,7 @@ circle.position.x += 100;
|
|
|
957
1046
|
|
|
958
1047
|
<div class="member-text">
|
|
959
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>
|
|
960
1050
|
|
|
961
1051
|
|
|
962
1052
|
|
|
@@ -1245,6 +1335,34 @@ circle.position.x += 100;
|
|
|
1245
1335
|
|
|
1246
1336
|
|
|
1247
1337
|
|
|
1338
|
+
</div>
|
|
1339
|
+
|
|
1340
|
+
</div>
|
|
1341
|
+
</div>
|
|
1342
|
+
|
|
1343
|
+
|
|
1344
|
+
<div id="scope" class="member">
|
|
1345
|
+
<div class="member-link">
|
|
1346
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
1347
|
+
</div>
|
|
1348
|
+
<div class="member-description hidden">
|
|
1349
|
+
|
|
1350
|
+
<div class="member-text">
|
|
1351
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
1352
|
+
|
|
1353
|
+
<p>Read only.</p>
|
|
1354
|
+
|
|
1355
|
+
|
|
1356
|
+
|
|
1357
|
+
<ul class="member-list">
|
|
1358
|
+
<h4>Type:</h4>
|
|
1359
|
+
<li>
|
|
1360
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
1361
|
+
</li>
|
|
1362
|
+
</ul>
|
|
1363
|
+
|
|
1364
|
+
|
|
1365
|
+
|
|
1248
1366
|
</div>
|
|
1249
1367
|
|
|
1250
1368
|
</div>
|
|
@@ -1860,7 +1978,7 @@ path3.strokeJoin = 'bevel';
|
|
|
1860
1978
|
<div class="member-description hidden">
|
|
1861
1979
|
|
|
1862
1980
|
<div class="member-text">
|
|
1863
|
-
<p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
|
|
1981
|
+
<p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke. On text, non-scaling strokes are exact for uniform scaling only, as the glyphs are always stroked through the transformation.</p>
|
|
1864
1982
|
|
|
1865
1983
|
|
|
1866
1984
|
|
|
@@ -3068,9 +3186,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
3068
3186
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
3069
3187
|
<ul class="member-list">
|
|
3070
3188
|
<h4>Options:</h4>
|
|
3071
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3072
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3073
|
-
<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>
|
|
3074
3192
|
</ul>
|
|
3075
3193
|
|
|
3076
3194
|
<ul class="member-list">
|
|
@@ -3255,7 +3373,7 @@ function onMouseDown(event) {
|
|
|
3255
3373
|
</div>
|
|
3256
3374
|
<div class="member-description hidden">
|
|
3257
3375
|
<div class="member-text">
|
|
3258
|
-
|
|
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>
|
|
3259
3377
|
|
|
3260
3378
|
|
|
3261
3379
|
<ul class="member-list">
|
|
@@ -3275,7 +3393,7 @@ function onMouseDown(event) {
|
|
|
3275
3393
|
<h4>Returns:</h4>
|
|
3276
3394
|
|
|
3277
3395
|
<li>
|
|
3278
|
-
<tt><tt>Boolean</tt></tt>
|
|
3396
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3279
3397
|
</li>
|
|
3280
3398
|
|
|
3281
3399
|
|
|
@@ -3771,6 +3889,7 @@ function onMouseDown(event) {
|
|
|
3771
3889
|
<div class="member-text">
|
|
3772
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>
|
|
3773
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>
|
|
3774
3893
|
<ul class="member-list">
|
|
3775
3894
|
<h4>Options:</h4>
|
|
3776
3895
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4324,11 +4443,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4324
4443
|
|
|
4325
4444
|
<div id="replacewith-item" class="member">
|
|
4326
4445
|
<div class="member-link">
|
|
4327
|
-
<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>
|
|
4328
4447
|
</div>
|
|
4329
4448
|
<div class="member-description hidden">
|
|
4330
4449
|
<div class="member-text">
|
|
4331
|
-
<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>
|
|
4332
4451
|
|
|
4333
4452
|
|
|
4334
4453
|
<ul class="member-list">
|
|
@@ -4337,7 +4456,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4337
4456
|
<li>
|
|
4338
4457
|
<tt>item:</tt>
|
|
4339
4458
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4340
|
-
— the
|
|
4459
|
+
— the items that will replace this item
|
|
4341
4460
|
|
|
4342
4461
|
</li>
|
|
4343
4462
|
|
|
@@ -4510,7 +4629,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4510
4629
|
</div>
|
|
4511
4630
|
<div class="member-description hidden">
|
|
4512
4631
|
<div class="member-text">
|
|
4513
|
-
<p>Checks whether the item has a fill
|
|
4632
|
+
<p>Checks whether the item has a visible fill, a fill color with an alpha above 0. Hit-tests also hit transparent fills, see <a href="../classes/Item.html#hittest"><tt>hitTest</tt></a>.</p>
|
|
4514
4633
|
|
|
4515
4634
|
|
|
4516
4635
|
|
|
@@ -4518,7 +4637,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4518
4637
|
<h4>Returns:</h4>
|
|
4519
4638
|
|
|
4520
4639
|
<li>
|
|
4521
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
4640
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
4522
4641
|
</li>
|
|
4523
4642
|
|
|
4524
4643
|
|
|
@@ -6152,10 +6271,10 @@ function onMouseDown(event) {
|
|
|
6152
6271
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6153
6272
|
<ul class="member-list">
|
|
6154
6273
|
<h4>Options:</h4>
|
|
6155
|
-
<li><tt>options.move:
|
|
6156
|
-
<li><tt>options.drag:
|
|
6157
|
-
<li><tt>options.down:
|
|
6158
|
-
<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>
|
|
6159
6278
|
</ul>
|
|
6160
6279
|
|
|
6161
6280
|
<ul class="member-list">
|
|
@@ -6784,7 +6903,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
6784
6903
|
|
|
6785
6904
|
<!-- =========================== copyright notice ========================== -->
|
|
6786
6905
|
<p class="footer">
|
|
6787
|
-
Paper.js v0.
|
|
6906
|
+
Paper.js v0.15.0<br>
|
|
6788
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>
|
|
6789
6908
|
<div class="content-end"></div>
|
|
6790
6909
|
|