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