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