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.
Files changed (57) hide show
  1. package/CHANGELOG.md +337 -0
  2. package/README.md +19 -14
  3. package/dist/docs/assets/js/paper.js +7351 -1706
  4. package/dist/docs/classes/AreaText.html +8658 -0
  5. package/dist/docs/classes/ChangeFlag.html +385 -0
  6. package/dist/docs/classes/Color.html +2 -1
  7. package/dist/docs/classes/CompoundPath.html +208 -69
  8. package/dist/docs/classes/Curve.html +2 -1
  9. package/dist/docs/classes/CurveLocation.html +2 -1
  10. package/dist/docs/classes/Event.html +5 -4
  11. package/dist/docs/classes/Gradient.html +2 -1
  12. package/dist/docs/classes/GradientStop.html +2 -1
  13. package/dist/docs/classes/Group.html +204 -17
  14. package/dist/docs/classes/HitResult.html +4 -2
  15. package/dist/docs/classes/HostItem.html +6786 -0
  16. package/dist/docs/classes/Item.html +193 -17
  17. package/dist/docs/classes/Key.html +2 -1
  18. package/dist/docs/classes/KeyEvent.html +5 -4
  19. package/dist/docs/classes/Layer.html +201 -17
  20. package/dist/docs/classes/Matrix.html +2 -1
  21. package/dist/docs/classes/MouseEvent.html +5 -4
  22. package/dist/docs/classes/PaperScope.html +5 -2
  23. package/dist/docs/classes/PaperScript.html +6 -2
  24. package/dist/docs/classes/Path.html +183 -70
  25. package/dist/docs/classes/PathItem.html +326 -187
  26. package/dist/docs/classes/PathText.html +8528 -0
  27. package/dist/docs/classes/Point.html +13 -2
  28. package/dist/docs/classes/PointText.html +1404 -63
  29. package/dist/docs/classes/Project.html +221 -1
  30. package/dist/docs/classes/Raster.html +136 -17
  31. package/dist/docs/classes/Rectangle.html +3 -2
  32. package/dist/docs/classes/Segment.html +2 -1
  33. package/dist/docs/classes/Shape.html +136 -17
  34. package/dist/docs/classes/Size.html +4 -2
  35. package/dist/docs/classes/Style.html +768 -15
  36. package/dist/docs/classes/SymbolDefinition.html +2 -1
  37. package/dist/docs/classes/SymbolItem.html +136 -17
  38. package/dist/docs/classes/TextItem.html +1566 -222
  39. package/dist/docs/classes/TextRange.html +186 -0
  40. package/dist/docs/classes/TextStory.html +355 -0
  41. package/dist/docs/classes/Tool.html +127 -1
  42. package/dist/docs/classes/ToolEvent.html +57 -4
  43. package/dist/docs/classes/Tween.html +17 -1
  44. package/dist/docs/classes/View.html +148 -5
  45. package/dist/docs/classes/global.html +2 -1
  46. package/dist/docs/classes/index.html +2 -2
  47. package/dist/docs/index.html +1 -1
  48. package/dist/paper-core.js +7160 -1663
  49. package/dist/paper-core.min.js +3 -3
  50. package/dist/paper-full.js +7351 -1706
  51. package/dist/paper-full.min.js +3 -3
  52. package/dist/paper-hosted.js +24058 -0
  53. package/dist/paper.d.ts +1996 -155
  54. package/examples/Scripts/AreaText.html +65 -0
  55. package/examples/Scripts/PathText.html +48 -0
  56. package/examples/Scripts/TextRanges.html +51 -0
  57. package/package.json +8 -11
package/dist/docs/classes/TextItem.html CHANGED
@@ -17,7 +17,8 @@
17
17
 
18
18
  <p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
19
19
 
20
- <p>The TextItem type allows you to create typography. Its functionality is inherited by different text item types such as <a href="../classes/PointText.html"><tt>PointText</tt></a>, and <tt>AreaText</tt> (coming soon). They each add a layer of functionality that is unique to their type, but share the underlying properties and functions that they inherit from TextItem.</p>
20
+ <p>The TextItem type allows you to create typography. Its functionality is inherited by different text item types such as <a href="../classes/PointText.html"><tt>PointText</tt></a>, <a href="../classes/PathText.html"><tt>PathText</tt></a> and <a href="../classes/AreaText.html"><tt>AreaText</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 TextItem.</p>
21
+
21
22
 
22
23
  </div>
23
24
 
@@ -30,16 +31,21 @@
30
31
  <h2>Properties</h2>
31
32
 
32
33
 
33
- <div id="content" class="member">
34
+ <div id="orientation" class="member">
34
35
  <div class="member-link">
35
- <a name="content" href="#content"><tt><b>content</b></tt></a>
36
+ <a name="orientation" href="#orientation"><tt><b>orientation</b></tt></a>
36
37
  </div>
37
38
  <div class="member-description hidden">
38
39
 
39
40
  <div class="member-text">
40
- <p>The text contents of the text item.</p>
41
+ <p>The direction the text&rsquo;s lines run in: <code>&#39;horizontal&#39;</code>, or <code>&#39;vertical&#39;</code> from top to bottom, with the lines from right to left.</p>
42
+
41
43
 
42
44
 
45
+ <ul class="member-list">
46
+ <h4>Default:</h4>
47
+ <li><tt>'horizontal'</tt></li>
48
+ </ul>
43
49
 
44
50
  <ul class="member-list">
45
51
  <h4>Type:</h4>
@@ -49,51 +55,175 @@
49
55
  </ul>
50
56
 
51
57
 
52
- <h4>Example:<span class="description">Setting the content of a PointText item:</span></h4>
58
+
59
+ </div>
53
60
 
54
- <div class="paperscript split">
61
+ </div>
62
+ </div>
63
+
64
+
65
+ <div id="textpath" class="member">
66
+ <div class="member-link">
67
+ <a name="textpath" href="#textpath"><tt><b>textPath</b></tt></a>
68
+ </div>
69
+ <div class="member-description hidden">
55
70
 
56
- <div class="buttons">
57
- <div class="button run">Run</div>
71
+ <div class="member-text">
72
+ <p>The path that the text flows in (<a href="../classes/AreaText.html"><tt>AreaText</tt></a>) or along (<a href="../classes/PathText.html"><tt>PathText</tt></a>). It guides the text and isn&rsquo;t drawn itself.</p>
73
+
74
+
75
+
76
+ <ul class="member-list">
77
+ <h4>Type:</h4>
78
+ <li>
79
+ <a href="../classes/PathItem.html"><tt>PathItem</tt></a>
80
+ </li>
81
+ </ul>
82
+
83
+
84
+
58
85
  </div>
59
86
 
60
- <script type="text/paperscript" canvas="canvas-0">
61
- // Create a point-text item at {x: 30, y: 30}:
62
- var text = new PointText(new Point(30, 30));
63
- text.fillColor = 'black';
87
+ </div>
88
+ </div>
89
+
90
+
91
+ <h3>Linking</h3>
64
92
 
65
- // Set the content of the text item:
66
- text.content = 'Hello world';
67
- </script>
68
- <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
93
+ <div id="story" class="member">
94
+ <div class="member-link">
95
+ <a name="story" href="#story"><tt><b>story</b></tt></a>
69
96
  </div>
97
+ <div class="member-description hidden">
70
98
 
99
+ <div class="member-text">
100
+ <p>The story the text item shows: the text of all the text items linked with it.</p>
101
+
102
+ <p>Read only.</p>
103
+
104
+
105
+
106
+ <ul class="member-list">
107
+ <h4>Type:</h4>
108
+ <li>
109
+ <a href="../classes/TextStory.html"><tt>TextStory</tt></a>
110
+ </li>
111
+ </ul>
112
+
113
+
114
+
115
+ </div>
71
116
 
72
- <h4>Example:<span class="description">Interactive example, move your mouse over the view below:</span></h4>
117
+ </div>
118
+ </div>
119
+
120
+
121
+ <div id="nexttextitem" class="member">
122
+ <div class="member-link">
123
+ <a name="nexttextitem" href="#nexttextitem"><tt><b>nextTextItem</b></tt></a>
124
+ </div>
125
+ <div class="member-description hidden">
73
126
 
74
- <div class="paperscript split">
127
+ <div class="member-text">
128
+ <p>The text item after this one in its story, if any.</p>
129
+
130
+ <p>Read only.</p>
131
+
132
+
133
+
134
+ <ul class="member-list">
135
+ <h4>Type:</h4>
136
+ <li>
137
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
138
+ </li>
139
+ </ul>
140
+
141
+
142
+
143
+ </div>
75
144
 
76
- <div class="buttons">
77
- <div class="button run">Run</div>
78
145
  </div>
146
+ </div>
147
+
148
+
149
+ <div id="previoustextitem" class="member">
150
+ <div class="member-link">
151
+ <a name="previoustextitem" href="#previoustextitem"><tt><b>previousTextItem</b></tt></a>
152
+ </div>
153
+ <div class="member-description hidden">
79
154
 
80
- <script type="text/paperscript" canvas="canvas-1">
81
- // Create a point-text item at {x: 30, y: 30}:
82
- var text = new PointText(new Point(30, 30));
83
- text.fillColor = 'black';
155
+ <div class="member-text">
156
+ <p>The text item before this one in its story, if any.</p>
157
+
158
+ <p>Read only.</p>
159
+
160
+
161
+
162
+ <ul class="member-list">
163
+ <h4>Type:</h4>
164
+ <li>
165
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
166
+ </li>
167
+ </ul>
168
+
169
+
170
+
171
+ </div>
84
172
 
85
- text.content = 'Move your mouse over the view, to see its position';
173
+ </div>
174
+ </div>
175
+
176
+
177
+ <div id="visiblerange" class="member">
178
+ <div class="member-link">
179
+ <a name="visiblerange" href="#visiblerange"><tt><b>visibleRange</b></tt></a>
180
+ </div>
181
+ <div class="member-description hidden">
86
182
 
87
- function onMouseMove(event) {
88
- // Each time the mouse is moved, set the content of
89
- // the point text to describe the position of the mouse:
90
- text.content = 'Your position is: ' + event.point.toString();
91
- }
92
- </script>
93
- <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
183
+ <div class="member-text">
184
+ <p>The range of the story that this text item shows, as its layout flows the story through the linked text items: without the overflow, and without what the ones before it show.</p>
185
+
186
+ <p>Read only.</p>
187
+
188
+
189
+
190
+ <ul class="member-list">
191
+ <h4>Type:</h4>
192
+ <li>
193
+ <a href="../classes/TextRange.html"><tt>TextRange</tt></a>
194
+ </li>
195
+ </ul>
196
+
197
+
198
+
94
199
  </div>
95
200
 
201
+ </div>
202
+ </div>
203
+
204
+
205
+ <div id="lines" class="member">
206
+ <div class="member-link">
207
+ <a name="lines" href="#lines"><tt><b>lines</b></tt></a>
208
+ </div>
209
+ <div class="member-description hidden">
96
210
 
211
+ <div class="member-text">
212
+ <p>The lines of the text, as its layout breaks them: each a range of its story, with its <code>baseline</code>, a <a href="../classes/undefined.html"><tt>Line</tt></a> along it, and its <code>bounds</code>, in the text item&rsquo;s own coordinates. A <a href="../classes/PathText.html"><tt>PathText</tt></a>&rsquo;s one line follows its path: these describe it laid out straight.</p>
213
+
214
+ <p>Read only.</p>
215
+
216
+
217
+
218
+ <ul class="member-list">
219
+ <h4>Type:</h4>
220
+ <li>
221
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
222
+ </li>
223
+ </ul>
224
+
225
+
226
+
97
227
  </div>
98
228
 
99
229
  </div>
