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