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