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