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