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
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
+
|
|
22
23
|
</div>
|
|
23
24
|
|
|
24
25
|
<!-- =============================== constructors ========================== -->
|
|
@@ -770,6 +771,32 @@ var shape = new Shape.Ellipse({
|
|
|
770
771
|
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
|
771
772
|
|
|
772
773
|
|
|
774
|
+
<div id="key" class="member">
|
|
775
|
+
<div class="member-link">
|
|
776
|
+
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="member-description hidden">
|
|
779
|
+
|
|
780
|
+
<div class="member-text">
|
|
781
|
+
<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>
|
|
782
|
+
|
|
783
|
+
|
|
784
|
+
|
|
785
|
+
<ul class="member-list">
|
|
786
|
+
<h4>Type:</h4>
|
|
787
|
+
<li>
|
|
788
|
+
<tt>Number</tt>
|
|
789
|
+
</li>
|
|
790
|
+
</ul>
|
|
791
|
+
|
|
792
|
+
|
|
793
|
+
|
|
794
|
+
</div>
|
|
795
|
+
|
|
796
|
+
</div>
|
|
797
|
+
</div>
|
|
798
|
+
|
|
799
|
+
|
|
773
800
|
<div id="id" class="member">
|
|
774
801
|
<div class="member-link">
|
|
775
802
|
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
|
@@ -1116,7 +1143,7 @@ path.visible = false;
|
|
|
1116
1143
|
<div class="member-description hidden">
|
|
1117
1144
|
|
|
1118
1145
|
<div class="member-text">
|
|
1119
|
-
<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.
|
|
1146
|
+
<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>
|
|
1120
1147
|
|
|
1121
1148
|
|
|
1122
1149
|
<ul class="member-list">
|
|
@@ -1269,6 +1296,42 @@ circle2.opacity = 0.5;
|
|
|
1269
1296
|
</div>
|
|
1270
1297
|
|
|
1271
1298
|
|
|
1299
|
+
<div id="textwrap" class="member">
|
|
1300
|
+
<div class="member-link">
|
|
1301
|
+
<a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
|
|
1302
|
+
</div>
|
|
1303
|
+
<div class="member-description hidden">
|
|
1304
|
+
|
|
1305
|
+
<div class="member-text">
|
|
1306
|
+
<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>
|
|
1307
|
+
|
|
1308
|
+
|
|
1309
|
+
|
|
1310
|
+
<ul class="member-list">
|
|
1311
|
+
<h4>Default:</h4>
|
|
1312
|
+
<li><tt>null</tt></li>
|
|
1313
|
+
</ul>
|
|
1314
|
+
|
|
1315
|
+
<ul class="member-list">
|
|
1316
|
+
<h4>Type:</h4>
|
|
1317
|
+
<li>
|
|
1318
|
+
<tt>Object</tt>
|
|
1319
|
+
</li>
|
|
1320
|
+
</ul>
|
|
1321
|
+
|
|
1322
|
+
|
|
1323
|
+
<h4>Example:</h4>
|
|
1324
|
+
|
|
1325
|
+
|
|
1326
|
+
<pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
|
|
1327
|
+
circle.textWrap = { offset: 10 };</code></pre>
|
|
1328
|
+
|
|
1329
|
+
</div>
|
|
1330
|
+
|
|
1331
|
+
</div>
|
|
1332
|
+
</div>
|
|
1333
|
+
|
|
1334
|
+
|
|
1272
1335
|
<div id="selected" class="member">
|
|
1273
1336
|
<div class="member-link">
|
|
1274
1337
|
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
|
@@ -1326,6 +1389,32 @@ path.selected = true; // Select the path
|
|
|
1326
1389
|
</div>
|
|
1327
1390
|
|
|
1328
1391
|
|
|
1392
|
+
</div>
|
|
1393
|
+
|
|
1394
|
+
</div>
|
|
1395
|
+
</div>
|
|
1396
|
+
|
|
1397
|
+
|
|
1398
|
+
<div id="fullyselected" class="member">
|
|
1399
|
+
<div class="member-link">
|
|
1400
|
+
<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
|
|
1401
|
+
</div>
|
|
1402
|
+
<div class="member-description hidden">
|
|
1403
|
+
|
|
1404
|
+
<div class="member-text">
|
|
1405
|
+
<p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
|
|
1406
|
+
|
|
1407
|
+
|
|
1408
|
+
|
|
1409
|
+
<ul class="member-list">
|
|
1410
|
+
<h4>Type:</h4>
|
|
1411
|
+
<li>
|
|
1412
|
+
<tt>Boolean</tt>
|
|
1413
|
+
</li>
|
|
1414
|
+
</ul>
|
|
1415
|
+
|
|
1416
|
+
|
|
1417
|
+
|
|
1329
1418
|
</div>
|
|
1330
1419
|
|
|
1331
1420
|
</div>
|
|
@@ -1565,6 +1654,7 @@ circle.position.x += 100;
|
|
|
1565
1654
|
|
|
1566
1655
|
<div class="member-text">
|
|
1567
1656
|
<p>The bounding rectangle of the item including stroke width.</p>
|
|
1657
|
+
<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>
|
|
1568
1658
|
|
|
1569
1659
|
|
|
1570
1660
|
|
|
@@ -1853,6 +1943,34 @@ circle.position.x += 100;
|
|
|
1853
1943
|
|
|
1854
1944
|
|
|
1855
1945
|
|
|
1946
|
+
</div>
|
|
1947
|
+
|
|
1948
|
+
</div>
|
|
1949
|
+
</div>
|
|
1950
|
+
|
|
1951
|
+
|
|
1952
|
+
<div id="scope" class="member">
|
|
1953
|
+
<div class="member-link">
|
|
1954
|
+
<a name="scope" href="#scope"><tt><b>scope</b></tt></a>
|
|
1955
|
+
</div>
|
|
1956
|
+
<div class="member-description hidden">
|
|
1957
|
+
|
|
1958
|
+
<div class="member-text">
|
|
1959
|
+
<p>The scope that this item belongs to, through its project.</p>
|
|
1960
|
+
|
|
1961
|
+
<p>Read only.</p>
|
|
1962
|
+
|
|
1963
|
+
|
|
1964
|
+
|
|
1965
|
+
<ul class="member-list">
|
|
1966
|
+
<h4>Type:</h4>
|
|
1967
|
+
<li>
|
|
1968
|
+
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
|
1969
|
+
</li>
|
|
1970
|
+
</ul>
|
|
1971
|
+
|
|
1972
|
+
|
|
1973
|
+
|
|
1856
1974
|
</div>
|
|
1857
1975
|
|
|
1858
1976
|
</div>
|
|
@@ -2468,7 +2586,7 @@ path3.strokeJoin = 'bevel';
|
|
|
2468
2586
|
<div class="member-description hidden">
|
|
2469
2587
|
|
|
2470
2588
|
<div class="member-text">
|
|
2471
|
-
<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>
|
|
2589
|
+
<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>
|
|
2472
2590
|
|
|
2473
2591
|
|
|
2474
2592
|
|
|
@@ -3676,9 +3794,9 @@ for (var i = 0; i < 20; i++) {
|
|
|
3676
3794
|
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
|
3677
3795
|
<ul class="member-list">
|
|
3678
3796
|
<h4>Options:</h4>
|
|
3679
|
-
<li><tt>resolution: <tt>Number</tt></tt> — the desired
|
|
3680
|
-
<li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — specifies a raster to be reused
|
|
3681
|
-
<li><tt>insert: <tt>Boolean</tt></tt> — specifies whether the raster
|
|
3797
|
+
<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>
|
|
3798
|
+
<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>
|
|
3799
|
+
<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>
|
|
3682
3800
|
</ul>
|
|
3683
3801
|
|
|
3684
3802
|
<ul class="member-list">
|
|
@@ -3863,7 +3981,7 @@ function onMouseDown(event) {
|
|
|
3863
3981
|
</div>
|
|
3864
3982
|
<div class="member-description hidden">
|
|
3865
3983
|
<div class="member-text">
|
|
3866
|
-
|
|
3984
|
+
<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>
|
|
3867
3985
|
|
|
3868
3986
|
|
|
3869
3987
|
<ul class="member-list">
|
|
@@ -3883,7 +4001,7 @@ function onMouseDown(event) {
|
|
|
3883
4001
|
<h4>Returns:</h4>
|
|
3884
4002
|
|
|
3885
4003
|
<li>
|
|
3886
|
-
<tt><tt>Boolean</tt></tt>
|
|
4004
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items overlap, <tt>false</tt> otherwise
|
|
3887
4005
|
</li>
|
|
3888
4006
|
|
|
3889
4007
|
|
|
@@ -4379,6 +4497,7 @@ function onMouseDown(event) {
|
|
|
4379
4497
|
<div class="member-text">
|
|
4380
4498
|
<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>
|
|
4381
4499
|
<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>
|
|
4500
|
+
<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>
|
|
4382
4501
|
<ul class="member-list">
|
|
4383
4502
|
<h4>Options:</h4>
|
|
4384
4503
|
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
|
@@ -4932,11 +5051,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4932
5051
|
|
|
4933
5052
|
<div id="replacewith-item" class="member">
|
|
4934
5053
|
<div class="member-link">
|
|
4935
|
-
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
|
5054
|
+
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
|
|
4936
5055
|
</div>
|
|
4937
5056
|
<div class="member-description hidden">
|
|
4938
5057
|
<div class="member-text">
|
|
4939
|
-
<p>Replaces this item with the provided new
|
|
5058
|
+
<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>
|
|
4940
5059
|
|
|
4941
5060
|
|
|
4942
5061
|
<ul class="member-list">
|
|
@@ -4945,7 +5064,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
4945
5064
|
<li>
|
|
4946
5065
|
<tt>item:</tt>
|
|
4947
5066
|
<a href="../classes/Item.html"><tt>Item</tt></a>
|
|
4948
|
-
— the
|
|
5067
|
+
— the items that will replace this item
|
|
4949
5068
|
|
|
4950
5069
|
</li>
|
|
4951
5070
|
|
|
@@ -5118,7 +5237,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5118
5237
|
</div>
|
|
5119
5238
|
<div class="member-description hidden">
|
|
5120
5239
|
<div class="member-text">
|
|
5121
|
-
<p>Checks whether the item has a fill
|
|
5240
|
+
<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>
|
|
5122
5241
|
|
|
5123
5242
|
|
|
5124
5243
|
|
|
@@ -5126,7 +5245,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
|
|
5126
5245
|
<h4>Returns:</h4>
|
|
5127
5246
|
|
|
5128
5247
|
<li>
|
|
5129
|
-
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
|
5248
|
+
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
|
|
5130
5249
|
</li>
|
|
5131
5250
|
|
|
5132
5251
|
|
|
@@ -6760,10 +6879,10 @@ function onMouseDown(event) {
|
|
|
6760
6879
|
<p>Removes the item when the events specified in the passed options object occur.</p>
|
|
6761
6880
|
<ul class="member-list">
|
|
6762
6881
|
<h4>Options:</h4>
|
|
6763
|
-
<li><tt>options.move:
|
|
6764
|
-
<li><tt>options.drag:
|
|
6765
|
-
<li><tt>options.down:
|
|
6766
|
-
<li><tt>options.up:
|
|
6882
|
+
<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>
|
|
6883
|
+
<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>
|
|
6884
|
+
<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>
|
|
6885
|
+
<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>
|
|
6767
6886
|
</ul>
|
|
6768
6887
|
|
|
6769
6888
|
<ul class="member-list">
|
|
@@ -7392,7 +7511,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
|
|
7392
7511
|
|
|
7393
7512
|
<!-- =========================== copyright notice ========================== -->
|
|
7394
7513
|
<p class="footer">
|
|
7395
|
-
Paper.js v0.
|
|
7514
|
+
Paper.js v0.15.0<br>
|
|
7396
7515
|
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>
|
|
7397
7516
|
<div class="content-end"></div>
|
|
7398
7517
|
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
<h1>Size</h1>
|
|
17
17
|
|
|
18
18
|
<p>The Size object is used to describe the size or dimensions of something, through its <a href="../classes/Size.html#width"><tt>width</tt></a> and <a href="../classes/Size.html#height"><tt>height</tt></a> properties.</p>
|
|
19
|
+
<p>Wherever a size is the only argument of a function, it can also be passed as two numbers, e.g. <code>size.multiply(2, 3)</code>.</p>
|
|
19
20
|
<h4>Example:<span class="description">Create a size that is 10pt wide and 5pt high, and use it to define a rectangle:</span></h4>
|
|
20
21
|
|
|
21
22
|
|
|
@@ -25,6 +26,7 @@ console.log(size.height); // 5
|
|
|
25
26
|
var rect = new Rectangle(new Point(20, 15), size);
|
|
26
27
|
console.log(rect); // { x: 20, y: 15, width: 10, height: 5 }</code></pre>
|
|
27
28
|
|
|
29
|
+
|
|
28
30
|
</div>
|
|
29
31
|
|
|
30
32
|
<!-- =============================== constructors ========================== -->
|
|
@@ -870,7 +872,7 @@ console.log(result); // {width: 2, height: 0}</code></pre>
|
|
|
870
872
|
|
|
871
873
|
<li>
|
|
872
874
|
<tt>size:</tt>
|
|
873
|
-
<a href="../classes/Size.html"><tt>Size</tt></a>
|
|
875
|
+
<a href="../classes/Size.html"><tt>Size</tt></a>⟋Array of <tt>Numbers</tt>
|
|
874
876
|
— the size to compare to
|
|
875
877
|
|
|
876
878
|
</li>
|
|
@@ -1876,7 +1878,7 @@ var size = maxSize * randomSize;</code></pre>
|
|
|
1876
1878
|
|
|
1877
1879
|
<!-- =========================== copyright notice ========================== -->
|
|
1878
1880
|
<p class="footer">
|
|
1879
|
-
Paper.js v0.
|
|
1881
|
+
Paper.js v0.15.0<br>
|
|
1880
1882
|
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>
|
|
1881
1883
|
<div class="content-end"></div>
|
|
1882
1884
|
|