source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/TextItem.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 97.9 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>TextItem</title>
6<base target="class-frame">
7<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8<script src="../assets/js/paper.js"></script>
9<script src="../assets/js/jquery.js"></script>
10<script src="../assets/js/codemirror.js"></script>
11<script src="../assets/js/docs.js"></script>
12</head>
13<body class="reference">
14<div class="reference-class">
15<h1>TextItem</h1>
16
17<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
18
19<p>The TextItem type allows you to create typography. Its
20functionality is inherited by different text item types such as
21<a href="../classes/PointText.html"><tt>PointText</tt></a>, and <tt>AreaText</tt> (coming soon). They each add a
22layer of functionality that is unique to their type, but share the
23underlying properties and functions that they inherit from TextItem.</p>
24
25</div>
26
27
28
29
30
31 <div class="reference-members"><h2>Properties</h2>
32
33
34<div id="content" class="member">
35<div class="member-link">
36<a name="content" href="#content"><tt><b>content</b></tt></a>
37</div>
38<div class="member-description hidden">
39
40<div class="member-text">
41 <p>The text contents of the text item.</p>
42
43
44 <ul><b>Type:</b>
45 <li>
46 <tt>String</tt>
47 </li>
48 </ul>
49
50 <p>
51<b>Example</b> &mdash; Setting the content of a PointText item:
52</p>
53
54<div class="paperscript split">
55
56<div class="buttons">
57<div class="button run">Run</div>
58</div>
59
60<script type="text/paperscript" canvas="canvas-0">
61// Create a point-text item at {x: 30, y: 30}:
62var text = new PointText(new Point(30, 30));
63text.fillColor = 'black';
64
65// Set the content of the text item:
66text.content = 'Hello world';
67</script>
68<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
69</div>
70
71
72<p>
73<b>Example</b> &mdash; Interactive example, move your mouse over the view below:
74</p>
75
76<div class="paperscript split">
77
78<div class="buttons">
79<div class="button run">Run</div>
80</div>
81
82<script type="text/paperscript" canvas="canvas-1">
83// Create a point-text item at {x: 30, y: 30}:
84var text = new PointText(new Point(30, 30));
85text.fillColor = 'black';
86
87text.content = 'Move your mouse over the view, to see its position';
88
89function onMouseMove(event) {
90 // Each time the mouse is moved, set the content of
91 // the point text to describe the position of the mouse:
92 text.content = 'Your position is: ' + event.point.toString();
93}
94</script>
95<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
96</div>
97
98
99</div>
100
101</div>
102</div>
103
104 </div>
105
106
107
108
109
110
111<!-- =========================== inherited properties ====================== -->
112<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
113
114
115<div id="id" class="member">
116<div class="member-link">
117<a name="id" href="#id"><tt><b>id</b></tt></a>
118</div>
119<div class="member-description hidden">
120
121<div class="member-text">
122 <p>The unique id of the item.</p>
123
124 <p>Read only.</p>
125
126
127 <ul><b>Type:</b>
128 <li>
129 <tt>Number</tt>
130 </li>
131 </ul>
132
133
134</div>
135
136</div>
137</div>
138
139
140<div id="type" class="member">
141<div class="member-link">
142<a name="type" href="#type"><tt><b>type</b></tt></a>
143</div>
144<div class="member-description hidden">
145
146<div class="member-text">
147 <p>The type of the item as a string.</p>
148
149 <p>Read only.</p>
150
151
152 <ul><b>Type:</b>
153 <li>
154 <tt>String('group', 'layer', 'path', 'compound-path', 'raster',
155'placed-symbol', 'point-text')</tt>
156 </li>
157 </ul>
158
159
160</div>
161
162</div>
163</div>
164
165
166<div id="name" class="member">
167<div class="member-link">
168<a name="name" href="#name"><tt><b>name</b></tt></a>
169</div>
170<div class="member-description hidden">
171
172<div class="member-text">
173 <p>The name of the item. If the item has a name, it can be accessed by name
174through its parent's children list.</p>
175
176
177 <ul><b>Type:</b>
178 <li>
179 <tt>String</tt>
180 </li>
181 </ul>
182
183 <p>
184<b>Example</b>
185</p>
186
187<div class="paperscript split">
188
189<div class="buttons">
190<div class="button run">Run</div>
191</div>
192
193<script type="text/paperscript" canvas="canvas-2">
194var path = new Path.Circle({
195 center: [80, 50],
196 radius: 35
197});
198// Set the name of the path:
199path.name = 'example';
200
201// Create a group and add path to it as a child:
202var group = new Group();
203group.addChild(path);
204
205// The path can be accessed by name:
206group.children['example'].fillColor = 'red';
207</script>
208<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
209</div>
210
211
212</div>
213
214</div>
215</div>
216
217
218<div id="style" class="member">
219<div class="member-link">
220<a name="style" href="#style"><tt><b>style</b></tt></a>
221</div>
222<div class="member-description hidden">
223
224<div class="member-text">
225 <p>The path style of the item.</p>
226
227
228 <ul><b>Type:</b>
229 <li>
230 <a href="../classes/Style.html"><tt>Style</tt></a>
231 </li>
232 </ul>
233
234 <p>
235<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
236</p>
237
238<div class="paperscript split">
239
240<div class="buttons">
241<div class="button run">Run</div>
242</div>
243
244<script type="text/paperscript" canvas="canvas-3">
245var circle = new Path.Circle({
246 center: [80, 50],
247 radius: 30
248});
249circle.style = {
250 fillColor: 'blue',
251 strokeColor: 'red',
252 strokeWidth: 5
253};
254</script>
255<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
256</div>
257
258
259<p>
260<b>Example</b> &mdash; Copying the style of another item:
261</p>
262
263<div class="paperscript split">
264
265<div class="buttons">
266<div class="button run">Run</div>
267</div>
268
269<script type="text/paperscript" canvas="canvas-4">
270var path = new Path.Circle({
271 center: [50, 50],
272 radius: 30,
273 fillColor: 'red'
274});
275
276var path2 = new Path.Circle({
277 center: new Point(180, 50),
278 radius: 20
279});
280
281// Copy the path style of path:
282path2.style = path.style;
283</script>
284<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
285</div>
286
287
288<p>
289<b>Example</b> &mdash; Applying the same style object to multiple items:
290</p>
291
292<div class="paperscript split">
293
294<div class="buttons">
295<div class="button run">Run</div>
296</div>
297
298<script type="text/paperscript" canvas="canvas-5">
299var myStyle = {
300 fillColor: 'red',
301 strokeColor: 'blue',
302 strokeWidth: 4
303};
304
305var path = new Path.Circle({
306 center: [50, 50],
307 radius: 30
308});
309path.style = myStyle;
310
311var path2 = new Path.Circle({
312 center: new Point(150, 50),
313 radius: 20
314});
315path2.style = myStyle;
316</script>
317<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
318</div>
319
320
321</div>
322
323</div>
324</div>
325
326
327<div id="visible" class="member">
328<div class="member-link">
329<a name="visible" href="#visible"><tt><b>visible</b></tt></a>
330</div>
331<div class="member-description hidden">
332
333<div class="member-text">
334 <p>Specifies whether the item is visible. When set to <tt>false</tt>, the
335item won't be drawn.</p>
336
337
338 <ul><b>Default:</b>
339 <li>
340 <tt>true</tt>
341 </li>
342 </ul>
343
344 <ul><b>Type:</b>
345 <li>
346 <tt>Boolean</tt>
347 </li>
348 </ul>
349
350 <p>
351<b>Example</b> &mdash; Hiding an item:
352</p>
353
354<div class="paperscript split">
355
356<div class="buttons">
357<div class="button run">Run</div>
358</div>
359
360<script type="text/paperscript" canvas="canvas-6">
361var path = new Path.Circle({
362 center: [50, 50],
363 radius: 20,
364 fillColor: 'red'
365});
366
367// Hide the path:
368path.visible = false;
369</script>
370<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
371</div>
372
373
374</div>
375
376</div>
377</div>
378
379
380<div id="blendmode" class="member">
381<div class="member-link">
382<a name="blendmode" href="#blendmode"><tt><b>blendMode</b></tt></a>
383</div>
384<div class="member-description hidden">
385
386<div class="member-text">
387 <p>The blend mode with which the item is composited onto the canvas. Both
388the standard canvas compositing modes, as well as the new CSS blend modes
389are supported. If blend-modes cannot be rendered natively, they are
390emulated. Be aware that emulation can have an impact on performance.</p>
391
392
393 <ul><b>Default:</b>
394 <li>
395 <tt>'normal'</tt>
396 </li>
397 </ul>
398
399 <ul><b>Type:</b>
400 <li>
401 <tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
402'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
403'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
404'add', 'subtract', 'average', 'pin-light', 'negation', 'source-over',
405'source-in', 'source-out', 'source-atop', 'destination-over',
406'destination-in', 'destination-out', 'destination-atop', 'lighter',
407'darker', 'copy', 'xor')</tt>
408 </li>
409 </ul>
410
411 <p>
412<b>Example</b> &mdash; Setting an item's blend mode:
413</p>
414
415<div class="paperscript split">
416
417<div class="buttons">
418<div class="button run">Run</div>
419</div>
420
421<script type="text/paperscript" canvas="canvas-7">
422// Create a white rectangle in the background
423// with the same dimensions as the view:
424var background = new Path.Rectangle(view.bounds);
425background.fillColor = 'white';
426
427var circle = new Path.Circle({
428 center: [80, 50],
429 radius: 35,
430 fillColor: 'red'
431});
432
433var circle2 = new Path.Circle({
434 center: new Point(120, 50),
435 radius: 35,
436 fillColor: 'blue'
437});
438
439// Set the blend mode of circle2:
440circle2.blendMode = 'multiply';
441</script>
442<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
443</div>
444
445
446</div>
447
448</div>
449</div>
450
451
452<div id="opacity" class="member">
453<div class="member-link">
454<a name="opacity" href="#opacity"><tt><b>opacity</b></tt></a>
455</div>
456<div class="member-description hidden">
457
458<div class="member-text">
459 <p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
460
461
462 <ul><b>Default:</b>
463 <li>
464 <tt>1</tt>
465 </li>
466 </ul>
467
468 <ul><b>Type:</b>
469 <li>
470 <tt>Number</tt>
471 </li>
472 </ul>
473
474 <p>
475<b>Example</b> &mdash; Making an item 50% transparent:
476</p>
477
478<div class="paperscript split">
479
480<div class="buttons">
481<div class="button run">Run</div>
482</div>
483
484<script type="text/paperscript" canvas="canvas-8">
485var circle = new Path.Circle({
486 center: [80, 50],
487 radius: 35,
488 fillColor: 'red'
489});
490
491var circle2 = new Path.Circle({
492 center: new Point(120, 50),
493 radius: 35,
494 fillColor: 'blue',
495 strokeColor: 'green',
496 strokeWidth: 10
497});
498
499// Make circle2 50% transparent:
500circle2.opacity = 0.5;
501</script>
502<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
503</div>
504
505
506</div>
507
508</div>
509</div>
510
511
512<div id="selected" class="member">
513<div class="member-link">
514<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
515</div>
516<div class="member-description hidden">
517
518<div class="member-text">
519 <p>Specifies whether an item is selected and will also return <tt>true</tt>
520if the item is partially selected (groups with some selected or partially
521selected paths).</p>
522<p>Paper.js draws the visual outlines of selected items on top of your
523project. This can be useful for debugging, as it allows you to see the
524construction of paths, position of path curves, individual segment points
525and bounding boxes of symbol and raster items.</p>
526
527
528 <ul><b>Type:</b>
529 <li>
530 <tt>Boolean</tt>
531 </li>
532 </ul>
533
534 <p><b>See also:</b>
535 <tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
536 </p>
537
538 <p>
539<b>Example</b> &mdash; Selecting an item:
540</p>
541
542<div class="paperscript split">
543
544<div class="buttons">
545<div class="button run">Run</div>
546</div>
547
548<script type="text/paperscript" canvas="canvas-9">
549var path = new Path.Circle({
550 center: [80, 50],
551 radius: 35
552});
553path.selected = true; // Select the path
554</script>
555<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
556</div>
557
558
559</div>
560
561</div>
562</div>
563
564
565<div id="clipmask" class="member">
566<div class="member-link">
567<a name="clipmask" href="#clipmask"><tt><b>clipMask</b></tt></a>
568</div>
569<div class="member-description hidden">
570
571<div class="member-text">
572 <p>Specifies whether the item defines a clip mask. This can only be set on
573paths, compound paths, and text frame objects, and only if the item is
574already contained within a clipping group.</p>
575
576
577 <ul><b>Type:</b>
578 <li>
579 <tt>Boolean</tt>
580 </li>
581 </ul>
582
583
584</div>
585
586</div>
587</div>
588
589
590<div id="data" class="member">
591<div class="member-link">
592<a name="data" href="#data"><tt><b>data</b></tt></a>
593</div>
594<div class="member-description hidden">
595
596<div class="member-text">
597 <p>A plain javascript object which can be used to store
598arbitrary data on the item.</p>
599
600
601 <ul><b>Type:</b>
602 <li>
603 <tt>Object</tt>
604 </li>
605 </ul>
606
607 <p>
608<b>Example</b>
609</p>
610
611
612<pre class="code">var path = new Path();
613path.data.remember = 'milk';</pre>
614
615<p>
616<b>Example</b>
617</p>
618
619
620<pre class="code">var path = new Path();
621path.data.malcolm = new Point(20, 30);
622console.log(path.data.malcolm.x); // 20</pre>
623
624<p>
625<b>Example</b>
626</p>
627
628
629<pre class="code">var path = new Path();
630path.data = {
631 home: 'Omicron Theta',
632 found: 2338,
633 pets: ['Spot']
634};
635console.log(path.data.pets.length); // 1</pre>
636
637<p>
638<b>Example</b>
639</p>
640
641
642<pre class="code">var path = new Path({
643 data: {
644 home: 'Omicron Theta',
645 found: 2338,
646 pets: ['Spot']
647 }
648});
649console.log(path.data.pets.length); // 1</pre>
650
651</div>
652
653</div>
654</div>
655
656
657 <h3>Position and Bounding Boxes</h3>
658
659<div id="position" class="member">
660<div class="member-link">
661<a name="position" href="#position"><tt><b>position</b></tt></a>
662</div>
663<div class="member-description hidden">
664
665<div class="member-text">
666 <p>The item's position within the project. This is the
667<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
668
669
670 <ul><b>Type:</b>
671 <li>
672 <a href="../classes/Point.html"><tt>Point</tt></a>
673 </li>
674 </ul>
675
676 <p>
677<b>Example</b> &mdash; Changing the position of a path:
678</p>
679
680<div class="paperscript split">
681
682<div class="buttons">
683<div class="button run">Run</div>
684</div>
685
686<script type="text/paperscript" canvas="canvas-10">
687// Create a circle at position { x: 10, y: 10 }
688var circle = new Path.Circle({
689 center: new Point(10, 10),
690 radius: 10,
691 fillColor: 'red'
692});
693
694// Move the circle to { x: 20, y: 20 }
695circle.position = new Point(20, 20);
696
697// Move the circle 100 points to the right and 50 points down
698circle.position += new Point(100, 50);
699</script>
700<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
701</div>
702
703
704<p>
705<b>Example</b> &mdash; Changing the x coordinate of an item's position:
706</p>
707
708<div class="paperscript split">
709
710<div class="buttons">
711<div class="button run">Run</div>
712</div>
713
714<script type="text/paperscript" canvas="canvas-11">
715// Create a circle at position { x: 20, y: 20 }
716var circle = new Path.Circle({
717 center: new Point(20, 20),
718 radius: 10,
719 fillColor: 'red'
720});
721
722// Move the circle 100 points to the right
723circle.position.x += 100;
724</script>
725<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
726</div>
727
728
729</div>
730
731</div>
732</div>
733
734
735<div id="bounds" class="member">
736<div class="member-link">
737<a name="bounds" href="#bounds"><tt><b>bounds</b></tt></a>
738</div>
739<div class="member-description hidden">
740
741<div class="member-text">
742 <p>The bounding rectangle of the item excluding stroke width.</p>
743
744 <p>Read only.</p>
745
746
747 <ul><b>Type:</b>
748 <li>
749 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
750 </li>
751 </ul>
752
753
754</div>
755
756</div>
757</div>
758
759
760<div id="strokebounds" class="member">
761<div class="member-link">
762<a name="strokebounds" href="#strokebounds"><tt><b>strokeBounds</b></tt></a>
763</div>
764<div class="member-description hidden">
765
766<div class="member-text">
767 <p>The bounding rectangle of the item including stroke width.</p>
768
769 <p>Read only.</p>
770
771
772 <ul><b>Type:</b>
773 <li>
774 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
775 </li>
776 </ul>
777
778
779</div>
780
781</div>
782</div>
783
784
785<div id="handlebounds" class="member">
786<div class="member-link">
787<a name="handlebounds" href="#handlebounds"><tt><b>handleBounds</b></tt></a>
788</div>
789<div class="member-description hidden">
790
791<div class="member-text">
792 <p>The bounding rectangle of the item including handles.</p>
793
794 <p>Read only.</p>
795
796
797 <ul><b>Type:</b>
798 <li>
799 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
800 </li>
801 </ul>
802
803
804</div>
805
806</div>
807</div>
808
809
810<div id="matrix" class="member">
811<div class="member-link">
812<a name="matrix" href="#matrix"><tt><b>matrix</b></tt></a>
813</div>
814<div class="member-description hidden">
815
816<div class="member-text">
817 <p>The item's transformation matrix, defining position and dimensions in
818relation to its parent item in which it is contained.</p>
819
820
821 <ul><b>Type:</b>
822 <li>
823 <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
824 </li>
825 </ul>
826
827
828</div>
829
830</div>
831</div>
832
833
834<div id="globalmatrix" class="member">
835<div class="member-link">
836<a name="globalmatrix" href="#globalmatrix"><tt><b>globalMatrix</b></tt></a>
837</div>
838<div class="member-description hidden">
839
840<div class="member-text">
841 <p>The item's global transformation matrix in relation to the global project
842coordinate space.</p>
843
844 <p>Read only.</p>
845
846
847 <ul><b>Type:</b>
848 <li>
849 <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
850 </li>
851 </ul>
852
853
854</div>
855
856</div>
857</div>
858
859
860<div id="transformcontent" class="member">
861<div class="member-link">
862<a name="transformcontent" href="#transformcontent"><tt><b>transformContent</b></tt></a>
863</div>
864<div class="member-description hidden">
865
866<div class="member-text">
867 <p>Specifies whether the group applies transformations directly to its
868children, or whether they are to be stored in its <a href="../classes/Item.html#matrix"><tt>item.matrix</tt></a></p>
869
870
871 <ul><b>Type:</b>
872 <li>
873 <tt>Boolean</tt>
874 </li>
875 </ul>
876
877
878</div>
879
880</div>
881</div>
882
883
884 <h3>Project Hierarchy</h3>
885
886<div id="project" class="member">
887<div class="member-link">
888<a name="project" href="#project"><tt><b>project</b></tt></a>
889</div>
890<div class="member-description hidden">
891
892<div class="member-text">
893 <p>The project that this item belongs to.</p>
894
895 <p>Read only.</p>
896
897
898 <ul><b>Type:</b>
899 <li>
900 <a href="../classes/Project.html"><tt>Project</tt></a>
901 </li>
902 </ul>
903
904
905</div>
906
907</div>
908</div>
909
910
911<div id="layer" class="member">
912<div class="member-link">
913<a name="layer" href="#layer"><tt><b>layer</b></tt></a>
914</div>
915<div class="member-description hidden">
916
917<div class="member-text">
918 <p>The layer that this item is contained within.</p>
919
920 <p>Read only.</p>
921
922
923 <ul><b>Type:</b>
924 <li>
925 <a href="../classes/Layer.html"><tt>Layer</tt></a>
926 </li>
927 </ul>
928
929
930</div>
931
932</div>
933</div>
934
935
936<div id="parent" class="member">
937<div class="member-link">
938<a name="parent" href="#parent"><tt><b>parent</b></tt></a>
939</div>
940<div class="member-description hidden">
941
942<div class="member-text">
943 <p>The item that this item is contained within.</p>
944
945
946 <ul><b>Type:</b>
947 <li>
948 <a href="../classes/Item.html"><tt>Item</tt></a>
949 </li>
950 </ul>
951
952 <p>
953<b>Example</b>
954</p>
955
956
957<pre class="code">var path = new Path();
958
959// New items are placed in the active layer:
960console.log(path.parent == project.activeLayer); // true
961
962var group = new Group();
963group.addChild(path);
964
965// Now the parent of the path has become the group:
966console.log(path.parent == group); // true</pre>
967
968<p>
969<b>Example</b> &mdash; Setting the parent of the item to another item
970</p>
971
972
973<pre class="code">var path = new Path();
974
975// New items are placed in the active layer:
976console.log(path.parent == project.activeLayer); // true
977
978var group = new Group();
979group.parent = path;
980
981// Now the parent of the path has become the group:
982console.log(path.parent == group); // true
983
984// The path is now contained in the children list of group:
985console.log(group.children[0] == path); // true</pre>
986
987<p>
988<b>Example</b> &mdash; Setting the parent of an item in the constructor
989</p>
990
991
992<pre class="code">var group = new Group();
993
994var path = new Path({
995 parent: group
996});
997
998// The parent of the path is the group:
999console.log(path.parent == group); // true
1000
1001// The path is contained in the children list of group:
1002console.log(group.children[0] == path); // true</pre>
1003
1004</div>
1005
1006</div>
1007</div>
1008
1009
1010<div id="children" class="member">
1011<div class="member-link">
1012<a name="children" href="#children"><tt><b>children</b></tt></a>
1013</div>
1014<div class="member-description hidden">
1015
1016<div class="member-text">
1017 <p>The children items contained within this item. Items that define a
1018<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
1019<p><b>Please note:</b> The children array should not be modified directly
1020using array functions. To remove single items from the children list, use
1021<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
1022<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
1023<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
1024
1025
1026 <ul><b>Type:</b>
1027 <li>
1028 Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
1029 </li>
1030 </ul>
1031
1032 <p>
1033<b>Example</b> &mdash; Accessing items in the children array:
1034</p>
1035
1036<div class="paperscript split">
1037
1038<div class="buttons">
1039<div class="button run">Run</div>
1040</div>
1041
1042<script type="text/paperscript" canvas="canvas-12">
1043var path = new Path.Circle({
1044 center: [80, 50],
1045 radius: 35
1046});
1047
1048// Create a group and move the path into it:
1049var group = new Group();
1050group.addChild(path);
1051
1052// Access the path through the group's children array:
1053group.children[0].fillColor = 'red';
1054</script>
1055<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
1056</div>
1057
1058
1059<p>
1060<b>Example</b> &mdash; Accessing children by name:
1061</p>
1062
1063<div class="paperscript split">
1064
1065<div class="buttons">
1066<div class="button run">Run</div>
1067</div>
1068
1069<script type="text/paperscript" canvas="canvas-13">
1070var path = new Path.Circle({
1071 center: [80, 50],
1072 radius: 35
1073});
1074// Set the name of the path:
1075path.name = 'example';
1076
1077// Create a group and move the path into it:
1078var group = new Group();
1079group.addChild(path);
1080
1081// The path can be accessed by name:
1082group.children['example'].fillColor = 'orange';
1083</script>
1084<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
1085</div>
1086
1087
1088<p>
1089<b>Example</b> &mdash; Passing an array of items to item.children:
1090</p>
1091
1092<div class="paperscript split">
1093
1094<div class="buttons">
1095<div class="button run">Run</div>
1096</div>
1097
1098<script type="text/paperscript" canvas="canvas-14">
1099var path = new Path.Circle({
1100 center: [80, 50],
1101 radius: 35
1102});
1103
1104var group = new Group();
1105group.children = [path];
1106
1107// The path is the first child of the group:
1108group.firstChild.fillColor = 'green';
1109</script>
1110<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
1111</div>
1112
1113
1114</div>
1115
1116</div>
1117</div>
1118
1119
1120<div id="firstchild" class="member">
1121<div class="member-link">
1122<a name="firstchild" href="#firstchild"><tt><b>firstChild</b></tt></a>
1123</div>
1124<div class="member-description hidden">
1125
1126<div class="member-text">
1127 <p>The first item contained within this item. This is a shortcut for
1128accessing <tt>item.children[0]</tt>.</p>
1129
1130 <p>Read only.</p>
1131
1132
1133 <ul><b>Type:</b>
1134 <li>
1135 <a href="../classes/Item.html"><tt>Item</tt></a>
1136 </li>
1137 </ul>
1138
1139
1140</div>
1141
1142</div>
1143</div>
1144
1145
1146<div id="lastchild" class="member">
1147<div class="member-link">
1148<a name="lastchild" href="#lastchild"><tt><b>lastChild</b></tt></a>
1149</div>
1150<div class="member-description hidden">
1151
1152<div class="member-text">
1153 <p>The last item contained within this item.This is a shortcut for
1154accessing <tt>item.children[item.children.length - 1]</tt>.</p>
1155
1156 <p>Read only.</p>
1157
1158
1159 <ul><b>Type:</b>
1160 <li>
1161 <a href="../classes/Item.html"><tt>Item</tt></a>
1162 </li>
1163 </ul>
1164
1165
1166</div>
1167
1168</div>
1169</div>
1170
1171
1172<div id="nextsibling" class="member">
1173<div class="member-link">
1174<a name="nextsibling" href="#nextsibling"><tt><b>nextSibling</b></tt></a>
1175</div>
1176<div class="member-description hidden">
1177
1178<div class="member-text">
1179 <p>The next item on the same level as this item.</p>
1180
1181 <p>Read only.</p>
1182
1183
1184 <ul><b>Type:</b>
1185 <li>
1186 <a href="../classes/Item.html"><tt>Item</tt></a>
1187 </li>
1188 </ul>
1189
1190
1191</div>
1192
1193</div>
1194</div>
1195
1196
1197<div id="previoussibling" class="member">
1198<div class="member-link">
1199<a name="previoussibling" href="#previoussibling"><tt><b>previousSibling</b></tt></a>
1200</div>
1201<div class="member-description hidden">
1202
1203<div class="member-text">
1204 <p>The previous item on the same level as this item.</p>
1205
1206 <p>Read only.</p>
1207
1208
1209 <ul><b>Type:</b>
1210 <li>
1211 <a href="../classes/Item.html"><tt>Item</tt></a>
1212 </li>
1213 </ul>
1214
1215
1216</div>
1217
1218</div>
1219</div>
1220
1221
1222<div id="index" class="member">
1223<div class="member-link">
1224<a name="index" href="#index"><tt><b>index</b></tt></a>
1225</div>
1226<div class="member-description hidden">
1227
1228<div class="member-text">
1229 <p>The index of this item within the list of its parent's children.</p>
1230
1231 <p>Read only.</p>
1232
1233
1234 <ul><b>Type:</b>
1235 <li>
1236 <tt>Number</tt>
1237 </li>
1238 </ul>
1239
1240
1241</div>
1242
1243</div>
1244</div>
1245
1246
1247<div id="appendtop-item" class="member">
1248<div class="member-link">
1249<a name="appendtop-item" href="#appendtop-item"><tt><b>appendTop</b></tt></a>
1250</div>
1251<div class="member-description hidden">
1252
1253</div>
1254</div>
1255
1256
1257<div id="moveabove-item" class="member">
1258<div class="member-link">
1259<a name="moveabove-item" href="#moveabove-item"><tt><b>moveAbove</b></tt></a>
1260</div>
1261<div class="member-description hidden">
1262
1263<div class="member-text">
1264 <p>Moves this item above the specified item.</p>
1265
1266
1267 <ul><b>Type:</b>
1268 <li>
1269 <tt>Boolean</tt>
1270 </li>
1271 </ul>
1272
1273
1274</div>
1275
1276</div>
1277</div>
1278
1279
1280<div id="movebelow-item" class="member">
1281<div class="member-link">
1282<a name="movebelow-item" href="#movebelow-item"><tt><b>moveBelow</b></tt></a>
1283</div>
1284<div class="member-description hidden">
1285
1286<div class="member-text">
1287 <p>Moves the item below the specified item.</p>
1288
1289
1290 <ul><b>Type:</b>
1291 <li>
1292 <tt>Boolean</tt>
1293 </li>
1294 </ul>
1295
1296
1297</div>
1298
1299</div>
1300</div>
1301
1302
1303 <h3>Stroke Style</h3>
1304
1305<div id="strokecolor" class="member">
1306<div class="member-link">
1307<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
1308</div>
1309<div class="member-description hidden">
1310
1311<div class="member-text">
1312 <p>The color of the stroke.</p>
1313
1314
1315 <ul><b>Type:</b>
1316 <li>
1317 <a href="../classes/Color.html"><tt>Color</tt></a>
1318 </li>
1319 </ul>
1320
1321 <p>
1322<b>Example</b> &mdash; Setting the stroke color of a path:
1323</p>
1324
1325<div class="paperscript split">
1326
1327<div class="buttons">
1328<div class="button run">Run</div>
1329</div>
1330
1331<script type="text/paperscript" canvas="canvas-15">
1332// Create a circle shaped path at { x: 80, y: 50 }
1333// with a radius of 35:
1334var circle = new Path.Circle({
1335 center: [80, 50],
1336 radius: 35
1337});
1338
1339// Set its stroke color to RGB red:
1340circle.strokeColor = new Color(1, 0, 0);
1341</script>
1342<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
1343</div>
1344
1345
1346</div>
1347
1348</div>
1349</div>
1350
1351
1352<div id="strokewidth" class="member">
1353<div class="member-link">
1354<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
1355</div>
1356<div class="member-description hidden">
1357
1358<div class="member-text">
1359 <p>The width of the stroke.</p>
1360
1361
1362 <ul><b>Type:</b>
1363 <li>
1364 <tt>Number</tt>
1365 </li>
1366 </ul>
1367
1368 <p>
1369<b>Example</b> &mdash; Setting an item's stroke width:
1370</p>
1371
1372<div class="paperscript split">
1373
1374<div class="buttons">
1375<div class="button run">Run</div>
1376</div>
1377
1378<script type="text/paperscript" canvas="canvas-16">
1379// Create a circle shaped path at { x: 80, y: 50 }
1380// with a radius of 35:
1381var circle = new Path.Circle({
1382 center: [80, 50],
1383 radius: 35,
1384 strokeColor: 'red'
1385});
1386
1387// Set its stroke width to 10:
1388circle.strokeWidth = 10;
1389</script>
1390<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
1391</div>
1392
1393
1394</div>
1395
1396</div>
1397</div>
1398
1399
1400<div id="strokecap" class="member">
1401<div class="member-link">
1402<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
1403</div>
1404<div class="member-description hidden">
1405
1406<div class="member-text">
1407 <p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
1408have a stroke.</p>
1409
1410
1411 <ul><b>Default:</b>
1412 <li>
1413 <tt>'butt'</tt>
1414 </li>
1415 </ul>
1416
1417 <ul><b>Type:</b>
1418 <li>
1419 <tt>String('round', 'square', 'butt')</tt>
1420 </li>
1421 </ul>
1422
1423 <p>
1424<b>Example</b> &mdash; A look at the different stroke caps:
1425</p>
1426
1427<div class="paperscript split">
1428
1429<div class="buttons">
1430<div class="button run">Run</div>
1431</div>
1432
1433<script type="text/paperscript" canvas="canvas-17">
1434var line = new Path({
1435 segments: [[80, 50], [420, 50]],
1436 strokeColor: 'black',
1437 strokeWidth: 20,
1438 selected: true
1439});
1440
1441// Set the stroke cap of the line to be round:
1442line.strokeCap = 'round';
1443
1444// Copy the path and set its stroke cap to be square:
1445var line2 = line.clone();
1446line2.position.y += 50;
1447line2.strokeCap = 'square';
1448
1449// Make another copy and set its stroke cap to be butt:
1450var line2 = line.clone();
1451line2.position.y += 100;
1452line2.strokeCap = 'butt';
1453</script>
1454<div class="canvas"><canvas width="516" height="200" id="canvas-17"></canvas></div>
1455</div>
1456
1457
1458</div>
1459
1460</div>
1461</div>
1462
1463
1464<div id="strokejoin" class="member">
1465<div class="member-link">
1466<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
1467</div>
1468<div class="member-description hidden">
1469
1470<div class="member-text">
1471 <p>The shape to be used at the corners of paths when they have a stroke.</p>
1472
1473
1474 <ul><b>Default:</b>
1475 <li>
1476 <tt>'miter'</tt>
1477 </li>
1478 </ul>
1479
1480 <ul><b>Type:</b>
1481 <li>
1482 <tt>String('miter', 'round', 'bevel')</tt>
1483 </li>
1484 </ul>
1485
1486 <p>
1487<b>Example</b> &mdash; A look at the different stroke joins:
1488</p>
1489
1490<div class="paperscript split">
1491
1492<div class="buttons">
1493<div class="button run">Run</div>
1494</div>
1495
1496<script type="text/paperscript" canvas="canvas-18">
1497var path = new Path({
1498 segments: [[80, 100], [120, 40], [160, 100]],
1499 strokeColor: 'black',
1500 strokeWidth: 20,
1501 // Select the path, in order to see where the stroke is formed:
1502 selected: true
1503});
1504
1505var path2 = path.clone();
1506path2.position.x += path2.bounds.width * 1.5;
1507path2.strokeJoin = 'round';
1508
1509var path3 = path2.clone();
1510path3.position.x += path3.bounds.width * 1.5;
1511path3.strokeJoin = 'bevel';
1512</script>
1513<div class="canvas"><canvas width="516" height="120" id="canvas-18"></canvas></div>
1514</div>
1515
1516
1517</div>
1518
1519</div>
1520</div>
1521
1522
1523<div id="dashoffset" class="member">
1524<div class="member-link">
1525<a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
1526</div>
1527<div class="member-description hidden">
1528
1529<div class="member-text">
1530 <p>The dash offset of the stroke.</p>
1531
1532
1533 <ul><b>Default:</b>
1534 <li>
1535 <tt>0</tt>
1536 </li>
1537 </ul>
1538
1539 <ul><b>Type:</b>
1540 <li>
1541 <tt>Number</tt>
1542 </li>
1543 </ul>
1544
1545
1546</div>
1547
1548</div>
1549</div>
1550
1551
1552<div id="dasharray" class="member">
1553<div class="member-link">
1554<a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
1555</div>
1556<div class="member-description hidden">
1557
1558<div class="member-text">
1559 <p>Specifies an array containing the dash and gap lengths of the stroke.</p>
1560
1561
1562 <ul><b>Default:</b>
1563 <li>
1564 <tt>[]</tt>
1565 </li>
1566 </ul>
1567
1568 <ul><b>Type:</b>
1569 <li>
1570 <tt>Array</tt>
1571 </li>
1572 </ul>
1573
1574 <p>
1575<b>Example</b>
1576</p>
1577
1578<div class="paperscript split">
1579
1580<div class="buttons">
1581<div class="button run">Run</div>
1582</div>
1583
1584<script type="text/paperscript" canvas="canvas-19">
1585var path = new Path.Circle({
1586 center: [80, 50],
1587 radius: 40,
1588 strokeWidth: 2,
1589 strokeColor: 'black'
1590});
1591
1592// Set the dashed stroke to [10pt dash, 4pt gap]:
1593path.dashArray = [10, 4];
1594</script>
1595<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
1596</div>
1597
1598
1599</div>
1600
1601</div>
1602</div>
1603
1604
1605<div id="miterlimit" class="member">
1606<div class="member-link">
1607<a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
1608</div>
1609<div class="member-description hidden">
1610
1611<div class="member-text">
1612 <p>The miter limit of the stroke.</p>
1613<p>When two line segments meet at a sharp angle and miter joins have been
1614specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
1615extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
1616miterLimit imposes a limit on the ratio of the miter length to the
1617<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
1618
1619
1620 <ul><b>Default:</b>
1621 <li>
1622 <tt>10</tt>
1623 </li>
1624 </ul>
1625
1626 <ul><b>Type:</b>
1627 <li>
1628 <tt>Number</tt>
1629 </li>
1630 </ul>
1631
1632
1633</div>
1634
1635</div>
1636</div>
1637
1638
1639<div id="windingrule" class="member">
1640<div class="member-link">
1641<a name="windingrule" href="#windingrule"><tt><b>windingRule</b></tt></a>
1642</div>
1643<div class="member-description hidden">
1644
1645<div class="member-text">
1646 <p>The winding-rule with which the shape gets filled. Please note that only
1647modern browsers support winding-rules other than <tt>'nonzero'</tt>.</p>
1648
1649
1650 <ul><b>Default:</b>
1651 <li>
1652 <tt>'nonzero'</tt>
1653 </li>
1654 </ul>
1655
1656 <ul><b>Type:</b>
1657 <li>
1658 <tt>String('nonzero', 'evenodd')</tt>
1659 </li>
1660 </ul>
1661
1662
1663</div>
1664
1665</div>
1666</div>
1667
1668
1669 <h3>Fill Style</h3>
1670
1671<div id="fillcolor" class="member">
1672<div class="member-link">
1673<a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
1674</div>
1675<div class="member-description hidden">
1676
1677<div class="member-text">
1678 <p>The fill color of the item.</p>
1679
1680
1681 <ul><b>Type:</b>
1682 <li>
1683 <a href="../classes/Color.html"><tt>Color</tt></a>
1684 </li>
1685 </ul>
1686
1687 <p>
1688<b>Example</b> &mdash; Setting the fill color of a path to red:
1689</p>
1690
1691<div class="paperscript split">
1692
1693<div class="buttons">
1694<div class="button run">Run</div>
1695</div>
1696
1697<script type="text/paperscript" canvas="canvas-20">
1698// Create a circle shaped path at { x: 80, y: 50 }
1699// with a radius of 35:
1700var circle = new Path.Circle({
1701 center: [80, 50],
1702 radius: 35
1703});
1704
1705// Set the fill color of the circle to RGB red:
1706circle.fillColor = new Color(1, 0, 0);
1707</script>
1708<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
1709</div>
1710
1711
1712</div>
1713
1714</div>
1715</div>
1716
1717
1718 <h3>Selection Style</h3>
1719
1720<div id="selectedcolor" class="member">
1721<div class="member-link">
1722<a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
1723</div>
1724<div class="member-description hidden">
1725
1726<div class="member-text">
1727 <p>The color the item is highlighted with when selected. If the item does
1728not specify its own color, the color defined by its layer is used instead.</p>
1729
1730
1731 <ul><b>Type:</b>
1732 <li>
1733 <a href="../classes/Color.html"><tt>Color</tt></a>
1734 </li>
1735 </ul>
1736
1737
1738</div>
1739
1740</div>
1741</div>
1742
1743
1744 <h3>Event Handlers</h3>
1745
1746<div id="onframe" class="member">
1747<div class="member-link">
1748<a name="onframe" href="#onframe"><tt><b>onFrame</b></tt></a>
1749</div>
1750<div class="member-description hidden">
1751
1752<div class="member-text">
1753 <p>Item level handler function to be called on each frame of an animation.</p>
1754<p>The function receives an event object which contains information about
1755the frame event:</p>
1756<p><b><tt>event.count</tt></b>: the number of times the frame event was
1757fired.</p>
1758<p><b><tt>event.time</tt></b>: the total amount of time passed since the
1759first frame event in seconds.</p>
1760<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last
1761frame event.</p>
1762
1763
1764 <ul><b>Type:</b>
1765 <li>
1766 <tt>Function</tt>
1767 </li>
1768 </ul>
1769
1770 <p><b>See also:</b>
1771 <tt><a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a></tt>
1772 </p>
1773
1774 <p>
1775<b>Example</b> &mdash; Creating an animation:
1776</p>
1777
1778<div class="paperscript split">
1779
1780<div class="buttons">
1781<div class="button run">Run</div>
1782</div>
1783
1784<script type="text/paperscript" canvas="canvas-21">
1785// Create a rectangle shaped path with its top left point at:
1786// {x: 50, y: 25} and a size of {width: 50, height: 50}
1787var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
1788path.fillColor = 'black';
1789
1790path.onFrame = function(event) {
1791 // Every frame, rotate the path by 3 degrees:
1792 this.rotate(3);
1793}
1794</script>
1795<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
1796</div>
1797
1798
1799</div>
1800
1801</div>
1802</div>
1803
1804
1805<div id="onmousedown" class="member">
1806<div class="member-link">
1807<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
1808</div>
1809<div class="member-description hidden">
1810
1811<div class="member-text">
1812 <p>The function to be called when the mouse button is pushed down on the
1813item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
1814information about the mouse event.</p>
1815
1816
1817 <ul><b>Type:</b>
1818 <li>
1819 <tt>Function</tt>
1820 </li>
1821 </ul>
1822
1823 <p>
1824<b>Example</b> &mdash; Press the mouse button down on the circle shaped path, to make it red:
1825</p>
1826
1827<div class="paperscript split">
1828
1829<div class="buttons">
1830<div class="button run">Run</div>
1831</div>
1832
1833<script type="text/paperscript" canvas="canvas-22">
1834// Create a circle shaped path at the center of the view:
1835var path = new Path.Circle({
1836 center: view.center,
1837 radius: 25,
1838 fillColor: 'black'
1839});
1840
1841// When the mouse is pressed on the item,
1842// set its fill color to red:
1843path.onMouseDown = function(event) {
1844 this.fillColor = 'red';
1845}
1846</script>
1847<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
1848</div>
1849
1850
1851<p>
1852<b>Example</b> &mdash; Press the mouse on the circle shaped paths to remove them:
1853</p>
1854
1855<div class="paperscript split">
1856
1857<div class="buttons">
1858<div class="button run">Run</div>
1859</div>
1860
1861<script type="text/paperscript" canvas="canvas-23">
1862// Loop 30 times:
1863for (var i = 0; i < 30; i++) {
1864 // Create a circle shaped path at a random position
1865 // in the view:
1866 var path = new Path.Circle({
1867 center: Point.random() * view.size,
1868 radius: 25,
1869 fillColor: 'black',
1870 strokeColor: 'white'
1871 });
1872
1873 // When the mouse is pressed on the item, remove it:
1874 path.onMouseDown = function(event) {
1875 this.remove();
1876 }
1877}
1878</script>
1879<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
1880</div>
1881
1882
1883</div>
1884
1885</div>
1886</div>
1887
1888
1889<div id="onmouseup" class="member">
1890<div class="member-link">
1891<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
1892</div>
1893<div class="member-description hidden">
1894
1895<div class="member-text">
1896 <p>The function to be called when the mouse button is released over the item.</p>
1897<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
1898information about the mouse event.</p>
1899
1900
1901 <ul><b>Type:</b>
1902 <li>
1903 <tt>Function</tt>
1904 </li>
1905 </ul>
1906
1907 <p>
1908<b>Example</b> &mdash; Release the mouse button over the circle shaped path, to make it red:
1909</p>
1910
1911<div class="paperscript split">
1912
1913<div class="buttons">
1914<div class="button run">Run</div>
1915</div>
1916
1917<script type="text/paperscript" canvas="canvas-24">
1918// Create a circle shaped path at the center of the view:
1919var path = new Path.Circle({
1920 center: view.center,
1921 radius: 25,
1922 fillColor: 'black'
1923});
1924
1925// When the mouse is released over the item,
1926// set its fill color to red:
1927path.onMouseUp = function(event) {
1928 this.fillColor = 'red';
1929}
1930</script>
1931<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
1932</div>
1933
1934
1935</div>
1936
1937</div>
1938</div>
1939
1940
1941<div id="onclick" class="member">
1942<div class="member-link">
1943<a name="onclick" href="#onclick"><tt><b>onClick</b></tt></a>
1944</div>
1945<div class="member-description hidden">
1946
1947<div class="member-text">
1948 <p>The function to be called when the mouse clicks on the item. The function
1949receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the
1950mouse event.</p>
1951
1952
1953 <ul><b>Type:</b>
1954 <li>
1955 <tt>Function</tt>
1956 </li>
1957 </ul>
1958
1959 <p>
1960<b>Example</b> &mdash; Click on the circle shaped path, to make it red:
1961</p>
1962
1963<div class="paperscript split">
1964
1965<div class="buttons">
1966<div class="button run">Run</div>
1967</div>
1968
1969<script type="text/paperscript" canvas="canvas-25">
1970// Create a circle shaped path at the center of the view:
1971var path = new Path.Circle({
1972 center: view.center,
1973 radius: 25,
1974 fillColor: 'black'
1975});
1976
1977// When the mouse is clicked on the item,
1978// set its fill color to red:
1979path.onClick = function(event) {
1980 this.fillColor = 'red';
1981}
1982</script>
1983<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
1984</div>
1985
1986
1987<p>
1988<b>Example</b> &mdash; Click on the circle shaped paths to remove them:
1989</p>
1990
1991<div class="paperscript split">
1992
1993<div class="buttons">
1994<div class="button run">Run</div>
1995</div>
1996
1997<script type="text/paperscript" canvas="canvas-26">
1998// Loop 30 times:
1999for (var i = 0; i < 30; i++) {
2000 // Create a circle shaped path at a random position
2001 // in the view:
2002 var path = new Path.Circle({
2003 center: Point.random() * view.size,
2004 radius: 25,
2005 fillColor: 'black',
2006 strokeColor: 'white'
2007 });
2008
2009 // When the mouse clicks on the item, remove it:
2010 path.onClick = function(event) {
2011 this.remove();
2012 }
2013}
2014</script>
2015<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
2016</div>
2017
2018
2019</div>
2020
2021</div>
2022</div>
2023
2024
2025<div id="ondoubleclick" class="member">
2026<div class="member-link">
2027<a name="ondoubleclick" href="#ondoubleclick"><tt><b>onDoubleClick</b></tt></a>
2028</div>
2029<div class="member-description hidden">
2030
2031<div class="member-text">
2032 <p>The function to be called when the mouse double clicks on the item. The
2033function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information
2034about the mouse event.</p>
2035
2036
2037 <ul><b>Type:</b>
2038 <li>
2039 <tt>Function</tt>
2040 </li>
2041 </ul>
2042
2043 <p>
2044<b>Example</b> &mdash; Double click on the circle shaped path, to make it red:
2045</p>
2046
2047<div class="paperscript split">
2048
2049<div class="buttons">
2050<div class="button run">Run</div>
2051</div>
2052
2053<script type="text/paperscript" canvas="canvas-27">
2054// Create a circle shaped path at the center of the view:
2055var path = new Path.Circle({
2056 center: view.center,
2057 radius: 25,
2058 fillColor: 'black'
2059});
2060
2061// When the mouse is double clicked on the item,
2062// set its fill color to red:
2063path.onDoubleClick = function(event) {
2064 this.fillColor = 'red';
2065}
2066</script>
2067<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
2068</div>
2069
2070
2071<p>
2072<b>Example</b> &mdash; Double click on the circle shaped paths to remove them:
2073</p>
2074
2075<div class="paperscript split">
2076
2077<div class="buttons">
2078<div class="button run">Run</div>
2079</div>
2080
2081<script type="text/paperscript" canvas="canvas-28">
2082// Loop 30 times:
2083for (var i = 0; i < 30; i++) {
2084 // Create a circle shaped path at a random position
2085 // in the view:
2086 var path = new Path.Circle({
2087 center: Point.random() * view.size,
2088 radius: 25,
2089 fillColor: 'black',
2090 strokeColor: 'white'
2091 });
2092
2093 // When the mouse is double clicked on the item, remove it:
2094 path.onDoubleClick = function(event) {
2095 this.remove();
2096 }
2097}
2098</script>
2099<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
2100</div>
2101
2102
2103</div>
2104
2105</div>
2106</div>
2107
2108
2109<div id="onmousemove" class="member">
2110<div class="member-link">
2111<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
2112</div>
2113<div class="member-description hidden">
2114
2115<div class="member-text">
2116 <p>The function to be called repeatedly when the mouse moves on top of the
2117item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
2118information about the mouse event.</p>
2119
2120
2121 <ul><b>Type:</b>
2122 <li>
2123 <tt>Function</tt>
2124 </li>
2125 </ul>
2126
2127 <p>
2128<b>Example</b> &mdash; Move over the circle shaped path, to change its opacity:
2129</p>
2130
2131<div class="paperscript split">
2132
2133<div class="buttons">
2134<div class="button run">Run</div>
2135</div>
2136
2137<script type="text/paperscript" canvas="canvas-29">
2138// Create a circle shaped path at the center of the view:
2139 var path = new Path.Circle({
2140 center: view.center,
2141 radius: 25,
2142 fillColor: 'black'
2143 });
2144
2145// When the mouse moves on top of the item, set its opacity
2146// to a random value between 0 and 1:
2147path.onMouseMove = function(event) {
2148 this.opacity = Math.random();
2149}
2150</script>
2151<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
2152</div>
2153
2154
2155</div>
2156
2157</div>
2158</div>
2159
2160
2161<div id="onmouseenter" class="member">
2162<div class="member-link">
2163<a name="onmouseenter" href="#onmouseenter"><tt><b>onMouseEnter</b></tt></a>
2164</div>
2165<div class="member-description hidden">
2166
2167<div class="member-text">
2168 <p>The function to be called when the mouse moves over the item. This
2169function will only be called again, once the mouse moved outside of the
2170item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which
2171contains information about the mouse event.</p>
2172
2173
2174 <ul><b>Type:</b>
2175 <li>
2176 <tt>Function</tt>
2177 </li>
2178 </ul>
2179
2180 <p>
2181<b>Example</b> &mdash; When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.
2182</p>
2183
2184<div class="paperscript split">
2185
2186<div class="buttons">
2187<div class="button run">Run</div>
2188</div>
2189
2190<script type="text/paperscript" canvas="canvas-30">
2191// Create a circle shaped path at the center of the view:
2192var path = new Path.Circle({
2193 center: view.center,
2194 radius: 25,
2195 fillColor: 'black'
2196});
2197
2198// When the mouse enters the item, set its fill color to red:
2199path.onMouseEnter = function(event) {
2200 this.fillColor = 'red';
2201}
2202
2203// When the mouse leaves the item, set its fill color to black:
2204path.onMouseLeave = function(event) {
2205 this.fillColor = 'black';
2206}
2207</script>
2208<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
2209</div>
2210
2211
2212<p>
2213<b>Example</b> &mdash; When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.
2214</p>
2215
2216<div class="paperscript split">
2217
2218<div class="buttons">
2219<div class="button run">Run</div>
2220</div>
2221
2222<script type="text/paperscript" canvas="canvas-31">
2223function enter(event) {
2224 this.fillColor = 'red';
2225}
2226
2227function leave(event) {
2228 this.fillColor = 'black';
2229}
2230
2231// When the mouse is pressed:
2232function onMouseDown(event) {
2233 // Create a circle shaped path at the position of the mouse:
2234 var path = new Path.Circle(event.point, 25);
2235 path.fillColor = 'black';
2236
2237 // When the mouse enters the item, set its fill color to red:
2238 path.onMouseEnter = enter;
2239
2240 // When the mouse leaves the item, set its fill color to black:
2241 path.onMouseLeave = leave;
2242}
2243</script>
2244<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
2245</div>
2246
2247
2248</div>
2249
2250</div>
2251</div>
2252
2253
2254<div id="onmouseleave" class="member">
2255<div class="member-link">
2256<a name="onmouseleave" href="#onmouseleave"><tt><b>onMouseLeave</b></tt></a>
2257</div>
2258<div class="member-description hidden">
2259
2260<div class="member-text">
2261 <p>The function to be called when the mouse moves out of the item.</p>
2262<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
2263information about the mouse event.</p>
2264
2265
2266 <ul><b>Type:</b>
2267 <li>
2268 <tt>Function</tt>
2269 </li>
2270 </ul>
2271
2272 <p>
2273<b>Example</b> &mdash; Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:
2274</p>
2275
2276<div class="paperscript split">
2277
2278<div class="buttons">
2279<div class="button run">Run</div>
2280</div>
2281
2282<script type="text/paperscript" canvas="canvas-32">
2283// Create a circle shaped path at the center of the view:
2284var path = new Path.Circle({
2285 center: view.center,
2286 radius: 25,
2287 fillColor: 'black'
2288});
2289
2290// When the mouse leaves the item, set its fill color to red:
2291path.onMouseLeave = function(event) {
2292 this.fillColor = 'red';
2293}
2294</script>
2295<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
2296</div>
2297
2298
2299</div>
2300
2301</div>
2302</div>
2303
2304</div>
2305
2306
2307<!-- =========================== inherited methods ========================= -->
2308<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
2309
2310
2311<div id="set-props" class="member">
2312<div class="member-link">
2313<a name="set-props" href="#set-props"><tt><b>set</b>(props)</tt></a>
2314</div>
2315<div class="member-description hidden">
2316<div class="member-text">
2317 <p>Sets those properties of the passed object literal on this item to
2318the values defined in the object literal, if the item has property of the
2319given name (or a setter defined for it).</p>
2320
2321<ul><b>Parameters:</b>
2322
2323<li>
2324<tt>props:</tt>
2325<tt>Object</tt>
2326
2327
2328</li>
2329
2330</ul>
2331
2332
2333 <ul><b>Returns:</b>
2334
2335 <li>
2336<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the item itself.
2337</li>
2338
2339 </ul>
2340
2341
2342 <p>
2343<b>Example</b> &mdash; Setting properties through an object literal
2344</p>
2345
2346<div class="paperscript split">
2347
2348<div class="buttons">
2349<div class="button run">Run</div>
2350</div>
2351
2352<script type="text/paperscript" canvas="canvas-33">
2353var circle = new Path.Circle({
2354 center: [80, 50],
2355 radius: 35
2356});
2357
2358circle.set({
2359 strokeColor: 'red',
2360 strokeWidth: 10,
2361 fillColor: 'black',
2362 selected: true
2363});
2364</script>
2365<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
2366</div>
2367
2368
2369</div>
2370</div>
2371</div>
2372
2373
2374<div id="isinserted" class="member">
2375<div class="member-link">
2376<a name="isinserted" href="#isinserted"><tt><b>isInserted</b>()</tt></a>
2377</div>
2378<div class="member-description hidden">
2379<div class="member-text">
2380 <p>Checks whether the item and all its parents are inserted into the DOM or
2381not.</p>
2382
2383
2384 <ul><b>Returns:</b>
2385
2386 <li>
2387<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is inserted into the DOM, <tt>false</tt> otherwise
2388</li>
2389
2390 </ul>
2391
2392
2393
2394</div>
2395</div>
2396</div>
2397
2398
2399<div id="clone" class="member">
2400<div class="member-link">
2401<a name="clone" href="#clone"><tt><b>clone</b>([insert])</tt></a>
2402</div>
2403<div class="member-description hidden">
2404<div class="member-text">
2405 <p>Clones the item within the same project and places the copy above the
2406item.</p>
2407
2408<ul><b>Parameters:</b>
2409
2410<li>
2411<tt>insert:</tt>
2412<tt>Boolean</tt>
2413&mdash;&nbsp;specifies whether the copy should be
2414inserted into the DOM. When set to <tt>true</tt>, it is inserted above the
2415original.
2416&mdash;&nbsp;optional, default: <tt>true</tt>
2417</li>
2418
2419</ul>
2420
2421
2422 <ul><b>Returns:</b>
2423
2424 <li>
2425<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
2426</li>
2427
2428 </ul>
2429
2430
2431 <p>
2432<b>Example</b> &mdash; Cloning items:
2433</p>
2434
2435<div class="paperscript split">
2436
2437<div class="buttons">
2438<div class="button run">Run</div>
2439</div>
2440
2441<script type="text/paperscript" canvas="canvas-34">
2442var circle = new Path.Circle({
2443 center: [50, 50],
2444 radius: 10,
2445 fillColor: 'red'
2446});
2447
2448// Make 20 copies of the circle:
2449for (var i = 0; i < 20; i++) {
2450 var copy = circle.clone();
2451
2452 // Distribute the copies horizontally, so we can see them:
2453 copy.position.x += i * copy.bounds.width;
2454}
2455</script>
2456<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
2457</div>
2458
2459
2460</div>
2461</div>
2462</div>
2463
2464
2465<div id="copyto-item" class="member">
2466<div class="member-link">
2467<a name="copyto-item" href="#copyto-item"><tt><b>copyTo</b>(item)</tt></a>
2468</div>
2469<div class="member-description hidden">
2470<div class="member-text">
2471 <p>When passed a project, copies the item to the project,
2472or duplicates it within the same project. When passed an item,
2473copies the item into the specified item.</p>
2474
2475<ul><b>Parameters:</b>
2476
2477<li>
2478<tt>item:</tt>
2479<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
2480&mdash;&nbsp;the item or project to
2481copy the item to
2482
2483</li>
2484
2485</ul>
2486
2487
2488 <ul><b>Returns:</b>
2489
2490 <li>
2491<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
2492</li>
2493
2494 </ul>
2495
2496
2497
2498</div>
2499</div>
2500</div>
2501
2502
2503<div id="rasterize" class="member">
2504<div class="member-link">
2505<a name="rasterize" href="#rasterize"><tt><b>rasterize</b>([resolution])</tt></a>
2506</div>
2507<div class="member-description hidden">
2508<div class="member-text">
2509 <p>Rasterizes the item into a newly created Raster object. The item itself
2510is not removed after rasterization.</p>
2511
2512<ul><b>Parameters:</b>
2513
2514<li>
2515<tt>resolution:</tt>
2516<tt>Number</tt>
2517&mdash;&nbsp;the resolution of the raster in dpi
2518&mdash;&nbsp;optional, default: <tt>72</tt>
2519</li>
2520
2521</ul>
2522
2523
2524 <ul><b>Returns:</b>
2525
2526 <li>
2527<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
2528</li>
2529
2530 </ul>
2531
2532
2533 <p>
2534<b>Example</b> &mdash; Rasterizing an item:
2535</p>
2536
2537<div class="paperscript split">
2538
2539<div class="buttons">
2540<div class="button run">Run</div>
2541</div>
2542
2543<script type="text/paperscript" canvas="canvas-35">
2544var circle = new Path.Circle({
2545 center: [50, 50],
2546 radius: 5,
2547 fillColor: 'red'
2548});
2549
2550// Create a rasterized version of the path:
2551var raster = circle.rasterize();
2552
2553// Move it 100pt to the right:
2554raster.position.x += 100;
2555
2556// Scale the path and the raster by 300%, so we can compare them:
2557circle.scale(5);
2558raster.scale(5);
2559</script>
2560<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
2561</div>
2562
2563
2564</div>
2565</div>
2566</div>
2567
2568
2569<div id="contains-point" class="member">
2570<div class="member-link">
2571<a name="contains-point" href="#contains-point"><tt><b>contains</b>(point)</tt></a>
2572</div>
2573<div class="member-description hidden">
2574<div class="member-text">
2575 <p>Checks whether the item's geometry contains the given point.</p>
2576
2577<ul><b>Parameters:</b>
2578
2579<li>
2580<tt>point:</tt>
2581<a href="../classes/Point.html"><tt>Point</tt></a>
2582&mdash;&nbsp;The point to check for.
2583
2584</li>
2585
2586</ul>
2587
2588
2589
2590 <p>
2591<b>Example</b> &mdash; Click within and outside the star below Create a star shaped path:
2592</p>
2593
2594<div class="paperscript split">
2595
2596<div class="buttons">
2597<div class="button run">Run</div>
2598</div>
2599
2600<script type="text/paperscript" canvas="canvas-36">
2601var path = new Path.Star({
2602 center: [50, 50],
2603 points: 12,
2604 radius1: 20,
2605 radius2: 40,
2606 fillColor: 'black'
2607});
2608
2609// Whenever the user presses the mouse:
2610function onMouseDown(event) {
2611 // If the position of the mouse is within the path,
2612 // set its fill color to red, otherwise set it to
2613 // black:
2614 if (path.contains(event.point)) {
2615 path.fillColor = 'red';
2616 } else {
2617 path.fillColor = 'black';
2618 }
2619}
2620</script>
2621<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
2622</div>
2623
2624
2625</div>
2626</div>
2627</div>
2628
2629
2630<div id="hittest-point" class="member">
2631<div class="member-link">
2632<a name="hittest-point" href="#hittest-point"><tt><b>hitTest</b>(point[, options])</tt></a>
2633</div>
2634<div class="member-description hidden">
2635<div class="member-text">
2636 <p>Perform a hit test on the item (and its children, if it is a
2637<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
2638<p>The options object allows you to control the specifics of the hit test
2639and may contain a combination of the following values:</p>
2640<p><b>options.tolerance:</b> <tt>Number</tt> – the tolerance of the hit test
2641in points. Can also be controlled through
2642<a href="../classes/Project.html#options"><tt>project.options</tt></a><tt>.hitTolerance</tt>.</p>
2643<p><b>options.type:</b> Only hit test again a certain item
2644type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
2645<p><b>options.fill:</b> <tt>Boolean</tt> – hit test the fill of items.</p>
2646<p><b>options.stroke:</b> <tt>Boolean</tt> – hit test the curves of path
2647items, taking into account stroke width.</p>
2648<p><b>options.segment:</b> <tt>Boolean</tt> – hit test for
2649<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
2650<p><b>options.handles:</b> <tt>Boolean</tt> – hit test for the handles
2651(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
2652<p><b>options.ends:</b> <tt>Boolean</tt> – only hit test for the first or
2653last segment points of open path items.</p>
2654<p><b>options.bounds:</b> <tt>Boolean</tt> – hit test the corners and
2655side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
2656<p><b>options.center:</b> <tt>Boolean</tt> – hit test the
2657<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
2658(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
2659<p><b>options.guides:</b> <tt>Boolean</tt> – hit test items that have
2660<tt>Item#guide</tt> set to <tt>true</tt>.</p>
2661<p><b>options.selected:</b> <tt>Boolean</tt> – only hit selected items.<b</p>
2662
2663<ul><b>Parameters:</b>
2664
2665<li>
2666<tt>point:</tt>
2667<a href="../classes/Point.html"><tt>Point</tt></a>
2668&mdash;&nbsp;The point where the hit test should be performed
2669
2670</li>
2671
2672<li>
2673<tt>options:</tt>
2674<tt>Object</tt>
2675
2676&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
2677tolerance: 2 }</tt>
2678</li>
2679
2680</ul>
2681
2682
2683 <ul><b>Returns:</b>
2684
2685 <li>
2686<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;a hit result object that contains more
2687information about what exactly was hit or <tt>null</tt> if nothing was
2688hit
2689</li>
2690
2691 </ul>
2692
2693
2694
2695</div>
2696</div>
2697</div>
2698
2699
2700<h3>Importing / Exporting JSON and SVG</h3>
2701
2702<div id="exportjson" class="member">
2703<div class="member-link">
2704<a name="exportjson" href="#exportjson"><tt><b>exportJSON</b>([options])</tt></a>
2705</div>
2706<div class="member-description hidden">
2707<div class="member-text">
2708 <p>Exports (serializes) the item with its content and child items to a JSON
2709data string.</p>
2710<p>The options object offers control over some aspects of the SVG export:</p>
2711<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
2712digits in numbers used in JSON data.</p>
2713
2714<ul><b>Parameters:</b>
2715
2716<li>
2717<tt>options:</tt>
2718<tt>Object</tt>
2719&mdash;&nbsp;the serialization options
2720&mdash;&nbsp;optional, default: <tt>{ precision: 5 }</tt>
2721</li>
2722
2723</ul>
2724
2725
2726 <ul><b>Returns:</b>
2727
2728 <li>
2729<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;the exported JSON data
2730</li>
2731
2732 </ul>
2733
2734
2735
2736</div>
2737</div>
2738</div>
2739
2740
2741<div id="importjson-json" class="member">
2742<div class="member-link">
2743<a name="importjson-json" href="#importjson-json"><tt><b>importJSON</b>(json)</tt></a>
2744</div>
2745<div class="member-description hidden">
2746<div class="member-text">
2747 <p>Imports (deserializes) the stored JSON data into this item. If the data
2748describes an item of the same class or a parent class of the item, the
2749data is imported into the item itself. If not, the imported item is added
2750to this item's <a href="../classes/Item.html#children"><tt>item.children</tt></a> list. Note that not all type of
2751items can have children.</p>
2752
2753<ul><b>Parameters:</b>
2754
2755<li>
2756<tt>json:</tt>
2757<tt>String</tt>
2758&mdash;&nbsp;the JSON data to import from.
2759
2760</li>
2761
2762</ul>
2763
2764
2765
2766
2767</div>
2768</div>
2769</div>
2770
2771
2772<div id="exportsvg" class="member">
2773<div class="member-link">
2774<a name="exportsvg" href="#exportsvg"><tt><b>exportSVG</b>([options])</tt></a>
2775</div>
2776<div class="member-description hidden">
2777<div class="member-text">
2778 <p>Exports the item with its content and child items as an SVG DOM.</p>
2779<p>The options object offers control over some aspects of the SVG export:</p>
2780<p><b>options.asString:</b> <tt>Boolean</tt> – wether a SVG node or a String
2781is to be returned.</p>
2782<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
2783digits in numbers used in SVG data.</p>
2784<p><b>options.matchShapes:</b> <tt>Boolean</tt> – wether imported path
2785items should tried to be converted to shape items, if their geometries
2786match.</p>
2787
2788<ul><b>Parameters:</b>
2789
2790<li>
2791<tt>options:</tt>
2792<tt>Object</tt>
2793&mdash;&nbsp;the export options.
2794&mdash;&nbsp;optional, default: <tt>{ asString: false, precision: 5,
2795matchShapes: false }</tt>
2796</li>
2797
2798</ul>
2799
2800
2801 <ul><b>Returns:</b>
2802
2803 <li>
2804<tt><tt>SVGSVGElement</tt></tt>&nbsp;&mdash;&nbsp;the item converted to an SVG node
2805</li>
2806
2807 </ul>
2808
2809
2810
2811</div>
2812</div>
2813</div>
2814
2815
2816<div id="importsvg-svg" class="member">
2817<div class="member-link">
2818<a name="importsvg-svg" href="#importsvg-svg"><tt><b>importSVG</b>(svg[, options])</tt></a>
2819</div>
2820<div class="member-description hidden">
2821<div class="member-text">
2822 <p>Converts the provided SVG content into Paper.js items and adds them to
2823the this item's children list.</p>
2824<p>Note that the item is not cleared first. You can call
2825<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
2826<p>The options object offers control over some aspects of the SVG import:</p>
2827<p><b>options.expandShapes:</b> <tt>Boolean</tt> – wether imported shape
2828items should be expanded to path items.</p>
2829
2830<ul><b>Parameters:</b>
2831
2832<li>
2833<tt>svg:</tt>
2834<tt>SVGSVGElement</tt> / <tt>String</tt>
2835&mdash;&nbsp;the SVG content to import
2836
2837</li>
2838
2839<li>
2840<tt>options:</tt>
2841<tt>Object</tt>
2842&mdash;&nbsp;the import options
2843&mdash;&nbsp;optional, default: <tt>{ expandShapes: false }</tt>
2844</li>
2845
2846</ul>
2847
2848
2849 <ul><b>Returns:</b>
2850
2851 <li>
2852<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the imported Paper.js parent item
2853</li>
2854
2855 </ul>
2856
2857
2858
2859</div>
2860</div>
2861</div>
2862
2863
2864<h3>Hierarchy Operations</h3>
2865
2866<div id="addchild-item-_preserve" class="member">
2867<div class="member-link">
2868<a name="addchild-item-_preserve" href="#addchild-item-_preserve"><tt><b>addChild</b>(item)</tt></a>
2869</div>
2870<div class="member-description hidden">
2871<div class="member-text">
2872 <p>Adds the specified item as a child of this item at the end of the
2873its children list. You can use this function for groups, compound
2874paths and layers.</p>
2875
2876<ul><b>Parameters:</b>
2877
2878<li>
2879<tt>item:</tt>
2880<a href="../classes/Item.html"><tt>Item</tt></a>
2881&mdash;&nbsp;the item to be added as a child
2882
2883</li>
2884
2885</ul>
2886
2887
2888 <ul><b>Returns:</b>
2889
2890 <li>
2891<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the added item, or <tt>null</tt> if adding was not
2892possible.
2893</li>
2894
2895 </ul>
2896
2897
2898
2899</div>
2900</div>
2901</div>
2902
2903
2904<div id="insertchild-index-item-_preserve" class="member">
2905<div class="member-link">
2906<a name="insertchild-index-item-_preserve" href="#insertchild-index-item-_preserve"><tt><b>insertChild</b>(index, item)</tt></a>
2907</div>
2908<div class="member-description hidden">
2909<div class="member-text">
2910 <p>Inserts the specified item as a child of this item at the specified
2911index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
2912groups, compound paths and layers.</p>
2913
2914<ul><b>Parameters:</b>
2915
2916<li>
2917<tt>index:</tt>
2918<tt>Number</tt>
2919
2920
2921</li>
2922
2923<li>
2924<tt>item:</tt>
2925<a href="../classes/Item.html"><tt>Item</tt></a>
2926&mdash;&nbsp;the item to be inserted as a child
2927
2928</li>
2929
2930</ul>
2931
2932
2933 <ul><b>Returns:</b>
2934
2935 <li>
2936<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the inserted item, or <tt>null</tt> if inserting was not
2937possible.
2938</li>
2939
2940 </ul>
2941
2942
2943
2944</div>
2945</div>
2946</div>
2947
2948
2949<div id="addchildren-items-_preserve" class="member">
2950<div class="member-link">
2951<a name="addchildren-items-_preserve" href="#addchildren-items-_preserve"><tt><b>addChildren</b>(items)</tt></a>
2952</div>
2953<div class="member-description hidden">
2954<div class="member-text">
2955 <p>Adds the specified items as children of this item at the end of the
2956its children list. You can use this function for groups, compound
2957paths and layers.</p>
2958
2959<ul><b>Parameters:</b>
2960
2961<li>
2962<tt>items:</tt>
2963Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
2964&mdash;&nbsp;The items to be added as children
2965
2966</li>
2967
2968</ul>
2969
2970
2971 <ul><b>Returns:</b>
2972
2973 <li>
2974<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the added items, or <tt>null</tt> if adding was not
2975possible.
2976</li>
2977
2978 </ul>
2979
2980
2981
2982</div>
2983</div>
2984</div>
2985
2986
2987<div id="insertchildren-index-items-_preserve-_type" class="member">
2988<div class="member-link">
2989<a name="insertchildren-index-items-_preserve-_type" href="#insertchildren-index-items-_preserve-_type"><tt><b>insertChildren</b>(index, items)</tt></a>
2990</div>
2991<div class="member-description hidden">
2992<div class="member-text">
2993 <p>Inserts the specified items as children of this item at the specified
2994index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
2995groups, compound paths and layers.</p>
2996
2997<ul><b>Parameters:</b>
2998
2999<li>
3000<tt>index:</tt>
3001<tt>Number</tt>
3002
3003
3004</li>
3005
3006<li>
3007<tt>items:</tt>
3008Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
3009&mdash;&nbsp;The items to be appended as children
3010
3011</li>
3012
3013</ul>
3014
3015
3016 <ul><b>Returns:</b>
3017
3018 <li>
3019<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the inserted items, or <tt>null</tt> if inserted was not
3020possible.
3021</li>
3022
3023 </ul>
3024
3025
3026
3027</div>
3028</div>
3029</div>
3030
3031
3032<div id="insertabove-item-_preserve" class="member">
3033<div class="member-link">
3034<a name="insertabove-item-_preserve" href="#insertabove-item-_preserve"><tt><b>insertAbove</b>(item)</tt></a>
3035</div>
3036<div class="member-description hidden">
3037<div class="member-text">
3038 <p>Inserts this item above the specified item.</p>
3039
3040<ul><b>Parameters:</b>
3041
3042<li>
3043<tt>item:</tt>
3044<a href="../classes/Item.html"><tt>Item</tt></a>
3045&mdash;&nbsp;the item above which it should be inserted
3046
3047</li>
3048
3049</ul>
3050
3051
3052 <ul><b>Returns:</b>
3053
3054 <li>
3055<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the inserted item, or <tt>null</tt> if inserting was not
3056possible.
3057</li>
3058
3059 </ul>
3060
3061
3062
3063</div>
3064</div>
3065</div>
3066
3067
3068<div id="insertbelow-item-_preserve" class="member">
3069<div class="member-link">
3070<a name="insertbelow-item-_preserve" href="#insertbelow-item-_preserve"><tt><b>insertBelow</b>(item)</tt></a>
3071</div>
3072<div class="member-description hidden">
3073<div class="member-text">
3074 <p>Inserts this item below the specified item.</p>
3075
3076<ul><b>Parameters:</b>
3077
3078<li>
3079<tt>item:</tt>
3080<a href="../classes/Item.html"><tt>Item</tt></a>
3081&mdash;&nbsp;the item above which it should be inserted
3082
3083</li>
3084
3085</ul>
3086
3087
3088 <ul><b>Returns:</b>
3089
3090 <li>
3091<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the inserted item, or <tt>null</tt> if inserting was not
3092possible.
3093</li>
3094
3095 </ul>
3096
3097
3098
3099</div>
3100</div>
3101</div>
3102
3103
3104<div id="sendtoback" class="member">
3105<div class="member-link">
3106<a name="sendtoback" href="#sendtoback"><tt><b>sendToBack</b>()</tt></a>
3107</div>
3108<div class="member-description hidden">
3109<div class="member-text">
3110 <p>Sends this item to the back of all other items within the same parent.</p>
3111
3112
3113
3114
3115</div>
3116</div>
3117</div>
3118
3119
3120<div id="bringtofront" class="member">
3121<div class="member-link">
3122<a name="bringtofront" href="#bringtofront"><tt><b>bringToFront</b>()</tt></a>
3123</div>
3124<div class="member-description hidden">
3125<div class="member-text">
3126 <p>Brings this item to the front of all other items within the same parent.</p>
3127
3128
3129
3130
3131</div>
3132</div>
3133</div>
3134
3135
3136<div id="appendbottom-item" class="member">
3137<div class="member-link">
3138<a name="appendbottom-item" href="#appendbottom-item"><tt><b>appendBottom</b>(item)</tt></a>
3139</div>
3140<div class="member-description hidden">
3141<div class="member-text">
3142 <p>Inserts the specified item as a child of this item by appending it to
3143the list of children and moving it below all other children. You can
3144use this function for groups, compound paths and layers.</p>
3145
3146<ul><b>Parameters:</b>
3147
3148<li>
3149<tt>item:</tt>
3150<a href="../classes/Item.html"><tt>Item</tt></a>
3151&mdash;&nbsp;The item to be appended as a child
3152
3153</li>
3154
3155</ul>
3156
3157
3158
3159
3160</div>
3161</div>
3162</div>
3163
3164
3165<div id="reduce" class="member">
3166<div class="member-link">
3167<a name="reduce" href="#reduce"><tt><b>reduce</b>()</tt></a>
3168</div>
3169<div class="member-description hidden">
3170<div class="member-text">
3171 <p>If this is a group, layer or compound-path with only one child-item,
3172the child-item is moved outside and the parent is erased. Otherwise, the
3173item itself is returned unmodified.</p>
3174
3175
3176 <ul><b>Returns:</b>
3177
3178 <li>
3179<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the reduced item
3180</li>
3181
3182 </ul>
3183
3184
3185
3186</div>
3187</div>
3188</div>
3189
3190
3191<div id="remove" class="member">
3192<div class="member-link">
3193<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
3194</div>
3195<div class="member-description hidden">
3196<div class="member-text">
3197 <p>Removes the item from the project. If the item has children, they are also
3198removed.</p>
3199
3200
3201 <ul><b>Returns:</b>
3202
3203 <li>
3204<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
3205</li>
3206
3207 </ul>
3208
3209
3210
3211</div>
3212</div>
3213</div>
3214
3215
3216<div id="removechildren" class="member">
3217<div class="member-link">
3218<a name="removechildren" href="#removechildren"><tt><b>removeChildren</b>()</tt></a>
3219</div>
3220<div class="member-description hidden">
3221<div class="member-text">
3222 <p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
3223
3224
3225 <ul><b>Returns:</b>
3226
3227 <li>
3228<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
3229</li>
3230
3231 </ul>
3232
3233
3234
3235</div>
3236</div>
3237</div>
3238
3239
3240<div id="removechildren-from" class="member">
3241<div class="member-link">
3242<a name="removechildren-from" href="#removechildren-from"><tt><b>removeChildren</b>(from[, to])</tt></a>
3243</div>
3244<div class="member-description hidden">
3245<div class="member-text">
3246 <p>Removes the children from the specified <tt>from</tt> index to the
3247<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
3248
3249<ul><b>Parameters:</b>
3250
3251<li>
3252<tt>from:</tt>
3253<tt>Number</tt>
3254&mdash;&nbsp;the beginning index, inclusive
3255
3256</li>
3257
3258<li>
3259<tt>to:</tt>
3260<tt>Number</tt>
3261&mdash;&nbsp;the ending index, exclusive
3262&mdash;&nbsp;optional, default: <tt>children.length</tt>
3263</li>
3264
3265</ul>
3266
3267
3268 <ul><b>Returns:</b>
3269
3270 <li>
3271<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
3272</li>
3273
3274 </ul>
3275
3276
3277
3278</div>
3279</div>
3280</div>
3281
3282
3283<div id="reversechildren" class="member">
3284<div class="member-link">
3285<a name="reversechildren" href="#reversechildren"><tt><b>reverseChildren</b>()</tt></a>
3286</div>
3287<div class="member-description hidden">
3288<div class="member-text">
3289 <p>Reverses the order of the item's children</p>
3290
3291
3292
3293
3294</div>
3295</div>
3296</div>
3297
3298
3299<h3>Tests</h3>
3300
3301<div id="isempty" class="member">
3302<div class="member-link">
3303<a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
3304</div>
3305<div class="member-description hidden">
3306<div class="member-text">
3307 <p>Specifies whether the item has any content or not. The meaning of what
3308content is differs from type to type. For example, a <a href="../classes/Group.html"><tt>Group</tt></a> with
3309no children, a <a href="../classes/TextItem.html"><tt>TextItem</tt></a> with no text content and a <a href="../classes/Path.html"><tt>Path</tt></a>
3310with no segments all are considered empty.</p>
3311
3312
3313 <ul><b>Returns:</b>
3314
3315 <li>
3316<tt></tt>&nbsp;&mdash;&nbsp;Boolean
3317</li>
3318
3319 </ul>
3320
3321
3322
3323</div>
3324</div>
3325</div>
3326
3327
3328<h3>Hierarchy Tests</h3>
3329
3330<div id="haschildren" class="member">
3331<div class="member-link">
3332<a name="haschildren" href="#haschildren"><tt><b>hasChildren</b>()</tt></a>
3333</div>
3334<div class="member-description hidden">
3335<div class="member-text">
3336 <p>Checks if the item contains any children items.</p>
3337
3338
3339 <ul><b>Returns:</b>
3340
3341 <li>
3342<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
3343</li>
3344
3345 </ul>
3346
3347
3348
3349</div>
3350</div>
3351</div>
3352
3353
3354<div id="isabove-item" class="member">
3355<div class="member-link">
3356<a name="isabove-item" href="#isabove-item"><tt><b>isAbove</b>(item)</tt></a>
3357</div>
3358<div class="member-description hidden">
3359<div class="member-text">
3360 <p>Checks if this item is above the specified item in the stacking order
3361of the project.</p>
3362
3363<ul><b>Parameters:</b>
3364
3365<li>
3366<tt>item:</tt>
3367<a href="../classes/Item.html"><tt>Item</tt></a>
3368&mdash;&nbsp;The item to check against
3369
3370</li>
3371
3372</ul>
3373
3374
3375 <ul><b>Returns:</b>
3376
3377 <li>
3378<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
3379</li>
3380
3381 </ul>
3382
3383
3384
3385</div>
3386</div>
3387</div>
3388
3389
3390<div id="isbelow-item" class="member">
3391<div class="member-link">
3392<a name="isbelow-item" href="#isbelow-item"><tt><b>isBelow</b>(item)</tt></a>
3393</div>
3394<div class="member-description hidden">
3395<div class="member-text">
3396 <p>Checks if the item is below the specified item in the stacking order of
3397the project.</p>
3398
3399<ul><b>Parameters:</b>
3400
3401<li>
3402<tt>item:</tt>
3403<a href="../classes/Item.html"><tt>Item</tt></a>
3404&mdash;&nbsp;The item to check against
3405
3406</li>
3407
3408</ul>
3409
3410
3411 <ul><b>Returns:</b>
3412
3413 <li>
3414<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
3415</li>
3416
3417 </ul>
3418
3419
3420
3421</div>
3422</div>
3423</div>
3424
3425
3426<div id="isparent-item" class="member">
3427<div class="member-link">
3428<a name="isparent-item" href="#isparent-item"><tt><b>isParent</b>(item)</tt></a>
3429</div>
3430<div class="member-description hidden">
3431<div class="member-text">
3432 <p>Checks whether the specified item is the parent of the item.</p>
3433
3434<ul><b>Parameters:</b>
3435
3436<li>
3437<tt>item:</tt>
3438<a href="../classes/Item.html"><tt>Item</tt></a>
3439&mdash;&nbsp;The item to check against
3440
3441</li>
3442
3443</ul>
3444
3445
3446 <ul><b>Returns:</b>
3447
3448 <li>
3449<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
3450</li>
3451
3452 </ul>
3453
3454
3455
3456</div>
3457</div>
3458</div>
3459
3460
3461<div id="ischild-item" class="member">
3462<div class="member-link">
3463<a name="ischild-item" href="#ischild-item"><tt><b>isChild</b>(item)</tt></a>
3464</div>
3465<div class="member-description hidden">
3466<div class="member-text">
3467 <p>Checks whether the specified item is a child of the item.</p>
3468
3469<ul><b>Parameters:</b>
3470
3471<li>
3472<tt>item:</tt>
3473<a href="../classes/Item.html"><tt>Item</tt></a>
3474&mdash;&nbsp;The item to check against
3475
3476</li>
3477
3478</ul>
3479
3480
3481 <ul><b>Returns:</b>
3482
3483 <li>
3484<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
3485</li>
3486
3487 </ul>
3488
3489
3490
3491</div>
3492</div>
3493</div>
3494
3495
3496<div id="isdescendant-item" class="member">
3497<div class="member-link">
3498<a name="isdescendant-item" href="#isdescendant-item"><tt><b>isDescendant</b>(item)</tt></a>
3499</div>
3500<div class="member-description hidden">
3501<div class="member-text">
3502 <p>Checks if the item is contained within the specified item.</p>
3503
3504<ul><b>Parameters:</b>
3505
3506<li>
3507<tt>item:</tt>
3508<a href="../classes/Item.html"><tt>Item</tt></a>
3509&mdash;&nbsp;The item to check against
3510
3511</li>
3512
3513</ul>
3514
3515
3516 <ul><b>Returns:</b>
3517
3518 <li>
3519<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
3520</li>
3521
3522 </ul>
3523
3524
3525
3526</div>
3527</div>
3528</div>
3529
3530
3531<div id="isancestor-item" class="member">
3532<div class="member-link">
3533<a name="isancestor-item" href="#isancestor-item"><tt><b>isAncestor</b>(item)</tt></a>
3534</div>
3535<div class="member-description hidden">
3536<div class="member-text">
3537 <p>Checks if the item is an ancestor of the specified item.</p>
3538
3539<ul><b>Parameters:</b>
3540
3541<li>
3542<tt>item:</tt>
3543<a href="../classes/Item.html"><tt>Item</tt></a>
3544&mdash;&nbsp;the item to check against
3545
3546</li>
3547
3548</ul>
3549
3550
3551 <ul><b>Returns:</b>
3552
3553 <li>
3554<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
3555item, <tt>false</tt> otherwise
3556</li>
3557
3558 </ul>
3559
3560
3561
3562</div>
3563</div>
3564</div>
3565
3566
3567<div id="isgroupedwith-item" class="member">
3568<div class="member-link">
3569<a name="isgroupedwith-item" href="#isgroupedwith-item"><tt><b>isGroupedWith</b>(item)</tt></a>
3570</div>
3571<div class="member-description hidden">
3572<div class="member-text">
3573 <p>Checks whether the item is grouped with the specified item.</p>
3574
3575<ul><b>Parameters:</b>
3576
3577<li>
3578<tt>item:</tt>
3579<a href="../classes/Item.html"><tt>Item</tt></a>
3580
3581
3582</li>
3583
3584</ul>
3585
3586
3587 <ul><b>Returns:</b>
3588
3589 <li>
3590<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
3591</li>
3592
3593 </ul>
3594
3595
3596
3597</div>
3598</div>
3599</div>
3600
3601
3602<h3>Transform Functions</h3>
3603
3604<div id="scale-scale" class="member">
3605<div class="member-link">
3606<a name="scale-scale" href="#scale-scale"><tt><b>scale</b>(scale[, center])</tt></a>
3607</div>
3608<div class="member-description hidden">
3609<div class="member-text">
3610 <p>Scales the item by the given value from its center point, or optionally
3611from a supplied point.</p>
3612
3613<ul><b>Parameters:</b>
3614
3615<li>
3616<tt>scale:</tt>
3617<tt>Number</tt>
3618&mdash;&nbsp;the scale factor
3619
3620</li>
3621
3622<li>
3623<tt>center:</tt>
3624<a href="../classes/Point.html"><tt>Point</tt></a>
3625
3626&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
3627</li>
3628
3629</ul>
3630
3631
3632
3633 <p>
3634<b>Example</b> &mdash; Scaling an item from its center point:
3635</p>
3636
3637<div class="paperscript split">
3638
3639<div class="buttons">
3640<div class="button run">Run</div>
3641</div>
3642
3643<script type="text/paperscript" canvas="canvas-37">
3644// Create a circle shaped path at { x: 80, y: 50 }
3645// with a radius of 20:
3646var circle = new Path.Circle({
3647 center: [80, 50],
3648 radius: 20,
3649 fillColor: 'red'
3650});
3651
3652// Scale the path by 150% from its center point
3653circle.scale(1.5);
3654</script>
3655<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
3656</div>
3657
3658
3659<p>
3660<b>Example</b> &mdash; Scaling an item from a specific point:
3661</p>
3662
3663<div class="paperscript split">
3664
3665<div class="buttons">
3666<div class="button run">Run</div>
3667</div>
3668
3669<script type="text/paperscript" canvas="canvas-38">
3670// Create a circle shaped path at { x: 80, y: 50 }
3671// with a radius of 20:
3672var circle = new Path.Circle({
3673 center: [80, 50],
3674 radius: 20,
3675 fillColor: 'red'
3676});
3677
3678// Scale the path 150% from its bottom left corner
3679circle.scale(1.5, circle.bounds.bottomLeft);
3680</script>
3681<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
3682</div>
3683
3684
3685</div>
3686</div>
3687</div>
3688
3689
3690<div id="scale-hor-ver" class="member">
3691<div class="member-link">
3692<a name="scale-hor-ver" href="#scale-hor-ver"><tt><b>scale</b>(hor, ver[, center])</tt></a>
3693</div>
3694<div class="member-description hidden">
3695<div class="member-text">
3696 <p>Scales the item by the given values from its center point, or optionally
3697from a supplied point.</p>
3698
3699<ul><b>Parameters:</b>
3700
3701<li>
3702<tt>hor:</tt>
3703<tt>Number</tt>
3704&mdash;&nbsp;the horizontal scale factor
3705
3706</li>
3707
3708<li>
3709<tt>ver:</tt>
3710<tt>Number</tt>
3711&mdash;&nbsp;the vertical scale factor
3712
3713</li>
3714
3715<li>
3716<tt>center:</tt>
3717<a href="../classes/Point.html"><tt>Point</tt></a>
3718
3719&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
3720</li>
3721
3722</ul>
3723
3724
3725
3726 <p>
3727<b>Example</b> &mdash; Scaling an item horizontally by 300%:
3728</p>
3729
3730<div class="paperscript split">
3731
3732<div class="buttons">
3733<div class="button run">Run</div>
3734</div>
3735
3736<script type="text/paperscript" canvas="canvas-39">
3737// Create a circle shaped path at { x: 100, y: 50 }
3738// with a radius of 20:
3739var circle = new Path.Circle({
3740 center: [100, 50],
3741 radius: 20,
3742 fillColor: 'red'
3743});
3744
3745// Scale the path horizontally by 300%
3746circle.scale(3, 1);
3747</script>
3748<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
3749</div>
3750
3751
3752</div>
3753</div>
3754</div>
3755
3756
3757<div id="translate-delta" class="member">
3758<div class="member-link">
3759<a name="translate-delta" href="#translate-delta"><tt><b>translate</b>(delta)</tt></a>
3760</div>
3761<div class="member-description hidden">
3762<div class="member-text">
3763 <p>Translates (moves) the item by the given offset point.</p>
3764
3765<ul><b>Parameters:</b>
3766
3767<li>
3768<tt>delta:</tt>
3769<a href="../classes/Point.html"><tt>Point</tt></a>
3770&mdash;&nbsp;the offset to translate the item by
3771
3772</li>
3773
3774</ul>
3775
3776
3777
3778
3779</div>
3780</div>
3781</div>
3782
3783
3784<div id="rotate-angle" class="member">
3785<div class="member-link">
3786<a name="rotate-angle" href="#rotate-angle"><tt><b>rotate</b>(angle[, center])</tt></a>
3787</div>
3788<div class="member-description hidden">
3789<div class="member-text">
3790 <p>Rotates the item by a given angle around the given point.</p>
3791<p>Angles are oriented clockwise and measured in degrees.</p>
3792
3793<ul><b>Parameters:</b>
3794
3795<li>
3796<tt>angle:</tt>
3797<tt>Number</tt>
3798&mdash;&nbsp;the rotation angle
3799
3800</li>
3801
3802<li>
3803<tt>center:</tt>
3804<a href="../classes/Point.html"><tt>Point</tt></a>
3805
3806&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
3807</li>
3808
3809</ul>
3810
3811
3812
3813 <p><b>See also:</b>
3814 <tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
3815 </p>
3816
3817 <p>
3818<b>Example</b> &mdash; Rotating an item:
3819</p>
3820
3821<div class="paperscript split">
3822
3823<div class="buttons">
3824<div class="button run">Run</div>
3825</div>
3826
3827<script type="text/paperscript" canvas="canvas-40">
3828// Create a rectangle shaped path with its top left
3829// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
3830var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
3831path.fillColor = 'black';
3832
3833// Rotate the path by 30 degrees:
3834path.rotate(30);
3835</script>
3836<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
3837</div>
3838
3839
3840<p>
3841<b>Example</b> &mdash; Rotating an item around a specific point:
3842</p>
3843
3844<div class="paperscript split">
3845
3846<div class="buttons">
3847<div class="button run">Run</div>
3848</div>
3849
3850<script type="text/paperscript" canvas="canvas-41">
3851// Create a rectangle shaped path with its top left
3852// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
3853var topLeft = new Point(175, 50);
3854var size = new Size(100, 100);
3855var path = new Path.Rectangle(topLeft, size);
3856path.fillColor = 'black';
3857
3858// Draw a circle shaped path in the center of the view,
3859// to show the rotation point:
3860var circle = new Path.Circle({
3861 center: view.center,
3862 radius: 5,
3863 fillColor: 'white'
3864});
3865
3866// Each frame rotate the path 3 degrees around the center point
3867// of the view:
3868function onFrame(event) {
3869 path.rotate(3, view.center);
3870}
3871</script>
3872<div class="canvas"><canvas width="516" height="200" id="canvas-41"></canvas></div>
3873</div>
3874
3875
3876</div>
3877</div>
3878</div>
3879
3880
3881<div id="shear-point" class="member">
3882<div class="member-link">
3883<a name="shear-point" href="#shear-point"><tt><b>shear</b>(point[, center])</tt></a>
3884</div>
3885<div class="member-description hidden">
3886<div class="member-text">
3887 <p>Shears the item by the given value from its center point, or optionally
3888by a supplied point.</p>
3889
3890<ul><b>Parameters:</b>
3891
3892<li>
3893<tt>point:</tt>
3894<a href="../classes/Point.html"><tt>Point</tt></a>
3895
3896
3897</li>
3898
3899<li>
3900<tt>center:</tt>
3901<a href="../classes/Point.html"><tt>Point</tt></a>
3902
3903&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
3904</li>
3905
3906</ul>
3907
3908
3909
3910 <p><b>See also:</b>
3911 <tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
3912 </p>
3913
3914
3915</div>
3916</div>
3917</div>
3918
3919
3920<div id="shear-hor-ver" class="member">
3921<div class="member-link">
3922<a name="shear-hor-ver" href="#shear-hor-ver"><tt><b>shear</b>(hor, ver[, center])</tt></a>
3923</div>
3924<div class="member-description hidden">
3925<div class="member-text">
3926 <p>Shears the item by the given values from its center point, or optionally
3927by a supplied point.</p>
3928
3929<ul><b>Parameters:</b>
3930
3931<li>
3932<tt>hor:</tt>
3933<tt>Number</tt>
3934&mdash;&nbsp;the horizontal shear factor.
3935
3936</li>
3937
3938<li>
3939<tt>ver:</tt>
3940<tt>Number</tt>
3941&mdash;&nbsp;the vertical shear factor.
3942
3943</li>
3944
3945<li>
3946<tt>center:</tt>
3947<a href="../classes/Point.html"><tt>Point</tt></a>
3948
3949&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
3950</li>
3951
3952</ul>
3953
3954
3955
3956 <p><b>See also:</b>
3957 <tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
3958 </p>
3959
3960
3961</div>
3962</div>
3963</div>
3964
3965
3966<div id="transform-matrix" class="member">
3967<div class="member-link">
3968<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
3969</div>
3970<div class="member-description hidden">
3971<div class="member-text">
3972 <p>Transform the item.</p>
3973
3974<ul><b>Parameters:</b>
3975
3976<li>
3977<tt>matrix:</tt>
3978<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
3979&mdash;&nbsp;the matrix by which the item shall be transformed.
3980
3981</li>
3982
3983</ul>
3984
3985
3986
3987
3988</div>
3989</div>
3990</div>
3991
3992
3993<div id="globaltolocal-point" class="member">
3994<div class="member-link">
3995<a name="globaltolocal-point" href="#globaltolocal-point"><tt><b>globalToLocal</b>(point)</tt></a>
3996</div>
3997<div class="member-description hidden">
3998<div class="member-text">
3999 <p>Converts the specified point from global project coordinates to local
4000coordinates in relation to the the item's own coordinate space.</p>
4001
4002<ul><b>Parameters:</b>
4003
4004<li>
4005<tt>point:</tt>
4006<a href="../classes/Point.html"><tt>Point</tt></a>
4007&mdash;&nbsp;the point to be transformed
4008
4009</li>
4010
4011</ul>
4012
4013
4014 <ul><b>Returns:</b>
4015
4016 <li>
4017<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the transformed point as a new instance
4018</li>
4019
4020 </ul>
4021
4022
4023
4024</div>
4025</div>
4026</div>
4027
4028
4029<div id="localtoglobal-point" class="member">
4030<div class="member-link">
4031<a name="localtoglobal-point" href="#localtoglobal-point"><tt><b>localToGlobal</b>(point)</tt></a>
4032</div>
4033<div class="member-description hidden">
4034<div class="member-text">
4035 <p>Converts the specified point from local coordinates to global coordinates
4036in relation to the the project coordinate space.</p>
4037
4038<ul><b>Parameters:</b>
4039
4040<li>
4041<tt>point:</tt>
4042<a href="../classes/Point.html"><tt>Point</tt></a>
4043&mdash;&nbsp;the point to be transformed
4044
4045</li>
4046
4047</ul>
4048
4049
4050 <ul><b>Returns:</b>
4051
4052 <li>
4053<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the transformed point as a new instance
4054</li>
4055
4056 </ul>
4057
4058
4059
4060</div>
4061</div>
4062</div>
4063
4064
4065<div id="fitbounds-rectangle" class="member">
4066<div class="member-link">
4067<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
4068</div>
4069<div class="member-description hidden">
4070<div class="member-text">
4071 <p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
4072rectangle, without changing its aspect ratio.</p>
4073
4074<ul><b>Parameters:</b>
4075
4076<li>
4077<tt>rectangle:</tt>
4078<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
4079
4080
4081</li>
4082
4083<li>
4084<tt>fill:</tt>
4085<tt>Boolean</tt>
4086
4087&mdash;&nbsp;optional, default: <tt>false</tt>
4088</li>
4089
4090</ul>
4091
4092
4093
4094 <p>
4095<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
4096</p>
4097
4098<div class="paperscript split">
4099
4100<div class="buttons">
4101<div class="button run">Run</div>
4102</div>
4103
4104<script type="text/paperscript" canvas="canvas-42">
4105// Create a rectangle shaped path with its top left corner
4106// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
4107var path = new Path.Rectangle({
4108 point: [80, 25],
4109 size: [75, 50],
4110 fillColor: 'black'
4111});
4112
4113// Create a circle shaped path with its center at {x: 80, y: 50}
4114// and a radius of 30.
4115var circlePath = new Path.Circle({
4116 center: [80, 50],
4117 radius: 30,
4118 fillColor: 'red'
4119});
4120
4121// Fit the circlePath to the bounding rectangle of
4122// the rectangular path:
4123circlePath.fitBounds(path.bounds);
4124</script>
4125<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
4126</div>
4127
4128
4129<p>
4130<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
4131</p>
4132
4133<div class="paperscript split">
4134
4135<div class="buttons">
4136<div class="button run">Run</div>
4137</div>
4138
4139<script type="text/paperscript" canvas="canvas-43">
4140// Create a rectangle shaped path with its top left corner
4141// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
4142var path = new Path.Rectangle({
4143 point: [80, 25],
4144 size: [75, 50],
4145 fillColor: 'black'
4146});
4147
4148// Create a circle shaped path with its center at {x: 80, y: 50}
4149// and a radius of 30.
4150var circlePath = new Path.Circle({
4151 center: [80, 50],
4152 radius: 30,
4153 fillColor: 'red'
4154});
4155
4156// Fit the circlePath to the bounding rectangle of
4157// the rectangular path:
4158circlePath.fitBounds(path.bounds, true);
4159</script>
4160<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
4161</div>
4162
4163
4164<p>
4165<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
4166</p>
4167
4168<div class="paperscript split">
4169
4170<div class="buttons">
4171<div class="button run">Run</div>
4172</div>
4173
4174<script type="text/paperscript" canvas="canvas-44">
4175var path = new Path.Circle({
4176 center: [80, 50],
4177 radius: 30,
4178 fillColor: 'red'
4179});
4180
4181// Fit the path to the bounding rectangle of the view:
4182path.fitBounds(view.bounds);
4183</script>
4184<div class="canvas"><canvas width="516" height="200" id="canvas-44"></canvas></div>
4185</div>
4186
4187
4188</div>
4189</div>
4190</div>
4191
4192
4193<h3>Event Handling</h3>
4194
4195<div id="attach-type-function" class="member">
4196<div class="member-link">
4197<a name="attach-type-function" href="#attach-type-function"><tt><b>attach</b>(type, function)</tt></a>
4198</div>
4199<div class="member-description hidden">
4200<div class="member-text">
4201 <p>Attaches an event handler to the item.</p>
4202
4203<ul><b>Parameters:</b>
4204
4205<li>
4206<tt>type:</tt>
4207<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
4208&mdash;&nbsp;the event
4209type
4210
4211</li>
4212
4213<li>
4214<tt>function:</tt>
4215<tt>Function</tt>
4216&mdash;&nbsp;The function to be called when the event
4217occurs
4218
4219</li>
4220
4221</ul>
4222
4223
4224
4225 <p>
4226<b>Example</b> &mdash; Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.
4227</p>
4228
4229<div class="paperscript split">
4230
4231<div class="buttons">
4232<div class="button run">Run</div>
4233</div>
4234
4235<script type="text/paperscript" canvas="canvas-45">
4236// Create a circle shaped path at the center of the view:
4237var path = new Path.Circle({
4238 center: view.center,
4239 radius: 25,
4240 fillColor: 'black'
4241});
4242
4243// When the mouse enters the item, set its fill color to red:
4244path.on('mouseenter', function() {
4245 this.fillColor = 'red';
4246});
4247
4248// When the mouse leaves the item, set its fill color to black:
4249path.on('mouseleave', function() {
4250 this.fillColor = 'black';
4251});
4252</script>
4253<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
4254</div>
4255
4256
4257</div>
4258</div>
4259</div>
4260
4261
4262<div id="attach-object" class="member">
4263<div class="member-link">
4264<a name="attach-object" href="#attach-object"><tt><b>attach</b>(object)</tt></a>
4265</div>
4266<div class="member-description hidden">
4267<div class="member-text">
4268 <p>Attaches one or more event handlers to the item.</p>
4269
4270<ul><b>Parameters:</b>
4271
4272<li>
4273<tt>object:</tt>
4274<tt>Object</tt>
4275&mdash;&nbsp;an object literal containing one or more of the
4276following properties: <tt>mousedown, mouseup, mousedrag, click,
4277doubleclick, mousemove, mouseenter, mouseleave</tt>.
4278
4279</li>
4280
4281</ul>
4282
4283
4284
4285 <p>
4286<b>Example</b> &mdash; Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.
4287</p>
4288
4289<div class="paperscript split">
4290
4291<div class="buttons">
4292<div class="button run">Run</div>
4293</div>
4294
4295<script type="text/paperscript" canvas="canvas-46">
4296// Create a circle shaped path at the center of the view:
4297var path = new Path.Circle({
4298 center: view.center,
4299 radius: 25
4300});
4301path.fillColor = 'black';
4302
4303// When the mouse enters the item, set its fill color to red:
4304path.on({
4305 mouseenter: function(event) {
4306 this.fillColor = 'red';
4307 },
4308 mouseleave: function(event) {
4309 this.fillColor = 'black';
4310 }
4311});
4312</script>
4313<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
4314</div>
4315
4316
4317<p>
4318<b>Example</b> &mdash; When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set black.
4319</p>
4320
4321<div class="paperscript split">
4322
4323<div class="buttons">
4324<div class="button run">Run</div>
4325</div>
4326
4327<script type="text/paperscript" canvas="canvas-47">
4328var pathHandlers = {
4329 mouseenter: function(event) {
4330 this.fillColor = 'red';
4331 },
4332 mouseleave: function(event) {
4333 this.fillColor = 'black';
4334 }
4335}
4336
4337// When the mouse is pressed:
4338function onMouseDown(event) {
4339 // Create a circle shaped path at the position of the mouse:
4340 var path = new Path.Circle({
4341 center: event.point,
4342 radius: 25,
4343 fillColor: 'black'
4344 });
4345
4346 // Attach the handers inside the object literal to the path:
4347 path.on(pathHandlers);
4348}
4349</script>
4350<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
4351</div>
4352
4353
4354</div>
4355</div>
4356</div>
4357
4358
4359<div id="detach-type-function" class="member">
4360<div class="member-link">
4361<a name="detach-type-function" href="#detach-type-function"><tt><b>detach</b>(type, function)</tt></a>
4362</div>
4363<div class="member-description hidden">
4364<div class="member-text">
4365 <p>Detach an event handler from the item.</p>
4366
4367<ul><b>Parameters:</b>
4368
4369<li>
4370<tt>type:</tt>
4371<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
4372&mdash;&nbsp;the event
4373type
4374
4375</li>
4376
4377<li>
4378<tt>function:</tt>
4379<tt>Function</tt>
4380&mdash;&nbsp;The function to be detached
4381
4382</li>
4383
4384</ul>
4385
4386
4387
4388
4389</div>
4390</div>
4391</div>
4392
4393
4394<div id="detach-object" class="member">
4395<div class="member-link">
4396<a name="detach-object" href="#detach-object"><tt><b>detach</b>(object)</tt></a>
4397</div>
4398<div class="member-description hidden">
4399<div class="member-text">
4400 <p>Detach one or more event handlers to the item.</p>
4401
4402<ul><b>Parameters:</b>
4403
4404<li>
4405<tt>object:</tt>
4406<tt>Object</tt>
4407&mdash;&nbsp;an object literal containing one or more of the
4408following properties: <tt>mousedown, mouseup, mousedrag, click,
4409doubleclick, mousemove, mouseenter, mouseleave</tt>
4410
4411</li>
4412
4413</ul>
4414
4415
4416
4417
4418</div>
4419</div>
4420</div>
4421
4422
4423<div id="fire-type-event" class="member">
4424<div class="member-link">
4425<a name="fire-type-event" href="#fire-type-event"><tt><b>fire</b>(type, event)</tt></a>
4426</div>
4427<div class="member-description hidden">
4428<div class="member-text">
4429 <p>Fire an event on the item.</p>
4430
4431<ul><b>Parameters:</b>
4432
4433<li>
4434<tt>type:</tt>
4435<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
4436&mdash;&nbsp;the event
4437type
4438
4439</li>
4440
4441<li>
4442<tt>event:</tt>
4443<tt>Object</tt>
4444&mdash;&nbsp;an object literal containing properties describing
4445the event.
4446
4447</li>
4448
4449</ul>
4450
4451
4452
4453
4454</div>
4455</div>
4456</div>
4457
4458
4459<div id="responds-type" class="member">
4460<div class="member-link">
4461<a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
4462</div>
4463<div class="member-description hidden">
4464<div class="member-text">
4465 <p>Check if the item has one or more event handlers of the specified type.</p>
4466
4467<ul><b>Parameters:</b>
4468
4469<li>
4470<tt>type:</tt>
4471<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
4472&mdash;&nbsp;the event
4473type
4474
4475</li>
4476
4477</ul>
4478
4479
4480 <ul><b>Returns:</b>
4481
4482 <li>
4483<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has one or more event handlers of
4484the specified type, <tt>false</tt> otherwise
4485</li>
4486
4487 </ul>
4488
4489
4490
4491</div>
4492</div>
4493</div>
4494
4495
4496<h3>Remove On Event</h3>
4497
4498<div id="removeon-object" class="member">
4499<div class="member-link">
4500<a name="removeon-object" href="#removeon-object"><tt><b>removeOn</b>(object)</tt></a>
4501</div>
4502<div class="member-description hidden">
4503<div class="member-text">
4504 <p>Removes the item when the events specified in the passed object literal
4505occur.</p>
4506<p>The object literal can contain the following values:</p>
4507<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
4508fired: <tt>object.move = true</tt></p>
4509<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
4510fired: <tt>object.drag = true</tt></p>
4511<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
4512fired: <tt>object.down = true</tt></p>
4513<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
4514fired: <tt>object.up = true</tt></p>
4515
4516<ul><b>Parameters:</b>
4517
4518<li>
4519<tt>object:</tt>
4520<tt>Object</tt>
4521
4522
4523</li>
4524
4525</ul>
4526
4527
4528
4529 <p>
4530<b>Example</b> &mdash; Click and drag below:
4531</p>
4532
4533<div class="paperscript split">
4534
4535<div class="buttons">
4536<div class="button run">Run</div>
4537</div>
4538
4539<script type="text/paperscript" canvas="canvas-48">
4540function onMouseDrag(event) {
4541 // Create a circle shaped path at the mouse position,
4542 // with a radius of 10:
4543 var path = new Path.Circle({
4544 center: event.point,
4545 radius: 10,
4546 fillColor: 'black'
4547 });
4548
4549 // Remove the path on the next onMouseDrag or onMouseDown event:
4550 path.removeOn({
4551 drag: true,
4552 down: true
4553 });
4554}
4555</script>
4556<div class="canvas"><canvas width="516" height="200" id="canvas-48"></canvas></div>
4557</div>
4558
4559
4560</div>
4561</div>
4562</div>
4563
4564
4565<div id="removeonmove" class="member">
4566<div class="member-link">
4567<a name="removeonmove" href="#removeonmove"><tt><b>removeOnMove</b>()</tt></a>
4568</div>
4569<div class="member-description hidden">
4570<div class="member-text">
4571 <p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
4572
4573
4574
4575 <p>
4576<b>Example</b> &mdash; Move your mouse below:
4577</p>
4578
4579<div class="paperscript split">
4580
4581<div class="buttons">
4582<div class="button run">Run</div>
4583</div>
4584
4585<script type="text/paperscript" canvas="canvas-49">
4586function onMouseMove(event) {
4587 // Create a circle shaped path at the mouse position,
4588 // with a radius of 10:
4589 var path = new Path.Circle({
4590 center: event.point,
4591 radius: 10,
4592 fillColor: 'black'
4593 });
4594
4595 // On the next move event, automatically remove the path:
4596 path.removeOnMove();
4597}
4598</script>
4599<div class="canvas"><canvas width="516" height="200" id="canvas-49"></canvas></div>
4600</div>
4601
4602
4603</div>
4604</div>
4605</div>
4606
4607
4608<div id="removeondown" class="member">
4609<div class="member-link">
4610<a name="removeondown" href="#removeondown"><tt><b>removeOnDown</b>()</tt></a>
4611</div>
4612<div class="member-description hidden">
4613<div class="member-text">
4614 <p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
4615
4616
4617
4618 <p>
4619<b>Example</b> &mdash; Click a few times below:
4620</p>
4621
4622<div class="paperscript split">
4623
4624<div class="buttons">
4625<div class="button run">Run</div>
4626</div>
4627
4628<script type="text/paperscript" canvas="canvas-50">
4629function onMouseDown(event) {
4630 // Create a circle shaped path at the mouse position,
4631 // with a radius of 10:
4632 var path = new Path.Circle({
4633 center: event.point,
4634 radius: 10,
4635 fillColor: 'black'
4636 });
4637
4638 // Remove the path, next time the mouse is pressed:
4639 path.removeOnDown();
4640}
4641</script>
4642<div class="canvas"><canvas width="516" height="200" id="canvas-50"></canvas></div>
4643</div>
4644
4645
4646</div>
4647</div>
4648</div>
4649
4650
4651<div id="removeondrag" class="member">
4652<div class="member-link">
4653<a name="removeondrag" href="#removeondrag"><tt><b>removeOnDrag</b>()</tt></a>
4654</div>
4655<div class="member-description hidden">
4656<div class="member-text">
4657 <p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
4658
4659
4660
4661 <p>
4662<b>Example</b> &mdash; Click and drag below:
4663</p>
4664
4665<div class="paperscript split">
4666
4667<div class="buttons">
4668<div class="button run">Run</div>
4669</div>
4670
4671<script type="text/paperscript" canvas="canvas-51">
4672function onMouseDrag(event) {
4673 // Create a circle shaped path at the mouse position,
4674 // with a radius of 10:
4675 var path = new Path.Circle({
4676 center: event.point,
4677 radius: 10,
4678 fillColor: 'black'
4679 });
4680
4681 // On the next drag event, automatically remove the path:
4682 path.removeOnDrag();
4683}
4684</script>
4685<div class="canvas"><canvas width="516" height="200" id="canvas-51"></canvas></div>
4686</div>
4687
4688
4689</div>
4690</div>
4691</div>
4692
4693
4694<div id="removeonup" class="member">
4695<div class="member-link">
4696<a name="removeonup" href="#removeonup"><tt><b>removeOnUp</b>()</tt></a>
4697</div>
4698<div class="member-description hidden">
4699<div class="member-text">
4700 <p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
4701
4702
4703
4704 <p>
4705<b>Example</b> &mdash; Click a few times below:
4706</p>
4707
4708<div class="paperscript split">
4709
4710<div class="buttons">
4711<div class="button run">Run</div>
4712</div>
4713
4714<script type="text/paperscript" canvas="canvas-52">
4715function onMouseDown(event) {
4716 // Create a circle shaped path at the mouse position,
4717 // with a radius of 10:
4718 var path = new Path.Circle({
4719 center: event.point,
4720 radius: 10,
4721 fillColor: 'black'
4722 });
4723
4724 // Remove the path, when the mouse is released:
4725 path.removeOnUp();
4726}
4727</script>
4728<div class="canvas"><canvas width="516" height="200" id="canvas-52"></canvas></div>
4729</div>
4730
4731
4732</div>
4733</div>
4734</div>
4735
4736</div>
4737
4738
4739
4740<!-- =========================== copyright notice ========================= -->
4741<p class="footer">Copyright &#169; 2011 <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>
4742<div class="content-end"></div>
4743
4744</body>
Note: See TracBrowser for help on using the repository browser.