@@ -133,26 +263,963 @@ function onMouseMove(event) {
133
263
  </div>
134
264
 
135
265
 
136
- <div id="fontweight" class="member">
266
+ <div id="fontweight" class="member">
267
+ <div class="member-link">
268
+ <a name="fontweight" href="#fontweight"><tt><b>fontWeight</b></tt></a>
269
+ </div>
270
+ <div class="member-description hidden">
271
+
272
+ <div class="member-text">
273
+ <p>The font-weight to be used in text content.</p>
274
+
275
+
276
+
277
+ <ul class="member-list">
278
+ <h4>Default:</h4>
279
+ <li><tt>'normal'</tt></li>
280
+ </ul>
281
+
282
+ <ul class="member-list">
283
+ <h4>Type:</h4>
284
+ <li>
285
+ <tt>String</tt>⟋<tt>Number</tt>
286
+ </li>
287
+ </ul>
288
+
289
+
290
+
291
+ </div>
292
+
293
+ </div>
294
+ </div>
295
+
296
+
297
+ <div id="fontsize" class="member">
298
+ <div class="member-link">
299
+ <a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
300
+ </div>
301
+ <div class="member-description hidden">
302
+
303
+ <div class="member-text">
304
+ <p>The font size of text content, as a number in pixels, or as a string with optional units <code>&#39;px&#39;</code>, <code>&#39;pt&#39;</code> and <code>&#39;em&#39;</code>.</p>
305
+
306
+
307
+
308
+ <ul class="member-list">
309
+ <h4>Default:</h4>
310
+ <li><tt>10</tt></li>
311
+ </ul>
312
+
313
+ <ul class="member-list">
314
+ <h4>Type:</h4>
315
+ <li>
316
+ <tt>Number</tt>⟋<tt>String</tt>
317
+ </li>
318
+ </ul>
319
+
320
+
321
+
322
+ </div>
323
+
324
+ </div>
325
+ </div>
326
+
327
+
328
+ <div id="lineheight" class="member">
329
+ <div class="member-link">
330
+ <a name="lineheight" href="#lineheight"><tt><b>lineHeight</b></tt></a>
331
+ </div>
332
+ <div class="member-description hidden">
333
+
334
+ <div class="member-text">
335
+ <p>The line height of text content: the distance from one line&rsquo;s baseline to the next. Automatic, as <code>&#39;auto&#39;</code> (1.2) or another factor of the letters&rsquo; font size, each line moving down by its largest letters&rsquo;; or fixed, as a length with units as the font size takes them (<code>&#39;18px&#39;</code>, <code>&#39;12pt&#39;</code>). <code>leading</code>, as Paper.js had it before, sets and reads it as a fixed length in pixels.</p>
336
+
337
+
338
+
339
+ <ul class="member-list">
340
+ <h4>Default:</h4>
341
+ <li><tt>'auto'</tt></li>
342
+ </ul>
343
+
344
+ <ul class="member-list">
345
+ <h4>Type:</h4>
346
+ <li>
347
+ <tt>Number</tt>⟋<tt>String</tt>
348
+ </li>
349
+ </ul>
350
+
351
+
352
+
353
+ </div>
354
+
355
+ </div>
356
+ </div>
357
+
358
+
359
+ <div id="lettertracking" class="member">
360
+ <div class="member-link">
361
+ <a name="lettertracking" href="#lettertracking"><tt><b>letterTracking</b></tt></a>
362
+ </div>
363
+ <div class="member-description hidden">
364
+
365
+ <div class="member-text">
366
+ <p>The letter tracking of text content: the space added after each letter, along the line, in thousandths of an em, as in Adobe Illustrator and InDesign. A tracking of 100 adds a tenth of the font size. Also <code>tracking</code>, its former name.</p>
367
+
368
+
369
+
370
+ <ul class="member-list">
371
+ <h4>Default:</h4>
372
+ <li><tt>0</tt></li>
373
+ </ul>
374
+
375
+ <ul class="member-list">
376
+ <h4>Type:</h4>
377
+ <li>
378
+ <tt>Number</tt>
379
+ </li>
380
+ </ul>
381
+
382
+
383
+
384
+ </div>
385
+
386
+ </div>
387
+ </div>
388
+
389
+
390
+ <div id="letterkerning" class="member">
391
+ <div class="member-link">
392
+ <a name="letterkerning" href="#letterkerning"><tt><b>letterKerning</b></tt></a>
393
+ </div>
394
+ <div class="member-description hidden">
395
+
396
+ <div class="member-text">
397
+ <p>The letter kerning of text content: the space added after a letter, along the line, in thousandths of an em, in place of the font&rsquo;s own kerning pair; <code>null</code> for the font&rsquo;s kerning.</p>
398
+
399
+
400
+
401
+ <ul class="member-list">
402
+ <h4>Default:</h4>
403
+ <li><tt>null</tt></li>
404
+ </ul>
405
+
406
+ <ul class="member-list">
407
+ <h4>Type:</h4>
408
+ <li>
409
+ <tt>Number</tt>
410
+ </li>
411
+ </ul>
412
+
413
+
414
+
415
+ </div>
416
+
417
+ </div>
418
+ </div>
419
+
420
+
421
+ <div id="fontstyle" class="member">
422
+ <div class="member-link">
423
+ <a name="fontstyle" href="#fontstyle"><tt><b>fontStyle</b></tt></a>
424
+ </div>
425
+ <div class="member-description hidden">
426
+
427
+ <div class="member-text">
428
+ <p>The font style of text content, as in CSS: upright or slanted. Together with the <a href="../classes/TextItem.html#fontweight"><tt>fontWeight</tt></a>, it says what a font&rsquo;s style name says, e.g. <code>&#39;Bold Italic&#39;</code>.</p>
429
+
430
+
431
+ <ul class="member-list">
432
+ <h4>Values:</h4>
433
+ <li><tt>'normal'</tt>, <tt>'italic'</tt>, <tt>'oblique'</tt></li>
434
+ </ul>
435
+
436
+
437
+ <ul class="member-list">
438
+ <h4>Default:</h4>
439
+ <li><tt>'normal'</tt></li>
440
+ </ul>
441
+
442
+ <ul class="member-list">
443
+ <h4>Type:</h4>
444
+ <li>
445
+ <tt>String</tt>
446
+ </li>
447
+ </ul>
448
+
449
+
450
+
451
+ </div>
452
+
453
+ </div>
454
+ </div>
455
+
456
+
457
+ <div id="fontvariations" class="member">
458
+ <div class="member-link">
459
+ <a name="fontvariations" href="#fontvariations"><tt><b>fontVariations</b></tt></a>
460
+ </div>
461
+ <div class="member-description hidden">
462
+
463
+ <div class="member-text">
464
+ <p>The settings of a variable font&rsquo;s axes, by their tags: <code>{ wght: 600,
465
+ wdth: 80 }</code>. Kept for hosts that lay text out with its fonts; canvas doesn&rsquo;t draw them.</p>
466
+
467
+
468
+
469
+ <ul class="member-list">
470
+ <h4>Default:</h4>
471
+ <li><tt>null</tt></li>
472
+ </ul>
473
+
474
+ <ul class="member-list">
475
+ <h4>Type:</h4>
476
+ <li>
477
+ <tt>Object</tt>
478
+ </li>
479
+ </ul>
480
+
481
+
482
+
483
+ </div>
484
+
485
+ </div>
486
+ </div>
487
+
488
+
489
+ <div id="baselineshift" class="member">
490
+ <div class="member-link">
491
+ <a name="baselineshift" href="#baselineshift"><tt><b>baselineShift</b></tt></a>
492
+ </div>
493
+ <div class="member-description hidden">
494
+
495
+ <div class="member-text">
496
+ <p>How far the letters move up from the baseline, in pixels.</p>
497
+
498
+
499
+
500
+ <ul class="member-list">
501
+ <h4>Default:</h4>
502
+ <li><tt>0</tt></li>
503
+ </ul>
504
+
505
+ <ul class="member-list">
506
+ <h4>Type:</h4>
507
+ <li>
508
+ <tt>Number</tt>
509
+ </li>
510
+ </ul>
511
+
512
+
513
+
514
+ </div>
515
+
516
+ </div>
517
+ </div>
518
+
519
+
520
+ <div id="baselineposition" class="member">
521
+ <div class="member-link">
522
+ <a name="baselineposition" href="#baselineposition"><tt><b>baselinePosition</b></tt></a>
523
+ </div>
524
+ <div class="member-description hidden">
525
+
526
+ <div class="member-text">
527
+ <p>Whether the letters are set as superscripts or subscripts: smaller, and above or below the baseline.</p>
528
+
529
+
530
+ <ul class="member-list">
531
+ <h4>Values:</h4>
532
+ <li><tt>'normal'</tt>, <tt>'superscript'</tt>, <tt>'subscript'</tt></li>
533
+ </ul>
534
+
535
+
536
+ <ul class="member-list">
537
+ <h4>Default:</h4>
538
+ <li><tt>'normal'</tt></li>
539
+ </ul>
540
+
541
+ <ul class="member-list">
542
+ <h4>Type:</h4>
543
+ <li>
544
+ <tt>String</tt>
545
+ </li>
546
+ </ul>
547
+
548
+
549
+
550
+ </div>
551
+
552
+ </div>
553
+ </div>
554
+
555
+
556
+ <div id="letterscaling" class="member">
557
+ <div class="member-link">
558
+ <a name="letterscaling" href="#letterscaling"><tt><b>letterScaling</b></tt></a>
559
+ </div>
560
+ <div class="member-description hidden">
561
+
562
+ <div class="member-text">
563
+ <p>How much the letters are scaled, as <a href="../classes/Item.html#scaling"><tt>item.scaling</tt></a>: one factor for both directions, or a point with the horizontal and vertical ones.</p>
564
+
565
+
566
+
567
+ <ul class="member-list">
568
+ <h4>Default:</h4>
569
+ <li><tt>1</tt></li>
570
+ </ul>
571
+
572
+ <ul class="member-list">
573
+ <h4>Type:</h4>
574
+ <li>
575
+ <tt>Number</tt>⟋<a href="../classes/Point.html"><tt>Point</tt></a>
576
+ </li>
577
+ </ul>
578
+
579
+
580
+
581
+ </div>
582
+
583
+ </div>
584
+ </div>
585
+
586
+
587
+ <div id="letterrotation" class="member">
588
+ <div class="member-link">
589
+ <a name="letterrotation" href="#letterrotation"><tt><b>letterRotation</b></tt></a>
590
+ </div>
591
+ <div class="member-description hidden">
592
+
593
+ <div class="member-text">
594
+ <p>The rotation of each letter about its origin on the baseline, in degrees.</p>
595
+
596
+
597
+
598
+ <ul class="member-list">
599
+ <h4>Default:</h4>
600
+ <li><tt>0</tt></li>
601
+ </ul>
602
+
603
+ <ul class="member-list">
604
+ <h4>Type:</h4>
605
+ <li>
606
+ <tt>Number</tt>
607
+ </li>
608
+ </ul>
609
+
610
+
611
+
612
+ </div>
613
+
614
+ </div>
615
+ </div>
616
+
617
+
618
+ <div id="capitals" class="member">
619
+ <div class="member-link">
620
+ <a name="capitals" href="#capitals"><tt><b>capitals</b></tt></a>
621
+ </div>
622
+ <div class="member-description hidden">
623
+
624
+ <div class="member-text">
625
+ <p>Whether the letters are set as capitals, or as small capitals.</p>
626
+
627
+
628
+ <ul class="member-list">
629
+ <h4>Values:</h4>
630
+ <li><tt>'normal'</tt>, <tt>'all'</tt>, <tt>'small'</tt></li>
631
+ </ul>
632
+
633
+
634
+ <ul class="member-list">
635
+ <h4>Default:</h4>
636
+ <li><tt>'normal'</tt></li>
637
+ </ul>
638
+
639
+ <ul class="member-list">
640
+ <h4>Type:</h4>
641
+ <li>
642
+ <tt>String</tt>
643
+ </li>
644
+ </ul>
645
+
646
+
647
+
648
+ </div>
649
+
650
+ </div>
651
+ </div>
652
+
653
+
654
+ <div id="underline" class="member">
655
+ <div class="member-link">
656
+ <a name="underline" href="#underline"><tt><b>underline</b></tt></a>
657
+ </div>
658
+ <div class="member-description hidden">
659
+
660
+ <div class="member-text">
661
+ <p>Whether the letters are underlined.</p>
662
+
663
+
664
+
665
+ <ul class="member-list">
666
+ <h4>Default:</h4>
667
+ <li><tt>false</tt></li>
668
+ </ul>
669
+
670
+ <ul class="member-list">
671
+ <h4>Type:</h4>
672
+ <li>
673
+ <tt>Boolean</tt>
674
+ </li>
675
+ </ul>
676
+
677
+
678
+
679
+ </div>
680
+
681
+ </div>
682
+ </div>
683
+
684
+
685
+ <div id="strikethrough" class="member">
686
+ <div class="member-link">
687
+ <a name="strikethrough" href="#strikethrough"><tt><b>strikethrough</b></tt></a>
688
+ </div>
689
+ <div class="member-description hidden">
690
+
691
+ <div class="member-text">
692
+ <p>Whether the letters are struck through.</p>
693
+
694
+
695
+
696
+ <ul class="member-list">
697
+ <h4>Default:</h4>
698
+ <li><tt>false</tt></li>
699
+ </ul>
700
+
701
+ <ul class="member-list">
702
+ <h4>Type:</h4>
703
+ <li>
704
+ <tt>Boolean</tt>
705
+ </li>
706
+ </ul>
707
+
708
+
709
+
710
+ </div>
711
+
712
+ </div>
713
+ </div>
714
+
715
+
716
+ <div id="features" class="member">
717
+ <div class="member-link">
718
+ <a name="features" href="#features"><tt><b>features</b></tt></a>
719
+ </div>
720
+ <div class="member-description hidden">
721
+
722
+ <div class="member-text">
723
+ <p>The OpenType features to turn on (<code>&#39;dlig&#39;</code>) or off (<code>&#39;-liga&#39;</code>). Kept for hosts that lay text out with its fonts; canvas doesn&rsquo;t draw them.</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
+ Array of <tt>Strings</tt>
736
+ </li>
737
+ </ul>
738
+
739
+
740
+
741
+ </div>
742
+
743
+ </div>
744
+ </div>
745
+
746
+
747
+ <h3>Paragraph Style</h3>
748
+
749
+ <div id="justification" class="member">
750
+ <div class="member-link">
751
+ <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
752
+ </div>
753
+ <div class="member-description hidden">
754
+
755
+ <div class="member-text">
756
+ <p>The justification of text paragraphs.</p>
757
+
758
+
759
+ <ul class="member-list">
760
+ <h4>Values:</h4>
761
+ <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt>, <tt>'start'</tt>, <tt>'end'</tt>, <tt>'justify'</tt></li>
762
+ </ul>
763
+
764
+
765
+ <ul class="member-list">
766
+ <h4>Default:</h4>
767
+ <li><tt>'left'</tt></li>
768
+ </ul>
769
+
770
+ <ul class="member-list">
771
+ <h4>Type:</h4>
772
+ <li>
773
+ <tt>String</tt>
774
+ </li>
775
+ </ul>
776
+
777
+
778
+
779
+ </div>
780
+
781
+ </div>
782
+ </div>
783
+
784
+
785
+ <div id="justifylast" class="member">
786
+ <div class="member-link">
787
+ <a name="justifylast" href="#justifylast"><tt><b>justifyLast</b></tt></a>
788
+ </div>
789
+ <div class="member-description hidden">
790
+
791
+ <div class="member-text">
792
+ <p>How the last line of a justified paragraph is aligned; <code>&#39;all&#39;</code> justifies it too.</p>
793
+
794
+
795
+ <ul class="member-list">
796
+ <h4>Values:</h4>
797
+ <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt>, <tt>'start'</tt>, <tt>'end'</tt>, <tt>'all'</tt></li>
798
+ </ul>
799
+
800
+
801
+ <ul class="member-list">
802
+ <h4>Default:</h4>
803
+ <li><tt>'left'</tt></li>
804
+ </ul>
805
+
806
+ <ul class="member-list">
807
+ <h4>Type:</h4>
808
+ <li>
809
+ <tt>String</tt>
810
+ </li>
811
+ </ul>
812
+
813
+
814
+
815
+ </div>
816
+
817
+ </div>
818
+ </div>
819
+
820
+
821
+ <div id="justifyspacing" class="member">
822
+ <div class="member-link">
823
+ <a name="justifyspacing" href="#justifyspacing"><tt><b>justifySpacing</b></tt></a>
824
+ </div>
825
+ <div class="member-description hidden">
826
+
827
+ <div class="member-text">
828
+ <p>How far justification may change the spacing, each as <code>[minimum, desired,
829
+ maximum]</code> in percent: <code>{ word: [80, 100, 133], letter: [0, 0, 0], glyph:
830
+ [100, 100, 100] }</code>; <code>null</code> for those. Kept for hosts: canvas text justifies by the word spacing alone.</p>
831
+
832
+
833
+
834
+ <ul class="member-list">
835
+ <h4>Default:</h4>
836
+ <li><tt>null</tt></li>
837
+ </ul>
838
+
839
+ <ul class="member-list">
840
+ <h4>Type:</h4>
841
+ <li>
842
+ <tt>Object</tt>
843
+ </li>
844
+ </ul>
845
+
846
+
847
+
848
+ </div>
849
+
850
+ </div>
851
+ </div>
852
+
853
+
854
+ <div id="startindent" class="member">
855
+ <div class="member-link">
856
+ <a name="startindent" href="#startindent"><tt><b>startIndent</b></tt></a>
857
+ </div>
858
+ <div class="member-description hidden">
859
+
860
+ <div class="member-text">
861
+ <p>The indent where the paragraph&rsquo;s lines start: left in left-to-right text, right in right-to-left text.</p>
862
+
863
+
864
+
865
+ <ul class="member-list">
866
+ <h4>Default:</h4>
867
+ <li><tt>0</tt></li>
868
+ </ul>
869
+
870
+ <ul class="member-list">
871
+ <h4>Type:</h4>
872
+ <li>
873
+ <tt>Number</tt>
874
+ </li>
875
+ </ul>
876
+
877
+
878
+
879
+ </div>
880
+
881
+ </div>
882
+ </div>
883
+
884
+
885
+ <div id="endindent" class="member">
886
+ <div class="member-link">
887
+ <a name="endindent" href="#endindent"><tt><b>endIndent</b></tt></a>
888
+ </div>
889
+ <div class="member-description hidden">
890
+
891
+ <div class="member-text">
892
+ <p>The indent where the paragraph&rsquo;s lines end.</p>
893
+
894
+
895
+
896
+ <ul class="member-list">
897
+ <h4>Default:</h4>
898
+ <li><tt>0</tt></li>
899
+ </ul>
900
+
901
+ <ul class="member-list">
902
+ <h4>Type:</h4>
903
+ <li>
904
+ <tt>Number</tt>
905
+ </li>
906
+ </ul>
907
+
908
+
909
+
910
+ </div>
911
+
912
+ </div>
913
+ </div>
914
+
915
+
916
+ <div id="firstlineindent" class="member">
917
+ <div class="member-link">
918
+ <a name="firstlineindent" href="#firstlineindent"><tt><b>firstLineIndent</b></tt></a>
919
+ </div>
920
+ <div class="member-description hidden">
921
+
922
+ <div class="member-text">
923
+ <p>The indent of the paragraph&rsquo;s first line, added to its start indent.</p>
924
+
925
+
926
+
927
+ <ul class="member-list">
928
+ <h4>Default:</h4>
929
+ <li><tt>0</tt></li>
930
+ </ul>
931
+
932
+ <ul class="member-list">
933
+ <h4>Type:</h4>
934
+ <li>
935
+ <tt>Number</tt>
936
+ </li>
937
+ </ul>
938
+
939
+
940
+
941
+ </div>
942
+
943
+ </div>
944
+ </div>
945
+
946
+
947
+ <div id="spacebefore" class="member">
948
+ <div class="member-link">
949
+ <a name="spacebefore" href="#spacebefore"><tt><b>spaceBefore</b></tt></a>
950
+ </div>
951
+ <div class="member-description hidden">
952
+
953
+ <div class="member-text">
954
+ <p>The space above the paragraph. Between two paragraphs, the larger of this one&rsquo;s and the space after the one before it is used.</p>
955
+
956
+
957
+
958
+ <ul class="member-list">
959
+ <h4>Default:</h4>
960
+ <li><tt>0</tt></li>
961
+ </ul>
962
+
963
+ <ul class="member-list">
964
+ <h4>Type:</h4>
965
+ <li>
966
+ <tt>Number</tt>
967
+ </li>
968
+ </ul>
969
+
970
+
971
+
972
+ </div>
973
+
974
+ </div>
975
+ </div>
976
+
977
+
978
+ <div id="spaceafter" class="member">
979
+ <div class="member-link">
980
+ <a name="spaceafter" href="#spaceafter"><tt><b>spaceAfter</b></tt></a>
981
+ </div>
982
+ <div class="member-description hidden">
983
+
984
+ <div class="member-text">
985
+ <p>The space below the paragraph.</p>
986
+
987
+
988
+
989
+ <ul class="member-list">
990
+ <h4>Default:</h4>
991
+ <li><tt>0</tt></li>
992
+ </ul>
993
+
994
+ <ul class="member-list">
995
+ <h4>Type:</h4>
996
+ <li>
997
+ <tt>Number</tt>
998
+ </li>
999
+ </ul>
1000
+
1001
+
1002
+
1003
+ </div>
1004
+
1005
+ </div>
1006
+ </div>
1007
+
1008
+
1009
+ <div id="hyphenation" class="member">
1010
+ <div class="member-link">
1011
+ <a name="hyphenation" href="#hyphenation"><tt><b>hyphenation</b></tt></a>
1012
+ </div>
1013
+ <div class="member-description hidden">
1014
+
1015
+ <div class="member-text">
1016
+ <p>Whether words are hyphenated at the ends of lines, and how: <code>true</code>, or <code>{
1017
+ wordsLongerThan, afterFirst, beforeLast, limit, zone, capitalized }</code>. Kept for hosts: canvas text breaks only at soft hyphens.</p>
1018
+
1019
+
1020
+
1021
+ <ul class="member-list">
1022
+ <h4>Default:</h4>
1023
+ <li><tt>false</tt></li>
1024
+ </ul>
1025
+
1026
+ <ul class="member-list">
1027
+ <h4>Type:</h4>
1028
+ <li>
1029
+ <tt>Boolean</tt>⟋<tt>Object</tt>
1030
+ </li>
1031
+ </ul>
1032
+
1033
+
1034
+
1035
+ </div>
1036
+
1037
+ </div>
1038
+ </div>
1039
+
1040
+
1041
+ <div id="composer" class="member">
1042
+ <div class="member-link">
1043
+ <a name="composer" href="#composer"><tt><b>composer</b></tt></a>
1044
+ </div>
1045
+ <div class="member-description hidden">
1046
+
1047
+ <div class="member-text">
1048
+ <p>How lines are broken: one line at a time, or all of the paragraph&rsquo;s lines together, for the most even spacing. Kept for hosts: canvas text breaks one line at a time.</p>
1049
+
1050
+
1051
+ <ul class="member-list">
1052
+ <h4>Values:</h4>
1053
+ <li><tt>'line'</tt>, <tt>'paragraph'</tt></li>
1054
+ </ul>
1055
+
1056
+
1057
+ <ul class="member-list">
1058
+ <h4>Default:</h4>
1059
+ <li><tt>'paragraph'</tt></li>
1060
+ </ul>
1061
+
1062
+ <ul class="member-list">
1063
+ <h4>Type:</h4>
1064
+ <li>
1065
+ <tt>String</tt>
1066
+ </li>
1067
+ </ul>
1068
+
1069
+
1070
+
1071
+ </div>
1072
+
1073
+ </div>
1074
+ </div>
1075
+
1076
+
1077
+ <div id="linewrap" class="member">
1078
+ <div class="member-link">
1079
+ <a name="linewrap" href="#linewrap"><tt><b>lineWrap</b></tt></a>
1080
+ </div>
1081
+ <div class="member-description hidden">
1082
+
1083
+ <div class="member-text">
1084
+ <p>How the lines of a paragraph in an area are evened out: <code>&#39;normal&#39;</code> fills each line as far as it goes, <code>&#39;balance&#39;</code> makes them all about as long, and <code>&#39;pretty&#39;</code> balances the last four lines when the last one is shorter than a third of the one before. Both keep the paragraph&rsquo;s number of lines.</p>
1085
+
1086
+
1087
+ <ul class="member-list">
1088
+ <h4>Values:</h4>
1089
+ <li><tt>'normal'</tt>, <tt>'balance'</tt>, <tt>'pretty'</tt></li>
1090
+ </ul>
1091
+
1092
+
1093
+ <ul class="member-list">
1094
+ <h4>Default:</h4>
1095
+ <li><tt>'normal'</tt></li>
1096
+ </ul>
1097
+
1098
+ <ul class="member-list">
1099
+ <h4>Type:</h4>
1100
+ <li>
1101
+ <tt>String</tt>
1102
+ </li>
1103
+ </ul>
1104
+
1105
+
1106
+
1107
+ </div>
1108
+
1109
+ </div>
1110
+ </div>
1111
+
1112
+
1113
+ <div id="tabs" class="member">
1114
+ <div class="member-link">
1115
+ <a name="tabs" href="#tabs"><tt><b>tabs</b></tt></a>
1116
+ </div>
1117
+ <div class="member-description hidden">
1118
+
1119
+ <div class="member-text">
1120
+ <p>The paragraph&rsquo;s tab stops: <code>[{ position, align, leader }]</code>, with <code>align</code> one of <code>&#39;left&#39;</code>, <code>&#39;center&#39;</code>, <code>&#39;right&#39;</code> and <code>&#39;decimal&#39;</code>. Kept for hosts: canvas text doesn&rsquo;t set tabs yet.</p>
1121
+
1122
+
1123
+
1124
+ <ul class="member-list">
1125
+ <h4>Default:</h4>
1126
+ <li><tt>null</tt></li>
1127
+ </ul>
1128
+
1129
+ <ul class="member-list">
1130
+ <h4>Type:</h4>
1131
+ <li>
1132
+ Array of <tt>Object</tt> objects
1133
+ </li>
1134
+ </ul>
1135
+
1136
+
1137
+
1138
+ </div>
1139
+
1140
+ </div>
1141
+ </div>
1142
+
1143
+
1144
+ <div id="direction" class="member">
1145
+ <div class="member-link">
1146
+ <a name="direction" href="#direction"><tt><b>direction</b></tt></a>
1147
+ </div>
1148
+ <div class="member-description hidden">
1149
+
1150
+ <div class="member-text">
1151
+ <p>The direction the paragraph&rsquo;s lines run in, which <code>&#39;start&#39;</code> and <code>&#39;end&#39;</code> follow; <code>null</code> for left to right.</p>
1152
+
1153
+
1154
+ <ul class="member-list">
1155
+ <h4>Values:</h4>
1156
+ <li><tt>'ltr'</tt>, <tt>'rtl'</tt></li>
1157
+ </ul>
1158
+
1159
+
1160
+ <ul class="member-list">
1161
+ <h4>Default:</h4>
1162
+ <li><tt>null</tt></li>
1163
+ </ul>
1164
+
1165
+ <ul class="member-list">
1166
+ <h4>Type:</h4>
1167
+ <li>
1168
+ <tt>String</tt>
1169
+ </li>
1170
+ </ul>
1171
+
1172
+
1173
+
1174
+ </div>
1175
+
1176
+ </div>
1177
+ </div>
1178
+
1179
+
1180
+ <h3>Content</h3>
1181
+
1182
+ <div id="content" class="member">
1183
+ <div class="member-link">
1184
+ <a name="content" href="#content"><tt><b>content</b></tt></a>
1185
+ </div>
1186
+ <div class="member-description hidden">
1187
+
1188
+ <div class="member-text">
1189
+ <p>The text of the item&rsquo;s story, see <a href="../classes/TextStory.html#content"><tt>textStory.content</tt></a>.</p>
1190
+
1191
+
1192
+
1193
+ <ul class="member-list">
1194
+ <h4>Type:</h4>
1195
+ <li>
1196
+ <tt>String</tt>
1197
+ </li>
1198
+ </ul>
1199
+
1200
+
1201
+
1202
+ </div>
1203
+
1204
+ </div>
1205
+ </div>
1206
+
1207
+
1208
+ <div id="runs" class="member">
137
1209
  <div class="member-link">
138
- <a name="fontweight" href="#fontweight"><tt><b>fontWeight</b></tt></a>
1210
+ <a name="runs" href="#runs"><tt><b>runs</b></tt></a>
139
1211
  </div>
140
1212
  <div class="member-description hidden">
141
1213
 
142
1214
  <div class="member-text">
143
- <p>The font-weight to be used in text content.</p>
1215
+ <p>The runs of the item&rsquo;s story, see <a href="../classes/TextStory.html#runs"><tt>textStory.runs</tt></a>.</p>
144
1216
 
145
1217
 
146
1218
 
147
- <ul class="member-list">
148
- <h4>Default:</h4>
149
- <li><tt>'normal'</tt></li>
150
- </ul>
151
-
152
1219
  <ul class="member-list">
153
1220
  <h4>Type:</h4>
154
1221
  <li>
155
- <tt>String</tt>⟋<tt>Number</tt>
1222
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
156
1223
  </li>
157
1224
  </ul>
158
1225
 
@@ -164,26 +1231,21 @@ function onMouseMove(event) {
164
1231
  </div>
165
1232
 
166
1233
 
167
- <div id="fontsize" class="member">
1234
+ <div id="paragraphs" class="member">
168
1235
  <div class="member-link">
169
- <a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
1236
+ <a name="paragraphs" href="#paragraphs"><tt><b>paragraphs</b></tt></a>
170
1237
  </div>
171
1238
  <div class="member-description hidden">
172
1239
 
173
1240
  <div class="member-text">
174
- <p>The font size of text content, as a number in pixels, or as a string with optional units <code>&#39;px&#39;</code>, <code>&#39;pt&#39;</code> and <code>&#39;em&#39;</code>.</p>
175
-
1241
+ <p>The paragraphs of the item&rsquo;s story, see <a href="../classes/TextStory.html#paragraphs"><tt>textStory.paragraphs</tt></a>.</p>
176
1242
 
177
1243
 
178
- <ul class="member-list">
179
- <h4>Default:</h4>
180
- <li><tt>10</tt></li>
181
- </ul>
182
1244
 
183
1245
  <ul class="member-list">
184
1246
  <h4>Type:</h4>
185
1247
  <li>
186
- <tt>Number</tt>⟋<tt>String</tt>
1248
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
187
1249
  </li>
188
1250
  </ul>
189
1251
 
@@ -195,26 +1257,21 @@ function onMouseMove(event) {
195
1257
  </div>
196
1258
 
197
1259
 
198
- <div id="leading" class="member">
1260
+ <div id="words" class="member">
199
1261
  <div class="member-link">
200
- <a name="leading" href="#leading"><tt><b>leading</b></tt></a>
1262
+ <a name="words" href="#words"><tt><b>words</b></tt></a>
201
1263
  </div>
202
1264
  <div class="member-description hidden">
203
1265
 
204
1266
  <div class="member-text">
205
- <p>The text leading of text content.</p>
206
-
1267
+ <p>The words of the item&rsquo;s story, see <a href="../classes/TextStory.html#words"><tt>textStory.words</tt></a>.</p>
207
1268
 
208
1269
 
209
- <ul class="member-list">
210
- <h4>Default:</h4>
211
- <li><tt>fontSize * 1.2</tt></li>
212
- </ul>
213
1270
 
214
1271
  <ul class="member-list">
215
1272
  <h4>Type:</h4>
216
1273
  <li>
217
- <tt>Number</tt>⟋<tt>String</tt>
1274
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
218
1275
  </li>
219
1276
  </ul>
220
1277
 
@@ -226,26 +1283,21 @@ function onMouseMove(event) {
226
1283
  </div>
227
1284
 
228
1285
 
229
- <div id="tracking" class="member">
1286
+ <div id="letters" class="member">
230
1287
  <div class="member-link">
231
- <a name="tracking" href="#tracking"><tt><b>tracking</b></tt></a>
1288
+ <a name="letters" href="#letters"><tt><b>letters</b></tt></a>
232
1289
  </div>
233
1290
  <div class="member-description hidden">
234
1291
 
235
1292
  <div class="member-text">
236
- <p>The tracking of text content: the space added after each character, in thousandths of an em, as in Adobe Illustrator and InDesign. A tracking of 100 adds a tenth of the font size.</p>
1293
+ <p>The letters of the item&rsquo;s story, see <a href="../classes/TextStory.html#letters"><tt>textStory.letters</tt></a>.</p>
237
1294
 
238
1295
 
239
1296
 
240
- <ul class="member-list">
241
- <h4>Default:</h4>
242
- <li><tt>0</tt></li>
243
- </ul>
244
-
245
1297
  <ul class="member-list">
246
1298
  <h4>Type:</h4>
247
1299
  <li>
248
- <tt>Number</tt>
1300
+ Array of <a href="../classes/TextRange.html"><tt>TextRange</tt></a> objects
249
1301
  </li>
250
1302
  </ul>
251
1303
 
@@ -256,49 +1308,223 @@ function onMouseMove(event) {
256
1308
  </div>
257
1309
  </div>
258
1310
 
259
-
260
- <h3>Paragraph Style</h3>
1311
+ </div>
261
1312
 
262
- <div id="justification" class="member">
1313
+
1314
+
1315
+
1316
+
1317
+ <!-- ============================== methods ================================ -->
1318
+ <div class="reference-members">
1319
+ <h2>Methods</h2>
1320
+
1321
+
1322
+ <div id="link-next" class="member">
263
1323
  <div class="member-link">
264
- <a name="justification" href="#justification"><tt><b>justification</b></tt></a>
1324
+ <a name="link-next" href="#link-next"><tt><b>link</b>(next)</tt></a>
265
1325
  </div>
266
1326
  <div class="member-description hidden">
267
-
268
1327
  <div class="member-text">
269
- <p>The justification of text paragraphs.</p>
1328
+ <p>Links the text item <code>next</code> after this one, so the story flows on into it. Its own story joins the end of this one.</p>
1329
+
270
1330
 
1331
+ <ul class="member-list">
1332
+ <h4>Parameters:</h4>
271
1333
 
272
- <ul class="member-list">
273
- <h4>Values:</h4>
274
- <li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt></li>
275
- </ul>
1334
+ <li>
1335
+ <tt>next:</tt>
1336
+ <a href="../classes/TextItem.html"><tt>TextItem</tt></a>
1337
+ &mdash;&nbsp;the text item to link
1338
+
1339
+ </li>
276
1340
 
1341
+ </ul>
1342
+
1343
+
1344
+ <ul class="member-list">
1345
+ <h4>Returns:</h4>
1346
+
1347
+ <li>
1348
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the text item was linked, <tt>false</tt> otherwise
1349
+ </li>
1350
+
1351
+
1352
+ </ul>
1353
+
1354
+
1355
+
1356
+
1357
+
1358
+ </div>
1359
+ </div>
1360
+ </div>
1361
+
1362
+
1363
+ <div id="islinked" class="member">
1364
+ <div class="member-link">
1365
+ <a name="islinked" href="#islinked"><tt><b>isLinked</b>()</tt></a>
1366
+ </div>
1367
+ <div class="member-description hidden">
1368
+ <div class="member-text">
1369
+ <p><tt>true</tt> if the text item is linked with others, <tt>false</tt> otherwise</p>
1370
+
277
1371
 
278
- <ul class="member-list">
279
- <h4>Default:</h4>
280
- <li><tt>'left'</tt></li>
281
- </ul>
282
1372
 
283
1373
  <ul class="member-list">
284
- <h4>Type:</h4>
285
- <li>
286
- <tt>String</tt>
287
- </li>
1374
+ <h4>Returns:</h4>
1375
+
1376
+ <li>
1377
+ <tt><tt>Boolean</tt></tt>
1378
+ </li>
1379
+
1380
+
288
1381
  </ul>
1382
+
1383
+
1384
+
1385
+
1386
+
1387
+ </div>
1388
+ </div>
1389
+ </div>
1390
+
1391
+
1392
+ <div id="unlink" class="member">
1393
+ <div class="member-link">
1394
+ <a name="unlink" href="#unlink"><tt><b>unlink</b>([which])</tt></a>
1395
+ </div>
1396
+ <div class="member-description hidden">
1397
+ <div class="member-text">
1398
+ <p>Unlinks the text item: <code>&#39;both&#39;</code> takes it out of its story, which flows on through the others, <code>&#39;before&#39;</code> and <code>&#39;after&#39;</code> break the story into two there.</p>
289
1399
 
290
1400
 
1401
+ <ul class="member-list">
1402
+ <h4>Parameters:</h4>
1403
+
1404
+ <li>
1405
+ <tt>which:</tt>
1406
+ <tt>String</tt>
1407
+ &mdash;&nbsp;<code>&#39;both&#39;</code>, <code>&#39;before&#39;</code> or <code>&#39;after&#39;</code>
1408
+ &mdash;&nbsp;optional, default: <tt>&lsquo;both&rsquo;</tt>
1409
+ </li>
1410
+
1411
+ </ul>
1412
+
1413
+
1414
+ <ul class="member-list">
1415
+ <h4>Returns:</h4>
1416
+
1417
+ <li>
1418
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the text item was unlinked, <tt>false</tt> otherwise
1419
+ </li>
1420
+
1421
+
1422
+ </ul>
1423
+
1424
+
1425
+
1426
+
1427
+
1428
+ </div>
1429
+ </div>
1430
+ </div>
1431
+
291
1432
 
1433
+ <div id="replace-content-start-end" class="member">
1434
+ <div class="member-link">
1435
+ <a name="replace-content-start-end" href="#replace-content-start-end"><tt><b>replace</b>(content, start, end)</tt></a>
292
1436
  </div>
1437
+ <div class="member-description hidden">
1438
+ <div class="member-text">
1439
+ <p>Replaces the content from <code>start</code> to <code>end</code> of the item&rsquo;s story, see <a href="../classes/TextStory.html#replace-content-start-end"><tt>textStory.replace(content, start, end)</tt></a>.</p>
1440
+
1441
+
1442
+ <ul class="member-list">
1443
+ <h4>Parameters:</h4>
1444
+
1445
+ <li>
1446
+ <tt>content:</tt>
1447
+ <tt>String</tt>
1448
+ &mdash;&nbsp;the new content
1449
+
1450
+ </li>
1451
+
1452
+ <li>
1453
+ <tt>start:</tt>
1454
+ <tt>Number</tt>
1455
+ &mdash;&nbsp;the index of the first character to replace
1456
+
1457
+ </li>
1458
+
1459
+ <li>
1460
+ <tt>end:</tt>
1461
+ <tt>Number</tt>
1462
+ &mdash;&nbsp;the index after the last character to replace
1463
+
1464
+ </li>
1465
+
1466
+ </ul>
1467
+
1468
+
1469
+
293
1470
 
1471
+
1472
+
1473
+ </div>
1474
+ </div>
294
1475
  </div>
1476
+
1477
+
1478
+ <div id="range-start-end" class="member">
1479
+ <div class="member-link">
1480
+ <a name="range-start-end" href="#range-start-end"><tt><b>range</b>(start, end)</tt></a>
295
1481
  </div>
1482
+ <div class="member-description hidden">
1483
+ <div class="member-text">
1484
+ <p>The range of the item&rsquo;s story from <code>start</code> to <code>end</code>.</p>
1485
+
1486
+
1487
+ <ul class="member-list">
1488
+ <h4>Parameters:</h4>
1489
+
1490
+ <li>
1491
+ <tt>start:</tt>
1492
+ <tt>Number</tt>
1493
+ &mdash;&nbsp;the index of its first character
1494
+
1495
+ </li>
1496
+
1497
+ <li>
1498
+ <tt>end:</tt>
1499
+ <tt>Number</tt>
1500
+ &mdash;&nbsp;the index after its last character
1501
+
1502
+ </li>
1503
+
1504
+ </ul>
1505
+
1506
+
1507
+ <ul class="member-list">
1508
+ <h4>Returns:</h4>
296
1509
 
297
- </div>
1510
+ <li>
1511
+ <tt><a href="../classes/TextRange.html"><tt>TextRange</tt></a></tt>
1512
+ </li>
1513
+
1514
+
1515
+ </ul>
1516
+
298
1517
 
299
1518
 
1519
+
1520
+
1521
+ </div>
1522
+ </div>
1523
+ </div>
300
1524
 
301
1525
 
1526
+
1527
+ </div>
302
1528
 
303
1529
 
304
1530
 
@@ -307,6 +1533,32 @@ function onMouseMove(event) {
307
1533
  <div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
308
1534
 
309
1535
 
1536
+ <div id="key" class="member">
1537
+ <div class="member-link">
1538
+ <a name="key" href="#key"><tt><b>key</b></tt></a>
1539
+ </div>
1540
+ <div class="member-description hidden">
1541
+
1542
+ <div class="member-text">
1543
+ <p>The key of the host&rsquo;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>
1544
+
1545
+
1546
+
1547
+ <ul class="member-list">
1548
+ <h4>Type:</h4>
1549
+ <li>
1550
+ <tt>Number</tt>
1551
+ </li>
1552
+ </ul>
1553
+
1554
+
1555
+
1556
+ </div>
1557
+
1558
+ </div>
1559
+ </div>
1560
+
1561
+
310
1562
  <div id="id" class="member">
311
1563
  <div class="member-link">
312
1564
  <a name="id" href="#id"><tt><b>id</b></tt></a>
@@ -393,7 +1645,7 @@ function onMouseMove(event) {
393
1645
  <div class="button run">Run</div>
394
1646
  </div>
395
1647
 
396
- <script type="text/paperscript" canvas="canvas-2">
1648
+ <script type="text/paperscript" canvas="canvas-0">
397
1649
  var path = new Path.Circle({
398
1650
  center: [80, 50],
399
1651
  radius: 35
@@ -408,7 +1660,7 @@ group.addChild(path);
408
1660
  // The path can be accessed by name:
409
1661
  group.children['example'].fillColor = 'red';
410
1662
  </script>
411
- <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
1663
+ <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
412
1664
  </div>
413
1665
 
414
1666
 
@@ -446,7 +1698,7 @@ group.children['example'].fillColor = 'red';
446
1698
  <div class="button run">Run</div>
447
1699
  </div>
448
1700
 
449
- <script type="text/paperscript" canvas="canvas-3">
1701
+ <script type="text/paperscript" canvas="canvas-1">
450
1702
  var circle = new Path.Circle({
451
1703
  center: [80, 50],
452
1704
  radius: 30
@@ -457,7 +1709,7 @@ circle.style = {
457
1709
  strokeWidth: 5
458
1710
  };
459
1711
  </script>
460
- <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
1712
+ <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
461
1713
  </div>
462
1714
 
463
1715
 
@@ -469,7 +1721,7 @@ circle.style = {
469
1721
  <div class="button run">Run</div>
470
1722
  </div>
471
1723
 
472
- <script type="text/paperscript" canvas="canvas-4">
1724
+ <script type="text/paperscript" canvas="canvas-2">
473
1725
  var path = new Path.Circle({
474
1726
  center: [50, 50],
475
1727
  radius: 30,
@@ -484,7 +1736,7 @@ var path2 = new Path.Circle({
484
1736
  // Copy the path style of path:
485
1737
  path2.style = path.style;
486
1738
  </script>
487
- <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
1739
+ <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
488
1740
  </div>
489
1741
 
490
1742
 
@@ -496,7 +1748,7 @@ path2.style = path.style;
496
1748
  <div class="button run">Run</div>
497
1749
  </div>
498
1750
 
499
- <script type="text/paperscript" canvas="canvas-5">
1751
+ <script type="text/paperscript" canvas="canvas-3">
500
1752
  var myStyle = {
501
1753
  fillColor: 'red',
502
1754
  strokeColor: 'blue',
@@ -515,7 +1767,7 @@ var path2 = new Path.Circle({
515
1767
  });
516
1768
  path2.style = myStyle;
517
1769
  </script>
518
- <div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
1770
+ <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
519
1771
  </div>
520
1772
 
521
1773
 
@@ -557,7 +1809,7 @@ path2.style = myStyle;
557
1809
  <div class="button run">Run</div>
558
1810
  </div>
559
1811
 
560
- <script type="text/paperscript" canvas="canvas-6">
1812
+ <script type="text/paperscript" canvas="canvas-4">
561
1813
  var unlockedItem = new Path.Circle({
562
1814
  center: view.center - [35, 0],
563
1815
  radius: 30,
@@ -584,7 +1836,7 @@ new PointText({
584
1836
  justification: 'center'
585
1837
  });
586
1838
  </script>
587
- <div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
1839
+ <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
588
1840
  </div>
589
1841
 
590
1842
 
@@ -626,7 +1878,7 @@ new PointText({
626
1878
  <div class="button run">Run</div>
627
1879
  </div>
628
1880
 
629
- <script type="text/paperscript" canvas="canvas-7">
1881
+ <script type="text/paperscript" canvas="canvas-5">
630
1882
  var path = new Path.Circle({
631
1883
  center: [50, 50],
632
1884
  radius: 20,
@@ -636,7 +1888,7 @@ var path = new Path.Circle({
636
1888
  // Hide the path:
637
1889
  path.visible = false;
638
1890
  </script>
639
- <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
1891
+ <div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
640
1892
  </div>
641
1893
 
642
1894
 
@@ -653,7 +1905,7 @@ path.visible = false;
653
1905
  <div class="member-description hidden">
654
1906
 
655
1907
  <div class="member-text">
656
- <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. If blend-modes cannot be rendered natively, they are emulated. Be aware that emulation can have an impact on performance.</p>
1908
+ <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&rsquo;t support a CSS blend mode natively, it draws as <code>&#39;normal&#39;</code>. Paper.js&rsquo;s own modes <code>&#39;add&#39;</code>, <code>&#39;subtract&#39;</code>, <code>&#39;average&#39;</code>, <code>&#39;pin-light&#39;</code> and <code>&#39;negation&#39;</code> are emulated, which can have an impact on performance.</p>
657
1909
 
658
1910
 
659
1911
  <ul class="member-list">
@@ -684,7 +1936,7 @@ path.visible = false;
684
1936
  <div class="button run">Run</div>
685
1937
  </div>
686
1938
 
687
- <script type="text/paperscript" canvas="canvas-8">
1939
+ <script type="text/paperscript" canvas="canvas-6">
688
1940
  // Create a white rectangle in the background
689
1941
  // with the same dimensions as the view:
690
1942
  var background = new Path.Rectangle(view.bounds);
@@ -705,7 +1957,7 @@ var circle2 = new Path.Circle({
705
1957
  // Set the blend mode of circle2:
706
1958
  circle2.blendMode = 'multiply';
707
1959
  </script>
708
- <div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
1960
+ <div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
709
1961
  </div>
710
1962
 
711
1963
 
@@ -747,7 +1999,7 @@ circle2.blendMode = 'multiply';
747
1999
  <div class="button run">Run</div>
748
2000
  </div>
749
2001
 
750
- <script type="text/paperscript" canvas="canvas-9">
2002
+ <script type="text/paperscript" canvas="canvas-7">
751
2003
  var circle = new Path.Circle({
752
2004
  center: [80, 50],
753
2005
  radius: 35,
@@ -765,7 +2017,7 @@ var circle2 = new Path.Circle({
765
2017
  // Make circle2 50% transparent:
766
2018
  circle2.opacity = 0.5;
767
2019
  </script>
768
- <div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
2020
+ <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
769
2021
  </div>
770
2022
 
771
2023
 
@@ -806,6 +2058,42 @@ circle2.opacity = 0.5;
806
2058
  </div>
807
2059
 
808
2060
 
2061
+ <div id="textwrap" class="member">
2062
+ <div class="member-link">
2063
+ <a name="textwrap" href="#textwrap"><tt><b>textWrap</b></tt></a>
2064
+ </div>
2065
+ <div class="member-description hidden">
2066
+
2067
+ <div class="member-text">
2068
+ <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>
2069
+
2070
+
2071
+
2072
+ <ul class="member-list">
2073
+ <h4>Default:</h4>
2074
+ <li><tt>null</tt></li>
2075
+ </ul>
2076
+
2077
+ <ul class="member-list">
2078
+ <h4>Type:</h4>
2079
+ <li>
2080
+ <tt>Object</tt>
2081
+ </li>
2082
+ </ul>
2083
+
2084
+
2085
+ <h4>Example:</h4>
2086
+
2087
+
2088
+ <pre><code>var circle = new Path.Circle({ center: [100, 100], radius: 40 });
2089
+ circle.textWrap = { offset: 10 };</code></pre>
2090
+
2091
+ </div>
2092
+
2093
+ </div>
2094
+ </div>
2095
+
2096
+
809
2097
  <div id="selected" class="member">
810
2098
  <div class="member-link">
811
2099
  <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
@@ -852,17 +2140,43 @@ circle2.opacity = 0.5;
852
2140
  <div class="button run">Run</div>
853
2141
  </div>
854
2142
 
855
- <script type="text/paperscript" canvas="canvas-10">
2143
+ <script type="text/paperscript" canvas="canvas-8">
856
2144
  var path = new Path.Circle({
857
2145
  center: [80, 50],
858
2146
  radius: 35
859
2147
  });
860
2148
  path.selected = true; // Select the path
861
2149
  </script>
862
- <div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
2150
+ <div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
2151
+ </div>
2152
+
2153
+
2154
+ </div>
2155
+
2156
+ </div>
863
2157
  </div>
864
2158
 
2159
+
2160
+ <div id="fullyselected" class="member">
2161
+ <div class="member-link">
2162
+ <a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
2163
+ </div>
2164
+ <div class="member-description hidden">
865
2165
 
2166
+ <div class="member-text">
2167
+ <p>Specifies whether the item and all its descendants are selected. Setting it selects or deselects them all.</p>
2168
+
2169
+
2170
+
2171
+ <ul class="member-list">
2172
+ <h4>Type:</h4>
2173
+ <li>
2174
+ <tt>Boolean</tt>
2175
+ </li>
2176
+ </ul>
2177
+
2178
+
2179
+
866
2180
  </div>
867
2181
 
868
2182
  </div>
@@ -990,7 +2304,7 @@ console.log(path.data.pets.length); // 1</code></pre>
990
2304
  <div class="button run">Run</div>
991
2305
  </div>
992
2306
 
993
- <script type="text/paperscript" canvas="canvas-11">
2307
+ <script type="text/paperscript" canvas="canvas-9">
994
2308
  // Create a circle at position { x: 10, y: 10 }
995
2309
  var circle = new Path.Circle({
996
2310
  center: new Point(10, 10),
@@ -1004,7 +2318,7 @@ circle.position = new Point(20, 20);
1004
2318
  // Move the circle 100 points to the right and 50 points down
1005
2319
  circle.position += new Point(100, 50);
1006
2320
  </script>
1007
- <div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
2321
+ <div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
1008
2322
  </div>
1009
2323
 
1010
2324
 
@@ -1016,7 +2330,7 @@ circle.position += new Point(100, 50);
1016
2330
  <div class="button run">Run</div>
1017
2331
  </div>
1018
2332
 
1019
- <script type="text/paperscript" canvas="canvas-12">
2333
+ <script type="text/paperscript" canvas="canvas-10">
1020
2334
  // Create a circle at position { x: 20, y: 20 }
1021
2335
  var circle = new Path.Circle({
1022
2336
  center: new Point(20, 20),
@@ -1027,7 +2341,7 @@ var circle = new Path.Circle({
1027
2341
  // Move the circle 100 points to the right
1028
2342
  circle.position.x += 100;
1029
2343
  </script>
1030
- <div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
2344
+ <div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
1031
2345
  </div>
1032
2346
 
1033
2347
 
@@ -1102,6 +2416,7 @@ circle.position.x += 100;
1102
2416
 
1103
2417
  <div class="member-text">
1104
2418
  <p>The bounding rectangle of the item including stroke width.</p>
2419
+ <p>Setting it fits the item&rsquo;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&rsquo;s proportions, as with miters. A rectangle smaller than the stroke itself shrinks the bounds to its center.</p>
1105
2420
 
1106
2421
 
1107
2422
 
@@ -1390,6 +2705,34 @@ circle.position.x += 100;
1390
2705
 
1391
2706
 
1392
2707
 
2708
+ </div>
2709
+
2710
+ </div>
2711
+ </div>
2712
+
2713
+
2714
+ <div id="scope" class="member">
2715
+ <div class="member-link">
2716
+ <a name="scope" href="#scope"><tt><b>scope</b></tt></a>
2717
+ </div>
2718
+ <div class="member-description hidden">
2719
+
2720
+ <div class="member-text">
2721
+ <p>The scope that this item belongs to, through its project.</p>
2722
+
2723
+ <p>Read only.</p>
2724
+
2725
+
2726
+
2727
+ <ul class="member-list">
2728
+ <h4>Type:</h4>
2729
+ <li>
2730
+ <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
2731
+ </li>
2732
+ </ul>
2733
+
2734
+
2735
+
1393
2736
  </div>
1394
2737
 
1395
2738
  </div>
@@ -1524,7 +2867,7 @@ console.log(group.children[0] == path); // true</code></pre>
1524
2867
  <div class="button run">Run</div>
1525
2868
  </div>
1526
2869
 
1527
- <script type="text/paperscript" canvas="canvas-13">
2870
+ <script type="text/paperscript" canvas="canvas-11">
1528
2871
  var path = new Path.Circle({
1529
2872
  center: [80, 50],
1530
2873
  radius: 35
@@ -1537,7 +2880,7 @@ group.addChild(path);
1537
2880
  // Access the path through the group's children array:
1538
2881
  group.children[0].fillColor = 'red';
1539
2882
  </script>
1540
- <div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
2883
+ <div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
1541
2884
  </div>
1542
2885
 
1543
2886
 
@@ -1549,7 +2892,7 @@ group.children[0].fillColor = 'red';
1549
2892
  <div class="button run">Run</div>
1550
2893
  </div>
1551
2894
 
1552
- <script type="text/paperscript" canvas="canvas-14">
2895
+ <script type="text/paperscript" canvas="canvas-12">
1553
2896
  var path = new Path.Circle({
1554
2897
  center: [80, 50],
1555
2898
  radius: 35
@@ -1564,7 +2907,7 @@ group.addChild(path);
1564
2907
  // The path can be accessed by name:
1565
2908
  group.children['example'].fillColor = 'orange';
1566
2909
  </script>
1567
- <div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
2910
+ <div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
1568
2911
  </div>
1569
2912
 
1570
2913
 
@@ -1576,7 +2919,7 @@ group.children['example'].fillColor = 'orange';
1576
2919
  <div class="button run">Run</div>
1577
2920
  </div>
1578
2921
 
1579
- <script type="text/paperscript" canvas="canvas-15">
2922
+ <script type="text/paperscript" canvas="canvas-13">
1580
2923
  var path = new Path.Circle({
1581
2924
  center: [80, 50],
1582
2925
  radius: 35
@@ -1588,7 +2931,7 @@ group.children = [path];
1588
2931
  // The path is the first child of the group:
1589
2932
  group.firstChild.fillColor = 'green';
1590
2933
  </script>
1591
- <div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
2934
+ <div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
1592
2935
  </div>
1593
2936
 
1594
2937
 
@@ -1765,7 +3108,7 @@ group.firstChild.fillColor = 'green';
1765
3108
  <div class="button run">Run</div>
1766
3109
  </div>
1767
3110
 
1768
- <script type="text/paperscript" canvas="canvas-16">
3111
+ <script type="text/paperscript" canvas="canvas-14">
1769
3112
  // Create a circle shaped path at { x: 80, y: 50 }
1770
3113
  // with a radius of 35:
1771
3114
  var circle = new Path.Circle({
@@ -1776,7 +3119,7 @@ var circle = new Path.Circle({
1776
3119
  // Set its stroke color to RGB red:
1777
3120
  circle.strokeColor = new Color(1, 0, 0);
1778
3121
  </script>
1779
- <div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
3122
+ <div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
1780
3123
  </div>
1781
3124
 
1782
3125
 
@@ -1813,7 +3156,7 @@ circle.strokeColor = new Color(1, 0, 0);
1813
3156
  <div class="button run">Run</div>
1814
3157
  </div>
1815
3158
 
1816
- <script type="text/paperscript" canvas="canvas-17">
3159
+ <script type="text/paperscript" canvas="canvas-15">
1817
3160
  // Create a circle shaped path at { x: 80, y: 50 }
1818
3161
  // with a radius of 35:
1819
3162
  var circle = new Path.Circle({
@@ -1825,7 +3168,7 @@ var circle = new Path.Circle({
1825
3168
  // Set its stroke width to 10:
1826
3169
  circle.strokeWidth = 10;
1827
3170
  </script>
1828
- <div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
3171
+ <div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
1829
3172
  </div>
1830
3173
 
1831
3174
 
@@ -1872,7 +3215,7 @@ circle.strokeWidth = 10;
1872
3215
  <div class="button run">Run</div>
1873
3216
  </div>
1874
3217
 
1875
- <script type="text/paperscript" canvas="canvas-18">
3218
+ <script type="text/paperscript" canvas="canvas-16">
1876
3219
  var line = new Path({
1877
3220
  segments: [[80, 50], [420, 50]],
1878
3221
  strokeColor: 'black',
@@ -1893,7 +3236,7 @@ var line2 = line.clone();
1893
3236
  line2.position.y += 100;
1894
3237
  line2.strokeCap = 'butt';
1895
3238
  </script>
1896
- <div class="canvas"><canvas width="516" height="200" id="canvas-18"></canvas></div>
3239
+ <div class="canvas"><canvas width="516" height="200" id="canvas-16"></canvas></div>
1897
3240
  </div>
1898
3241
 
1899
3242
 
@@ -1940,7 +3283,7 @@ line2.strokeCap = 'butt';
1940
3283
  <div class="button run">Run</div>
1941
3284
  </div>
1942
3285
 
1943
- <script type="text/paperscript" canvas="canvas-19">
3286
+ <script type="text/paperscript" canvas="canvas-17">
1944
3287
  var path = new Path({
1945
3288
  segments: [[80, 100], [120, 40], [160, 100]],
1946
3289
  strokeColor: 'black',
@@ -1957,7 +3300,7 @@ var path3 = path2.clone();
1957
3300
  path3.position.x += path3.bounds.width * 1.5;
1958
3301
  path3.strokeJoin = 'bevel';
1959
3302
  </script>
1960
- <div class="canvas"><canvas width="516" height="120" id="canvas-19"></canvas></div>
3303
+ <div class="canvas"><canvas width="516" height="120" id="canvas-17"></canvas></div>
1961
3304
  </div>
1962
3305
 
1963
3306
 
@@ -2005,7 +3348,7 @@ path3.strokeJoin = 'bevel';
2005
3348
  <div class="member-description hidden">
2006
3349
 
2007
3350
  <div class="member-text">
2008
- <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>
3351
+ <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>
2009
3352
 
2010
3353
 
2011
3354
 
@@ -2061,7 +3404,7 @@ path3.strokeJoin = 'bevel';
2061
3404
  <div class="button run">Run</div>
2062
3405
  </div>
2063
3406
 
2064
- <script type="text/paperscript" canvas="canvas-20">
3407
+ <script type="text/paperscript" canvas="canvas-18">
2065
3408
  var path = new Path.Circle({
2066
3409
  center: [80, 50],
2067
3410
  radius: 40,
@@ -2072,7 +3415,7 @@ var path = new Path.Circle({
2072
3415
  // Set the dashed stroke to [10pt dash, 4pt gap]:
2073
3416
  path.dashArray = [10, 4];
2074
3417
  </script>
2075
- <div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
3418
+ <div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
2076
3419
  </div>
2077
3420
 
2078
3421
 
@@ -2142,7 +3485,7 @@ path.dashArray = [10, 4];
2142
3485
  <div class="button run">Run</div>
2143
3486
  </div>
2144
3487
 
2145
- <script type="text/paperscript" canvas="canvas-21">
3488
+ <script type="text/paperscript" canvas="canvas-19">
2146
3489
  // Create a circle shaped path at { x: 80, y: 50 }
2147
3490
  // with a radius of 35:
2148
3491
  var circle = new Path.Circle({
@@ -2153,7 +3496,7 @@ var circle = new Path.Circle({
2153
3496
  // Set the fill color of the circle to RGB red:
2154
3497
  circle.fillColor = new Color(1, 0, 0);
2155
3498
  </script>
2156
- <div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
3499
+ <div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
2157
3500
  </div>
2158
3501
 
2159
3502
 
@@ -2228,7 +3571,7 @@ circle.fillColor = new Color(1, 0, 0);
2228
3571
  <div class="button run">Run</div>
2229
3572
  </div>
2230
3573
 
2231
- <script type="text/paperscript" canvas="canvas-22">
3574
+ <script type="text/paperscript" canvas="canvas-20">
2232
3575
  var circle = new Path.Circle({
2233
3576
  center: [80, 50],
2234
3577
  radius: 35,
@@ -2241,7 +3584,7 @@ var circle = new Path.Circle({
2241
3584
  shadowOffset: new Point(5, 5)
2242
3585
  });
2243
3586
  </script>
2244
- <div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
3587
+ <div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
2245
3588
  </div>
2246
3589
 
2247
3590
 
@@ -2382,7 +3725,7 @@ var circle = new Path.Circle({
2382
3725
  <div class="button run">Run</div>
2383
3726
  </div>
2384
3727
 
2385
- <script type="text/paperscript" canvas="canvas-23">
3728
+ <script type="text/paperscript" canvas="canvas-21">
2386
3729
  // Create a rectangle shaped path with its top left point at:
2387
3730
  // {x: 50, y: 25} and a size of {width: 50, height: 50}
2388
3731
  var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
@@ -2393,7 +3736,7 @@ path.onFrame = function(event) {
2393
3736
  this.rotate(3);
2394
3737
  }
2395
3738
  </script>
2396
- <div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
3739
+ <div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
2397
3740
  </div>
2398
3741
 
2399
3742
 
@@ -2437,7 +3780,7 @@ path.onFrame = function(event) {
2437
3780
  <div class="button run">Run</div>
2438
3781
  </div>
2439
3782
 
2440
- <script type="text/paperscript" canvas="canvas-24">
3783
+ <script type="text/paperscript" canvas="canvas-22">
2441
3784
  // Create a circle shaped path at the center of the view:
2442
3785
  var path = new Path.Circle({
2443
3786
  center: view.center,
@@ -2451,7 +3794,7 @@ path.onMouseDown = function(event) {
2451
3794
  this.fillColor = 'red';
2452
3795
  }
2453
3796
  </script>
2454
- <div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
3797
+ <div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
2455
3798
  </div>
2456
3799
 
2457
3800
 
@@ -2463,7 +3806,7 @@ path.onMouseDown = function(event) {
2463
3806
  <div class="button run">Run</div>
2464
3807
  </div>
2465
3808
 
2466
- <script type="text/paperscript" canvas="canvas-25">
3809
+ <script type="text/paperscript" canvas="canvas-23">
2467
3810
  // Loop 30 times:
2468
3811
  for (var i = 0; i < 30; i++) {
2469
3812
  // Create a circle shaped path at a random position
@@ -2481,7 +3824,7 @@ for (var i = 0; i < 30; i++) {
2481
3824
  }
2482
3825
  }
2483
3826
  </script>
2484
- <div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
3827
+ <div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
2485
3828
  </div>
2486
3829
 
2487
3830
 
@@ -2525,7 +3868,7 @@ for (var i = 0; i < 30; i++) {
2525
3868
  <div class="button run">Run</div>
2526
3869
  </div>
2527
3870
 
2528
- <script type="text/paperscript" canvas="canvas-26">
3871
+ <script type="text/paperscript" canvas="canvas-24">
2529
3872
  // Create a circle shaped path at the center of the view:
2530
3873
  var path = new Path.Circle({
2531
3874
  center: view.center,
@@ -2538,7 +3881,7 @@ path.onMouseDrag = function(event) {
2538
3881
  path.position += event.delta;
2539
3882
  }
2540
3883
  </script>
2541
- <div class="canvas"><canvas width="516" height="240" id="canvas-26"></canvas></div>
3884
+ <div class="canvas"><canvas width="516" height="240" id="canvas-24"></canvas></div>
2542
3885
  </div>
2543
3886
 
2544
3887
 
@@ -2582,7 +3925,7 @@ path.onMouseDrag = function(event) {
2582
3925
  <div class="button run">Run</div>
2583
3926
  </div>
2584
3927
 
2585
- <script type="text/paperscript" canvas="canvas-27">
3928
+ <script type="text/paperscript" canvas="canvas-25">
2586
3929
  // Create a circle shaped path at the center of the view:
2587
3930
  var path = new Path.Circle({
2588
3931
  center: view.center,
@@ -2596,7 +3939,7 @@ path.onMouseUp = function(event) {
2596
3939
  this.fillColor = 'red';
2597
3940
  }
2598
3941
  </script>
2599
- <div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
3942
+ <div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
2600
3943
  </div>
2601
3944
 
2602
3945
 
@@ -2640,7 +3983,7 @@ path.onMouseUp = function(event) {
2640
3983
  <div class="button run">Run</div>
2641
3984
  </div>
2642
3985
 
2643
- <script type="text/paperscript" canvas="canvas-28">
3986
+ <script type="text/paperscript" canvas="canvas-26">
2644
3987
  // Create a circle shaped path at the center of the view:
2645
3988
  var path = new Path.Circle({
2646
3989
  center: view.center,
@@ -2654,7 +3997,7 @@ path.onClick = function(event) {
2654
3997
  this.fillColor = 'red';
2655
3998
  }
2656
3999
  </script>
2657
- <div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
4000
+ <div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
2658
4001
  </div>
2659
4002
 
2660
4003
 
@@ -2666,7 +4009,7 @@ path.onClick = function(event) {
2666
4009
  <div class="button run">Run</div>
2667
4010
  </div>
2668
4011
 
2669
- <script type="text/paperscript" canvas="canvas-29">
4012
+ <script type="text/paperscript" canvas="canvas-27">
2670
4013
  // Loop 30 times:
2671
4014
  for (var i = 0; i < 30; i++) {
2672
4015
  // Create a circle shaped path at a random position
@@ -2684,7 +4027,7 @@ for (var i = 0; i < 30; i++) {
2684
4027
  }
2685
4028
  }
2686
4029
  </script>
2687
- <div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
4030
+ <div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
2688
4031
  </div>
2689
4032
 
2690
4033
 
@@ -2728,7 +4071,7 @@ for (var i = 0; i < 30; i++) {
2728
4071
  <div class="button run">Run</div>
2729
4072
  </div>
2730
4073
 
2731
- <script type="text/paperscript" canvas="canvas-30">
4074
+ <script type="text/paperscript" canvas="canvas-28">
2732
4075
  // Create a circle shaped path at the center of the view:
2733
4076
  var path = new Path.Circle({
2734
4077
  center: view.center,
@@ -2742,7 +4085,7 @@ path.onDoubleClick = function(event) {
2742
4085
  this.fillColor = 'red';
2743
4086
  }
2744
4087
  </script>
2745
- <div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
4088
+ <div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
2746
4089
  </div>
2747
4090
 
2748
4091
 
@@ -2754,7 +4097,7 @@ path.onDoubleClick = function(event) {
2754
4097
  <div class="button run">Run</div>
2755
4098
  </div>
2756
4099
 
2757
- <script type="text/paperscript" canvas="canvas-31">
4100
+ <script type="text/paperscript" canvas="canvas-29">
2758
4101
  // Loop 30 times:
2759
4102
  for (var i = 0; i < 30; i++) {
2760
4103
  // Create a circle shaped path at a random position
@@ -2772,7 +4115,7 @@ for (var i = 0; i < 30; i++) {
2772
4115
  }
2773
4116
  }
2774
4117
  </script>
2775
- <div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
4118
+ <div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
2776
4119
  </div>
2777
4120
 
2778
4121
 
@@ -2816,7 +4159,7 @@ for (var i = 0; i < 30; i++) {
2816
4159
  <div class="button run">Run</div>
2817
4160
  </div>
2818
4161
 
2819
- <script type="text/paperscript" canvas="canvas-32">
4162
+ <script type="text/paperscript" canvas="canvas-30">
2820
4163
  // Create a circle shaped path at the center of the view:
2821
4164
  var path = new Path.Circle({
2822
4165
  center: view.center,
@@ -2830,7 +4173,7 @@ path.onMouseMove = function(event) {
2830
4173
  this.opacity = Math.random();
2831
4174
  }
2832
4175
  </script>
2833
- <div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
4176
+ <div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
2834
4177
  </div>
2835
4178
 
2836
4179
 
@@ -2874,7 +4217,7 @@ path.onMouseMove = function(event) {
2874
4217
  <div class="button run">Run</div>
2875
4218
  </div>
2876
4219
 
2877
- <script type="text/paperscript" canvas="canvas-33">
4220
+ <script type="text/paperscript" canvas="canvas-31">
2878
4221
  // Create a circle shaped path at the center of the view:
2879
4222
  var path = new Path.Circle({
2880
4223
  center: view.center,
@@ -2892,7 +4235,7 @@ path.onMouseLeave = function(event) {
2892
4235
  this.fillColor = 'black';
2893
4236
  }
2894
4237
  </script>
2895
- <div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
4238
+ <div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
2896
4239
  </div>
2897
4240
 
2898
4241
 
@@ -2904,7 +4247,7 @@ path.onMouseLeave = function(event) {
2904
4247
  <div class="button run">Run</div>
2905
4248
  </div>
2906
4249
 
2907
- <script type="text/paperscript" canvas="canvas-34">
4250
+ <script type="text/paperscript" canvas="canvas-32">
2908
4251
  function enter(event) {
2909
4252
  this.fillColor = 'red';
2910
4253
  }
@@ -2926,7 +4269,7 @@ function onMouseDown(event) {
2926
4269
  path.onMouseLeave = leave;
2927
4270
  }
2928
4271
  </script>
2929
- <div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
4272
+ <div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
2930
4273
  </div>
2931
4274
 
2932
4275
 
@@ -2970,7 +4313,7 @@ function onMouseDown(event) {
2970
4313
  <div class="button run">Run</div>
2971
4314
  </div>
2972
4315
 
2973
- <script type="text/paperscript" canvas="canvas-35">
4316
+ <script type="text/paperscript" canvas="canvas-33">
2974
4317
  // Create a circle shaped path at the center of the view:
2975
4318
  var path = new Path.Circle({
2976
4319
  center: view.center,
@@ -2983,7 +4326,7 @@ path.onMouseLeave = function(event) {
2983
4326
  this.fillColor = 'red';
2984
4327
  }
2985
4328
  </script>
2986
- <div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
4329
+ <div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
2987
4330
  </div>
2988
4331
 
2989
4332
 
@@ -3042,7 +4385,7 @@ path.onMouseLeave = function(event) {
3042
4385
  <div class="button run">Run</div>
3043
4386
  </div>
3044
4387
 
3045
- <script type="text/paperscript" canvas="canvas-36">
4388
+ <script type="text/paperscript" canvas="canvas-34">
3046
4389
  var circle = new Path.Circle({
3047
4390
  center: [80, 50],
3048
4391
  radius: 35
@@ -3055,7 +4398,7 @@ circle.set({
3055
4398
  selected: true
3056
4399
  });
3057
4400
  </script>
3058
- <div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
4401
+ <div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
3059
4402
  </div>
3060
4403
 
3061
4404
 
@@ -3111,7 +4454,7 @@ circle.set({
3111
4454
  <div class="button run">Run</div>
3112
4455
  </div>
3113
4456
 
3114
- <script type="text/paperscript" canvas="canvas-37">
4457
+ <script type="text/paperscript" canvas="canvas-35">
3115
4458
  var circle = new Path.Circle({
3116
4459
  center: [50, 50],
3117
4460
  radius: 10,
@@ -3126,7 +4469,7 @@ for (var i = 0; i < 20; i++) {
3126
4469
  copy.position.x += i * copy.bounds.width;
3127
4470
  }
3128
4471
  </script>
3129
- <div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
4472
+ <div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
3130
4473
  </div>
3131
4474
 
3132
4475
 
@@ -3213,9 +4556,9 @@ for (var i = 0; i < 20; i++) {
3213
4556
  <p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
3214
4557
  <ul class="member-list">
3215
4558
  <h4>Options:</h4>
3216
- <li><tt>resolution: <tt>Number</tt></tt> &mdash; 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. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
3217
- <li><tt>raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; 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. &mdash;&nbsp;default: <tt>null</tt></li>
3218
- <li><tt>insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
4559
+ <li><tt>options.resolution: <tt>Number</tt></tt> &mdash; 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. &mdash;&nbsp;default: <tt>view.resolution</tt></li>
4560
+ <li><tt>options.raster: <a href="../classes/Raster.html"><tt>Raster</tt></a></tt> &mdash; 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. &mdash;&nbsp;default: <tt>null</tt></li>
4561
+ <li><tt>options.insert: <tt>Boolean</tt></tt> &mdash; specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the rasterized item. &mdash;&nbsp;default: <tt>true</tt></li>
3219
4562
  </ul>
3220
4563
 
3221
4564
  <ul class="member-list">
@@ -3252,7 +4595,7 @@ for (var i = 0; i < 20; i++) {
3252
4595
  <div class="button run">Run</div>
3253
4596
  </div>
3254
4597
 
3255
- <script type="text/paperscript" canvas="canvas-38">
4598
+ <script type="text/paperscript" canvas="canvas-36">
3256
4599
  var circle = new Path.Circle({
3257
4600
  center: [50, 50],
3258
4601
  radius: 5,
@@ -3269,7 +4612,7 @@ raster.position.x += 100;
3269
4612
  circle.scale(5);
3270
4613
  raster.scale(5);
3271
4614
  </script>
3272
- <div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
4615
+ <div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
3273
4616
  </div>
3274
4617
 
3275
4618
 
@@ -3323,7 +4666,7 @@ raster.scale(5);
3323
4666
  <div class="button run">Run</div>
3324
4667
  </div>
3325
4668
 
3326
- <script type="text/paperscript" canvas="canvas-39">
4669
+ <script type="text/paperscript" canvas="canvas-37">
3327
4670
  var path = new Path.Star({
3328
4671
  center: [50, 50],
3329
4672
  points: 12,
@@ -3344,7 +4687,7 @@ function onMouseDown(event) {
3344
4687
  }
3345
4688
  }
3346
4689
  </script>
3347
- <div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
4690
+ <div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
3348
4691
  </div>
3349
4692
 
3350
4693
 
@@ -3400,7 +4743,7 @@ function onMouseDown(event) {
3400
4743
  </div>
3401
4744
  <div class="member-description hidden">
3402
4745
  <div class="member-text">
3403
-
4746
+ <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>
3404
4747
 
3405
4748
 
3406
4749
  <ul class="member-list">
@@ -3420,7 +4763,7 @@ function onMouseDown(event) {
3420
4763
  <h4>Returns:</h4>
3421
4764
 
3422
4765
  <li>
3423
- <tt><tt>Boolean</tt></tt>
4766
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items overlap, <tt>false</tt> otherwise
3424
4767
  </li>
3425
4768
 
3426
4769
 
@@ -3916,6 +5259,7 @@ function onMouseDown(event) {
3916
5259
  <div class="member-text">
3917
5260
  <p>Converts the provided SVG content into Paper.js items and adds them to the this item&rsquo;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>
3918
5261
  <p><code>&lt;symbol&gt;</code> elements are imported as <a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a> items, and the <code>&lt;use&gt;</code> elements that place them as <a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a> items. The styles that <code>&lt;use&gt;</code> elements inherit don&rsquo;t reach the symbols&rsquo; content.</p>
5262
+ <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>
3919
5263
  <ul class="member-list">
3920
5264
  <h4>Options:</h4>
3921
5265
  <li><tt>options.expandShapes: <tt>Boolean</tt></tt> &mdash; whether imported shape items should be expanded to path items &mdash;&nbsp;default: <tt>false</tt></li>
@@ -4469,11 +5813,11 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4469
5813
 
4470
5814
  <div id="replacewith-item" class="member">
4471
5815
  <div class="member-link">
4472
- <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
5816
+ <a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(...item)</tt></a>
4473
5817
  </div>
4474
5818
  <div class="member-description hidden">
4475
5819
  <div class="member-text">
4476
- <p>Replaces this item with the provided new item which will takes its place in the project hierarchy instead.</p>
5820
+ <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>
4477
5821
 
4478
5822
 
4479
5823
  <ul class="member-list">
@@ -4482,7 +5826,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4482
5826
  <li>
4483
5827
  <tt>item:</tt>
4484
5828
  <a href="../classes/Item.html"><tt>Item</tt></a>
4485
- &mdash;&nbsp;the item that will replace this item
5829
+ &mdash;&nbsp;the items that will replace this item
4486
5830
 
4487
5831
  </li>
4488
5832
 
@@ -4655,7 +5999,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4655
5999
  </div>
4656
6000
  <div class="member-description hidden">
4657
6001
  <div class="member-text">
4658
- <p>Checks whether the item has a fill.</p>
6002
+ <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>
4659
6003
 
4660
6004
 
4661
6005
 
@@ -4663,7 +6007,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
4663
6007
  <h4>Returns:</h4>
4664
6008
 
4665
6009
  <li>
4666
- <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
6010
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has a visible fill, <tt>false</tt> otherwise
4667
6011
  </li>
4668
6012
 
4669
6013
 
@@ -5205,7 +6549,7 @@ Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
5205
6549
  <div class="button run">Run</div>
5206
6550
  </div>
5207
6551
 
5208
- <script type="text/paperscript" canvas="canvas-40">
6552
+ <script type="text/paperscript" canvas="canvas-38">
5209
6553
  // Create a rectangle shaped path with its top left
5210
6554
  // point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
5211
6555
  var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
@@ -5214,7 +6558,7 @@ path.fillColor = 'black';
5214
6558
  // Rotate the path by 30 degrees:
5215
6559
  path.rotate(30);
5216
6560
  </script>
5217
- <div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
6561
+ <div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
5218
6562
  </div>
5219
6563
 
5220
6564
 
@@ -5226,7 +6570,7 @@ path.rotate(30);
5226
6570
  <div class="button run">Run</div>
5227
6571
  </div>
5228
6572
 
5229
- <script type="text/paperscript" canvas="canvas-41">
6573
+ <script type="text/paperscript" canvas="canvas-39">
5230
6574
  // Create a rectangle shaped path with its top left
5231
6575
  // point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
5232
6576
  var topLeft = new Point(175, 50);
@@ -5248,7 +6592,7 @@ function onFrame(event) {
5248
6592
  path.rotate(3, view.center);
5249
6593
  }
5250
6594
  </script>
5251
- <div class="canvas"><canvas width="516" height="200" id="canvas-41"></canvas></div>
6595
+ <div class="canvas"><canvas width="516" height="200" id="canvas-39"></canvas></div>
5252
6596
  </div>
5253
6597
 
5254
6598
 
@@ -5297,7 +6641,7 @@ function onFrame(event) {
5297
6641
  <div class="button run">Run</div>
5298
6642
  </div>
5299
6643
 
5300
- <script type="text/paperscript" canvas="canvas-42">
6644
+ <script type="text/paperscript" canvas="canvas-40">
5301
6645
  // Create a circle shaped path at { x: 80, y: 50 }
5302
6646
  // with a radius of 20:
5303
6647
  var circle = new Path.Circle({
@@ -5309,7 +6653,7 @@ var circle = new Path.Circle({
5309
6653
  // Scale the path by 150% from its center point
5310
6654
  circle.scale(1.5);
5311
6655
  </script>
5312
- <div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
6656
+ <div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
5313
6657
  </div>
5314
6658
 
5315
6659
 
@@ -5321,7 +6665,7 @@ circle.scale(1.5);
5321
6665
  <div class="button run">Run</div>
5322
6666
  </div>
5323
6667
 
5324
- <script type="text/paperscript" canvas="canvas-43">
6668
+ <script type="text/paperscript" canvas="canvas-41">
5325
6669
  // Create a circle shaped path at { x: 80, y: 50 }
5326
6670
  // with a radius of 20:
5327
6671
  var circle = new Path.Circle({
@@ -5333,7 +6677,7 @@ var circle = new Path.Circle({
5333
6677
  // Scale the path 150% from its bottom left corner
5334
6678
  circle.scale(1.5, circle.bounds.bottomLeft);
5335
6679
  </script>
5336
- <div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
6680
+ <div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
5337
6681
  </div>
5338
6682
 
5339
6683
 
@@ -5389,7 +6733,7 @@ circle.scale(1.5, circle.bounds.bottomLeft);
5389
6733
  <div class="button run">Run</div>
5390
6734
  </div>
5391
6735
 
5392
- <script type="text/paperscript" canvas="canvas-44">
6736
+ <script type="text/paperscript" canvas="canvas-42">
5393
6737
  // Create a circle shaped path at { x: 100, y: 50 }
5394
6738
  // with a radius of 20:
5395
6739
  var circle = new Path.Circle({
@@ -5401,7 +6745,7 @@ var circle = new Path.Circle({
5401
6745
  // Scale the path horizontally by 300%
5402
6746
  circle.scale(3, 1);
5403
6747
  </script>
5404
- <div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
6748
+ <div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
5405
6749
  </div>
5406
6750
 
5407
6751
 
@@ -5839,7 +7183,7 @@ circle.scale(3, 1);
5839
7183
  <div class="button run">Run</div>
5840
7184
  </div>
5841
7185
 
5842
- <script type="text/paperscript" canvas="canvas-45">
7186
+ <script type="text/paperscript" canvas="canvas-43">
5843
7187
  // Create a rectangle shaped path with its top left corner
5844
7188
  // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
5845
7189
  var path = new Path.Rectangle({
@@ -5860,7 +7204,7 @@ var circlePath = new Path.Circle({
5860
7204
  // the rectangular path:
5861
7205
  circlePath.fitBounds(path.bounds);
5862
7206
  </script>
5863
- <div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
7207
+ <div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
5864
7208
  </div>
5865
7209
 
5866
7210
 
@@ -5872,7 +7216,7 @@ circlePath.fitBounds(path.bounds);
5872
7216
  <div class="button run">Run</div>
5873
7217
  </div>
5874
7218
 
5875
- <script type="text/paperscript" canvas="canvas-46">
7219
+ <script type="text/paperscript" canvas="canvas-44">
5876
7220
  // Create a rectangle shaped path with its top left corner
5877
7221
  // at {x: 80, y: 25} and a size of {width: 75, height: 50}:
5878
7222
  var path = new Path.Rectangle({
@@ -5893,7 +7237,7 @@ var circlePath = new Path.Circle({
5893
7237
  // the rectangular path:
5894
7238
  circlePath.fitBounds(path.bounds, 'cover');
5895
7239
  </script>
5896
- <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
7240
+ <div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
5897
7241
  </div>
5898
7242
 
5899
7243
 
@@ -5905,7 +7249,7 @@ circlePath.fitBounds(path.bounds, 'cover');
5905
7249
  <div class="button run">Run</div>
5906
7250
  </div>
5907
7251
 
5908
- <script type="text/paperscript" canvas="canvas-47">
7252
+ <script type="text/paperscript" canvas="canvas-45">
5909
7253
  var path = new Path.Circle({
5910
7254
  center: [80, 50],
5911
7255
  radius: 30,
@@ -5915,7 +7259,7 @@ var path = new Path.Circle({
5915
7259
  // Fit the path to the bounding rectangle of the view:
5916
7260
  path.fitBounds(view.bounds);
5917
7261
  </script>
5918
- <div class="canvas"><canvas width="516" height="200" id="canvas-47"></canvas></div>
7262
+ <div class="canvas"><canvas width="516" height="200" id="canvas-45"></canvas></div>
5919
7263
  </div>
5920
7264
 
5921
7265
 
@@ -5976,7 +7320,7 @@ path.fitBounds(view.bounds);
5976
7320
  <div class="button run">Run</div>
5977
7321
  </div>
5978
7322
 
5979
- <script type="text/paperscript" canvas="canvas-48">
7323
+ <script type="text/paperscript" canvas="canvas-46">
5980
7324
  // Create a circle shaped path at the center of the view:
5981
7325
  var path = new Path.Circle({
5982
7326
  center: view.center,
@@ -5994,7 +7338,7 @@ path.on('mouseleave', function() {
5994
7338
  this.fillColor = 'black';
5995
7339
  });
5996
7340
  </script>
5997
- <div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
7341
+ <div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
5998
7342
  </div>
5999
7343
 
6000
7344
 
@@ -6046,7 +7390,7 @@ path.on('mouseleave', function() {
6046
7390
  <div class="button run">Run</div>
6047
7391
  </div>
6048
7392
 
6049
- <script type="text/paperscript" canvas="canvas-49">
7393
+ <script type="text/paperscript" canvas="canvas-47">
6050
7394
  // Create a circle shaped path at the center of the view:
6051
7395
  var path = new Path.Circle({
6052
7396
  center: view.center,
@@ -6064,7 +7408,7 @@ path.on({
6064
7408
  }
6065
7409
  });
6066
7410
  </script>
6067
- <div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
7411
+ <div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
6068
7412
  </div>
6069
7413
 
6070
7414
 
@@ -6076,7 +7420,7 @@ path.on({
6076
7420
  <div class="button run">Run</div>
6077
7421
  </div>
6078
7422
 
6079
- <script type="text/paperscript" canvas="canvas-50">
7423
+ <script type="text/paperscript" canvas="canvas-48">
6080
7424
  var pathHandlers = {
6081
7425
  mouseenter: function(event) {
6082
7426
  this.fillColor = 'red';
@@ -6099,7 +7443,7 @@ function onMouseDown(event) {
6099
7443
  path.on(pathHandlers);
6100
7444
  }
6101
7445
  </script>
6102
- <div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
7446
+ <div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
6103
7447
  </div>
6104
7448
 
6105
7449
 
@@ -6297,10 +7641,10 @@ function onMouseDown(event) {
6297
7641
  <p>Removes the item when the events specified in the passed options object occur.</p>
6298
7642
  <ul class="member-list">
6299
7643
  <h4>Options:</h4>
6300
- <li><tt>options.move: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
6301
- <li><tt>options.drag: undefined</tt> &mdash; {Boolena) remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
6302
- <li><tt>options.down: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
6303
- <li><tt>options.up: undefined</tt> &mdash; {Boolean) remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
7644
+ <li><tt>options.move: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
7645
+ <li><tt>options.drag: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
7646
+ <li><tt>options.down: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
7647
+ <li><tt>options.up: <tt>Boolean</tt></tt> &mdash; remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
6304
7648
  </ul>
6305
7649
 
6306
7650
  <ul class="member-list">
@@ -6327,7 +7671,7 @@ function onMouseDown(event) {
6327
7671
  <div class="button run">Run</div>
6328
7672
  </div>
6329
7673
 
6330
- <script type="text/paperscript" canvas="canvas-51">
7674
+ <script type="text/paperscript" canvas="canvas-49">
6331
7675
  function onMouseDrag(event) {
6332
7676
  // Create a circle shaped path at the mouse position,
6333
7677
  // with a radius of 10:
@@ -6344,7 +7688,7 @@ function onMouseDrag(event) {
6344
7688
  });
6345
7689
  }
6346
7690
  </script>
6347
- <div class="canvas"><canvas width="516" height="200" id="canvas-51"></canvas></div>
7691
+ <div class="canvas"><canvas width="516" height="200" id="canvas-49"></canvas></div>
6348
7692
  </div>
6349
7693
 
6350
7694
 
@@ -6374,7 +7718,7 @@ function onMouseDrag(event) {
6374
7718
  <div class="button run">Run</div>
6375
7719
  </div>
6376
7720
 
6377
- <script type="text/paperscript" canvas="canvas-52">
7721
+ <script type="text/paperscript" canvas="canvas-50">
6378
7722
  function onMouseMove(event) {
6379
7723
  // Create a circle shaped path at the mouse position,
6380
7724
  // with a radius of 10:
@@ -6388,7 +7732,7 @@ function onMouseMove(event) {
6388
7732
  path.removeOnMove();
6389
7733
  }
6390
7734
  </script>
6391
- <div class="canvas"><canvas width="516" height="200" id="canvas-52"></canvas></div>
7735
+ <div class="canvas"><canvas width="516" height="200" id="canvas-50"></canvas></div>
6392
7736
  </div>
6393
7737
 
6394
7738
 
@@ -6418,7 +7762,7 @@ function onMouseMove(event) {
6418
7762
  <div class="button run">Run</div>
6419
7763
  </div>
6420
7764
 
6421
- <script type="text/paperscript" canvas="canvas-53">
7765
+ <script type="text/paperscript" canvas="canvas-51">
6422
7766
  function onMouseDown(event) {
6423
7767
  // Create a circle shaped path at the mouse position,
6424
7768
  // with a radius of 10:
@@ -6432,7 +7776,7 @@ function onMouseDown(event) {
6432
7776
  path.removeOnDown();
6433
7777
  }
6434
7778
  </script>
6435
- <div class="canvas"><canvas width="516" height="200" id="canvas-53"></canvas></div>
7779
+ <div class="canvas"><canvas width="516" height="200" id="canvas-51"></canvas></div>
6436
7780
  </div>
6437
7781
 
6438
7782
 
@@ -6462,7 +7806,7 @@ function onMouseDown(event) {
6462
7806
  <div class="button run">Run</div>
6463
7807
  </div>
6464
7808
 
6465
- <script type="text/paperscript" canvas="canvas-54">
7809
+ <script type="text/paperscript" canvas="canvas-52">
6466
7810
  function onMouseDrag(event) {
6467
7811
  // Create a circle shaped path at the mouse position,
6468
7812
  // with a radius of 10:
@@ -6476,7 +7820,7 @@ function onMouseDrag(event) {
6476
7820
  path.removeOnDrag();
6477
7821
  }
6478
7822
  </script>
6479
- <div class="canvas"><canvas width="516" height="200" id="canvas-54"></canvas></div>
7823
+ <div class="canvas"><canvas width="516" height="200" id="canvas-52"></canvas></div>
6480
7824
  </div>
6481
7825
 
6482
7826
 
@@ -6506,7 +7850,7 @@ function onMouseDrag(event) {
6506
7850
  <div class="button run">Run</div>
6507
7851
  </div>
6508
7852
 
6509
- <script type="text/paperscript" canvas="canvas-55">
7853
+ <script type="text/paperscript" canvas="canvas-53">
6510
7854
  function onMouseDown(event) {
6511
7855
  // Create a circle shaped path at the mouse position,
6512
7856
  // with a radius of 10:
@@ -6520,7 +7864,7 @@ function onMouseDown(event) {
6520
7864
  path.removeOnUp();
6521
7865
  }
6522
7866
  </script>
6523
- <div class="canvas"><canvas width="516" height="200" id="canvas-55"></canvas></div>
7867
+ <div class="canvas"><canvas width="516" height="200" id="canvas-53"></canvas></div>
6524
7868
  </div>
6525
7869
 
6526
7870
 
@@ -6593,7 +7937,7 @@ function onMouseDown(event) {
6593
7937
  <div class="button run">Run</div>
6594
7938
  </div>
6595
7939
 
6596
- <script type="text/paperscript" canvas="canvas-56">
7940
+ <script type="text/paperscript" canvas="canvas-54">
6597
7941
  var path = new Path.Circle({
6598
7942
  radius: view.bounds.height * 0.4,
6599
7943
  center: view.center
@@ -6604,7 +7948,7 @@ path.tween(
6604
7948
  3000
6605
7949
  );
6606
7950
  </script>
6607
- <div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
7951
+ <div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
6608
7952
  </div>
6609
7953
 
6610
7954
 
@@ -6616,7 +7960,7 @@ path.tween(
6616
7960
  <div class="button run">Run</div>
6617
7961
  </div>
6618
7962
 
6619
- <script type="text/paperscript" canvas="canvas-57">
7963
+ <script type="text/paperscript" canvas="canvas-55">
6620
7964
  var path = new Shape.Rectangle({
6621
7965
  fillColor: 'red',
6622
7966
  center: [50, view.center.y],
@@ -6631,7 +7975,7 @@ path.tween({
6631
7975
  duration: 2000
6632
7976
  });
6633
7977
  </script>
6634
- <div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
7978
+ <div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
6635
7979
  </div>
6636
7980
 
6637
7981
 
@@ -6697,7 +8041,7 @@ path.tween({
6697
8041
  <div class="button run">Run</div>
6698
8042
  </div>
6699
8043
 
6700
- <script type="text/paperscript" canvas="canvas-58">
8044
+ <script type="text/paperscript" canvas="canvas-56">
6701
8045
  var path = new Path.Rectangle({
6702
8046
  size: [100, 100],
6703
8047
  position: view.center,
@@ -6711,7 +8055,7 @@ path.tween({
6711
8055
  'segments[2].point.x': '-= 50'
6712
8056
  }, 3000);
6713
8057
  </script>
6714
- <div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
8058
+ <div class="canvas"><canvas width="516" height="200" id="canvas-56"></canvas></div>
6715
8059
  </div>
6716
8060
 
6717
8061
 
@@ -6770,7 +8114,7 @@ path.tween({
6770
8114
  <div class="button run">Run</div>
6771
8115
  </div>
6772
8116
 
6773
- <script type="text/paperscript" canvas="canvas-59">
8117
+ <script type="text/paperscript" canvas="canvas-57">
6774
8118
  var path = new Path.Circle({
6775
8119
  fillColor: 'blue',
6776
8120
  radius: view.bounds.height * 0.4,
@@ -6786,7 +8130,7 @@ path.tween(2000).onUpdate = function(event) {
6786
8130
  path.interpolate(pathFrom, pathTo, event.factor)
6787
8131
  };
6788
8132
  </script>
6789
- <div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
8133
+ <div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
6790
8134
  </div>
6791
8135
 
6792
8136
 
@@ -6907,7 +8251,7 @@ path.tween(2000).onUpdate = function(event) {
6907
8251
  <div class="button run">Run</div>
6908
8252
  </div>
6909
8253
 
6910
- <script type="text/paperscript" canvas="canvas-60">
8254
+ <script type="text/paperscript" canvas="canvas-58">
6911
8255
  var path = new Path.Circle({
6912
8256
  fillColor: 'blue',
6913
8257
  radius: view.bounds.height * 0.4,
@@ -6915,7 +8259,7 @@ var path = new Path.Circle({
6915
8259
  });
6916
8260
  path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6917
8261
  </script>
6918
- <div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
8262
+ <div class="canvas"><canvas width="516" height="100" id="canvas-58"></canvas></div>
6919
8263
  </div>
6920
8264
 
6921
8265
 
@@ -6929,7 +8273,7 @@ path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
6929
8273
 
6930
8274
  <!-- =========================== copyright notice ========================== -->
6931
8275
  <p class="footer">
6932
- Paper.js v0.13.0<br>
8276
+ Paper.js v0.15.0<br>
6933
8277
  Copyright &#169; 2011—2026 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
6934
8278
  <div class="content-end"></div>
6935
8279