source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/Path.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: 180.4 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Path</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>Path</h1>
16
17<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
18
19<p>The path item represents a path 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="path" class="member">
28<div class="member-link">
29<a name="path" href="#path"><tt><b>Path</b>([segments])</tt></a>
30</div>
31<div class="member-description hidden">
32<div class="member-text">
33<p>Creates a new path item and places it at the top of the active layer.</p>
34
35<ul><b>Parameters:</b>
36
37<li>
38<tt>segments:</tt>
39Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
40&mdash;&nbsp;An array of segments (or points to be
41converted to segments) that will be added to the path
42&mdash;&nbsp;optional
43</li>
44
45</ul>
46
47
48 <ul><b>Returns:</b>
49
50 <li>
51<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
52</li>
53
54 </ul>
55
56<p>
57<b>Example</b> &mdash; Create an empty path and add segments to it:
58</p>
59
60
61<pre class="code">var path = new Path();
62path.strokeColor = 'black';
63path.add(new Point(30, 30));
64path.add(new Point(100, 100));</pre>
65
66<p>
67<b>Example</b> &mdash; Create a path with two segments:
68</p>
69
70
71<pre class="code">var segments = [new Point(30, 30), new Point(100, 100)];
72var path = new Path(segments);
73path.strokeColor = 'black';</pre>
74
75
76</div>
77</div>
78</div>
79
80
81<div id="path-object" class="member">
82<div class="member-link">
83<a name="path-object" href="#path-object"><tt><b>Path</b>(object)</tt></a>
84</div>
85<div class="member-description hidden">
86<div class="member-text">
87<p>Creates a new path item and places it at the top of the active layer.</p>
88
89<ul><b>Parameters:</b>
90
91<li>
92<tt>object:</tt>
93<tt>Object</tt>
94&mdash;&nbsp;an object literal containing properties to
95be set on the path
96
97</li>
98
99</ul>
100
101
102 <ul><b>Returns:</b>
103
104 <li>
105<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
106</li>
107
108 </ul>
109
110<p>
111<b>Example</b>
112</p>
113
114<div class="paperscript split">
115
116<div class="buttons">
117<div class="button run">Run</div>
118</div>
119
120<script type="text/paperscript" canvas="canvas-0">
121var path = new Path({
122 segments: [[20, 20], [80, 80], [140, 20]],
123 fillColor: 'black',
124 closed: true
125});
126</script>
127<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
128</div>
129
130
131<p>
132<b>Example</b>
133</p>
134
135<div class="paperscript split">
136
137<div class="buttons">
138<div class="button run">Run</div>
139</div>
140
141<script type="text/paperscript" canvas="canvas-1">
142var path = new Path({
143 segments: [[20, 20], [80, 80], [140, 20]],
144 strokeColor: 'red',
145 strokeWidth: 20,
146 strokeCap: 'round',
147 selected: true
148});
149</script>
150<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
151</div>
152
153
154
155</div>
156</div>
157</div>
158
159 <h3>Shaped Paths</h3>
160<div id="path-line-from-to" class="member">
161<div class="member-link">
162<a name="path-line-from-to" href="#path-line-from-to"><tt><b>Path.Line</b>(from, to)</tt></a>
163</div>
164<div class="member-description hidden">
165<div class="member-text">
166<p>Creates a linear path item from two points describing a line.</p>
167
168<ul><b>Parameters:</b>
169
170<li>
171<tt>from:</tt>
172<a href="../classes/Point.html"><tt>Point</tt></a>
173&mdash;&nbsp;the line's starting point
174
175</li>
176
177<li>
178<tt>to:</tt>
179<a href="../classes/Point.html"><tt>Point</tt></a>
180&mdash;&nbsp;the line's ending point
181
182</li>
183
184</ul>
185
186
187 <ul><b>Returns:</b>
188
189 <li>
190<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
191</li>
192
193 </ul>
194
195<p>
196<b>Example</b>
197</p>
198
199<div class="paperscript split">
200
201<div class="buttons">
202<div class="button run">Run</div>
203</div>
204
205<script type="text/paperscript" canvas="canvas-2">
206var from = new Point(20, 20);
207var to = new Point(80, 80);
208var path = new Path.Line(from, to);
209path.strokeColor = 'black';
210</script>
211<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
212</div>
213
214
215
216</div>
217</div>
218</div>
219
220
221<div id="path-line-object" class="member">
222<div class="member-link">
223<a name="path-line-object" href="#path-line-object"><tt><b>Path.Line</b>(object)</tt></a>
224</div>
225<div class="member-description hidden">
226<div class="member-text">
227<p>Creates a linear path item from the properties described by an object
228literal.</p>
229
230<ul><b>Parameters:</b>
231
232<li>
233<tt>object:</tt>
234<tt>Object</tt>
235&mdash;&nbsp;an object literal containing properties
236describing the path's attributes
237
238</li>
239
240</ul>
241
242
243 <ul><b>Returns:</b>
244
245 <li>
246<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
247</li>
248
249 </ul>
250
251<p>
252<b>Example</b>
253</p>
254
255<div class="paperscript split">
256
257<div class="buttons">
258<div class="button run">Run</div>
259</div>
260
261<script type="text/paperscript" canvas="canvas-3">
262var path = new Path.Line({
263 from: [20, 20],
264 to: [80, 80],
265 strokeColor: 'black'
266});
267</script>
268<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
269</div>
270
271
272
273</div>
274</div>
275</div>
276
277
278<div id="path-circle-center-radius" class="member">
279<div class="member-link">
280<a name="path-circle-center-radius" href="#path-circle-center-radius"><tt><b>Path.Circle</b>(center, radius)</tt></a>
281</div>
282<div class="member-description hidden">
283<div class="member-text">
284<p>Creates a circular path item.</p>
285
286<ul><b>Parameters:</b>
287
288<li>
289<tt>center:</tt>
290<a href="../classes/Point.html"><tt>Point</tt></a>
291&mdash;&nbsp;the center point of the circle
292
293</li>
294
295<li>
296<tt>radius:</tt>
297<tt>Number</tt>
298&mdash;&nbsp;the radius of the circle
299
300</li>
301
302</ul>
303
304
305 <ul><b>Returns:</b>
306
307 <li>
308<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
309</li>
310
311 </ul>
312
313<p>
314<b>Example</b>
315</p>
316
317<div class="paperscript split">
318
319<div class="buttons">
320<div class="button run">Run</div>
321</div>
322
323<script type="text/paperscript" canvas="canvas-4">
324var path = new Path.Circle(new Point(80, 50), 30);
325path.strokeColor = 'black';
326</script>
327<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
328</div>
329
330
331
332</div>
333</div>
334</div>
335
336
337<div id="path-circle-object" class="member">
338<div class="member-link">
339<a name="path-circle-object" href="#path-circle-object"><tt><b>Path.Circle</b>(object)</tt></a>
340</div>
341<div class="member-description hidden">
342<div class="member-text">
343<p>Creates a circular path item from the properties described by an
344object literal.</p>
345
346<ul><b>Parameters:</b>
347
348<li>
349<tt>object:</tt>
350<tt>Object</tt>
351&mdash;&nbsp;an object literal containing properties
352describing the path's attributes
353
354</li>
355
356</ul>
357
358
359 <ul><b>Returns:</b>
360
361 <li>
362<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
363</li>
364
365 </ul>
366
367<p>
368<b>Example</b>
369</p>
370
371<div class="paperscript split">
372
373<div class="buttons">
374<div class="button run">Run</div>
375</div>
376
377<script type="text/paperscript" canvas="canvas-5">
378var path = new Path.Circle({
379 center: [80, 50],
380 radius: 30,
381 strokeColor: 'black'
382});
383</script>
384<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
385</div>
386
387
388
389</div>
390</div>
391</div>
392
393
394<div id="path-rectangle-rectangle" class="member">
395<div class="member-link">
396<a name="path-rectangle-rectangle" href="#path-rectangle-rectangle"><tt><b>Path.Rectangle</b>(rectangle[, radius])</tt></a>
397</div>
398<div class="member-description hidden">
399<div class="member-text">
400<p>Creates a rectangular path item, with optionally rounded corners.</p>
401
402<ul><b>Parameters:</b>
403
404<li>
405<tt>rectangle:</tt>
406<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
407&mdash;&nbsp;the rectangle object describing the
408geometry of the rectangular path to be created.
409
410</li>
411
412<li>
413<tt>radius:</tt>
414<a href="../classes/Size.html"><tt>Size</tt></a>
415&mdash;&nbsp;the size of the rounded corners
416&mdash;&nbsp;optional, default: <tt>null</tt>
417</li>
418
419</ul>
420
421
422 <ul><b>Returns:</b>
423
424 <li>
425<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
426</li>
427
428 </ul>
429
430<p>
431<b>Example</b>
432</p>
433
434<div class="paperscript split">
435
436<div class="buttons">
437<div class="button run">Run</div>
438</div>
439
440<script type="text/paperscript" canvas="canvas-6">
441var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
442var path = new Path.Rectangle(rectangle);
443path.strokeColor = 'black';
444</script>
445<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
446</div>
447
448
449<p>
450<b>Example</b> &mdash; The same, with rounder corners
451</p>
452
453<div class="paperscript split">
454
455<div class="buttons">
456<div class="button run">Run</div>
457</div>
458
459<script type="text/paperscript" canvas="canvas-7">
460var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
461var cornerSize = new Size(10, 10);
462var path = new Path.Rectangle(rectangle, cornerSize);
463path.strokeColor = 'black';
464</script>
465<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
466</div>
467
468
469
470</div>
471</div>
472</div>
473
474
475<div id="path-rectangle-point-size" class="member">
476<div class="member-link">
477<a name="path-rectangle-point-size" href="#path-rectangle-point-size"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
478</div>
479<div class="member-description hidden">
480<div class="member-text">
481<p>Creates a rectangular path item from a point and a size object.</p>
482
483<ul><b>Parameters:</b>
484
485<li>
486<tt>point:</tt>
487<a href="../classes/Point.html"><tt>Point</tt></a>
488&mdash;&nbsp;the rectangle's top-left corner.
489
490</li>
491
492<li>
493<tt>size:</tt>
494<a href="../classes/Size.html"><tt>Size</tt></a>
495&mdash;&nbsp;the rectangle's size.
496
497</li>
498
499</ul>
500
501
502 <ul><b>Returns:</b>
503
504 <li>
505<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
506</li>
507
508 </ul>
509
510<p>
511<b>Example</b>
512</p>
513
514<div class="paperscript split">
515
516<div class="buttons">
517<div class="button run">Run</div>
518</div>
519
520<script type="text/paperscript" canvas="canvas-8">
521var point = new Point(20, 20);
522var size = new Size(60, 60);
523var path = new Path.Rectangle(point, size);
524path.strokeColor = 'black';
525</script>
526<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
527</div>
528
529
530
531</div>
532</div>
533</div>
534
535
536<div id="path-rectangle-from-to" class="member">
537<div class="member-link">
538<a name="path-rectangle-from-to" href="#path-rectangle-from-to"><tt><b>Path.Rectangle</b>(from, to)</tt></a>
539</div>
540<div class="member-description hidden">
541<div class="member-text">
542<p>Creates a rectangular path item from the passed points. These do not
543necessarily need to be the top left and bottom right corners, the
544constructor figures out how to fit a rectangle between them.</p>
545
546<ul><b>Parameters:</b>
547
548<li>
549<tt>from:</tt>
550<a href="../classes/Point.html"><tt>Point</tt></a>
551&mdash;&nbsp;the first point defining the rectangle
552
553</li>
554
555<li>
556<tt>to:</tt>
557<a href="../classes/Point.html"><tt>Point</tt></a>
558&mdash;&nbsp;the second point defining the rectangle
559
560</li>
561
562</ul>
563
564
565 <ul><b>Returns:</b>
566
567 <li>
568<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
569</li>
570
571 </ul>
572
573<p>
574<b>Example</b>
575</p>
576
577<div class="paperscript split">
578
579<div class="buttons">
580<div class="button run">Run</div>
581</div>
582
583<script type="text/paperscript" canvas="canvas-9">
584var from = new Point(20, 20);
585var to = new Point(80, 80);
586var path = new Path.Rectangle(from, to);
587path.strokeColor = 'black';
588</script>
589<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
590</div>
591
592
593
594</div>
595</div>
596</div>
597
598
599<div id="path-rectangle-object" class="member">
600<div class="member-link">
601<a name="path-rectangle-object" href="#path-rectangle-object"><tt><b>Path.Rectangle</b>(object)</tt></a>
602</div>
603<div class="member-description hidden">
604<div class="member-text">
605<p>Creates a rectangular path item from the properties described by an
606object literal.</p>
607
608<ul><b>Parameters:</b>
609
610<li>
611<tt>object:</tt>
612<tt>Object</tt>
613&mdash;&nbsp;an object literal containing properties
614describing the path's attributes
615
616</li>
617
618</ul>
619
620
621 <ul><b>Returns:</b>
622
623 <li>
624<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
625</li>
626
627 </ul>
628
629<p>
630<b>Example</b>
631</p>
632
633<div class="paperscript split">
634
635<div class="buttons">
636<div class="button run">Run</div>
637</div>
638
639<script type="text/paperscript" canvas="canvas-10">
640var path = new Path.Rectangle({
641 point: [20, 20],
642 size: [60, 60],
643 strokeColor: 'black'
644});
645</script>
646<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
647</div>
648
649
650<p>
651<b>Example</b>
652</p>
653
654<div class="paperscript split">
655
656<div class="buttons">
657<div class="button run">Run</div>
658</div>
659
660<script type="text/paperscript" canvas="canvas-11">
661var path = new Path.Rectangle({
662 from: [20, 20],
663 to: [80, 80],
664 strokeColor: 'black'
665});
666</script>
667<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
668</div>
669
670
671<p>
672<b>Example</b>
673</p>
674
675<div class="paperscript split">
676
677<div class="buttons">
678<div class="button run">Run</div>
679</div>
680
681<script type="text/paperscript" canvas="canvas-12">
682var path = new Path.Rectangle({
683 rectangle: {
684 topLeft: [20, 20],
685 bottomRight: [80, 80]
686 },
687 strokeColor: 'black'
688});
689</script>
690<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
691</div>
692
693
694<p>
695<b>Example</b>
696</p>
697
698<div class="paperscript split">
699
700<div class="buttons">
701<div class="button run">Run</div>
702</div>
703
704<script type="text/paperscript" canvas="canvas-13">
705var path = new Path.Rectangle({
706 topLeft: [20, 20],
707 bottomRight: [80, 80],
708 radius: 10,
709 strokeColor: 'black'
710});
711</script>
712<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
713</div>
714
715
716
717</div>
718</div>
719</div>
720
721
722<div id="path-ellipse-rectangle" class="member">
723<div class="member-link">
724<a name="path-ellipse-rectangle" href="#path-ellipse-rectangle"><tt><b>Path.Ellipse</b>(rectangle)</tt></a>
725</div>
726<div class="member-description hidden">
727<div class="member-text">
728<p>Creates an elliptical path item.</p>
729
730<ul><b>Parameters:</b>
731
732<li>
733<tt>rectangle:</tt>
734<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
735&mdash;&nbsp;the rectangle circumscribing the ellipse
736
737</li>
738
739</ul>
740
741
742 <ul><b>Returns:</b>
743
744 <li>
745<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
746</li>
747
748 </ul>
749
750<p>
751<b>Example</b>
752</p>
753
754<div class="paperscript split">
755
756<div class="buttons">
757<div class="button run">Run</div>
758</div>
759
760<script type="text/paperscript" canvas="canvas-14">
761var rectangle = new Rectangle(new Point(20, 20), new Size(180, 60));
762var path = new Path.Ellipse(rectangle);
763path.fillColor = 'black';
764</script>
765<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
766</div>
767
768
769
770</div>
771</div>
772</div>
773
774
775<div id="path-ellipse-object" class="member">
776<div class="member-link">
777<a name="path-ellipse-object" href="#path-ellipse-object"><tt><b>Path.Ellipse</b>(object)</tt></a>
778</div>
779<div class="member-description hidden">
780<div class="member-text">
781<p>Creates an elliptical path item from the properties described by an
782object literal.</p>
783
784<ul><b>Parameters:</b>
785
786<li>
787<tt>object:</tt>
788<tt>Object</tt>
789&mdash;&nbsp;an object literal containing properties
790describing the path's attributes
791
792</li>
793
794</ul>
795
796
797 <ul><b>Returns:</b>
798
799 <li>
800<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
801</li>
802
803 </ul>
804
805<p>
806<b>Example</b>
807</p>
808
809<div class="paperscript split">
810
811<div class="buttons">
812<div class="button run">Run</div>
813</div>
814
815<script type="text/paperscript" canvas="canvas-15">
816var path = new Path.Ellipse({
817 point: [20, 20],
818 size: [180, 60],
819 fillColor: 'black'
820});
821</script>
822<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
823</div>
824
825
826<p>
827<b>Example</b> &mdash; Placing by center and radius
828</p>
829
830<div class="paperscript split">
831
832<div class="buttons">
833<div class="button run">Run</div>
834</div>
835
836<script type="text/paperscript" canvas="canvas-16">
837var shape = new Path.Ellipse({
838 center: [110, 50],
839 radius: [90, 30],
840 fillColor: 'black'
841});
842</script>
843<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
844</div>
845
846
847
848</div>
849</div>
850</div>
851
852
853<div id="path-arc-from-through-to" class="member">
854<div class="member-link">
855<a name="path-arc-from-through-to" href="#path-arc-from-through-to"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
856</div>
857<div class="member-description hidden">
858<div class="member-text">
859<p>Creates a circular arc path item.</p>
860
861<ul><b>Parameters:</b>
862
863<li>
864<tt>from:</tt>
865<a href="../classes/Point.html"><tt>Point</tt></a>
866&mdash;&nbsp;the starting point of the circular arc
867
868</li>
869
870<li>
871<tt>through:</tt>
872<a href="../classes/Point.html"><tt>Point</tt></a>
873&mdash;&nbsp;the point the arc passes through
874
875</li>
876
877<li>
878<tt>to:</tt>
879<a href="../classes/Point.html"><tt>Point</tt></a>
880&mdash;&nbsp;the end point of the arc
881
882</li>
883
884</ul>
885
886
887 <ul><b>Returns:</b>
888
889 <li>
890<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
891</li>
892
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-17">
906var from = new Point(20, 20);
907var through = new Point(60, 20);
908var to = new Point(80, 80);
909var path = new Path.Arc(from, through, to);
910path.strokeColor = 'black';
911</script>
912<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
913</div>
914
915
916
917</div>
918</div>
919</div>
920
921
922<div id="path-arc-object" class="member">
923<div class="member-link">
924<a name="path-arc-object" href="#path-arc-object"><tt><b>Path.Arc</b>(object)</tt></a>
925</div>
926<div class="member-description hidden">
927<div class="member-text">
928<p>Creates an circular arc path item from the properties described by an
929object literal.</p>
930
931<ul><b>Parameters:</b>
932
933<li>
934<tt>object:</tt>
935<tt>Object</tt>
936&mdash;&nbsp;an object literal containing properties
937describing the path's attributes
938
939</li>
940
941</ul>
942
943
944 <ul><b>Returns:</b>
945
946 <li>
947<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
948</li>
949
950 </ul>
951
952<p>
953<b>Example</b>
954</p>
955
956<div class="paperscript split">
957
958<div class="buttons">
959<div class="button run">Run</div>
960</div>
961
962<script type="text/paperscript" canvas="canvas-18">
963var path = new Path.Arc({
964 from: [20, 20],
965 through: [60, 20],
966 to: [80, 80],
967 strokeColor: 'black'
968});
969</script>
970<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
971</div>
972
973
974
975</div>
976</div>
977</div>
978
979
980<div id="path-regularpolygon-center-sides-radius" class="member">
981<div class="member-link">
982<a name="path-regularpolygon-center-sides-radius" href="#path-regularpolygon-center-sides-radius"><tt><b>Path.RegularPolygon</b>(center, sides, radius)</tt></a>
983</div>
984<div class="member-description hidden">
985<div class="member-text">
986<p>Creates a regular polygon shaped path item.</p>
987
988<ul><b>Parameters:</b>
989
990<li>
991<tt>center:</tt>
992<a href="../classes/Point.html"><tt>Point</tt></a>
993&mdash;&nbsp;the center point of the polygon
994
995</li>
996
997<li>
998<tt>sides:</tt>
999<tt>Number</tt>
1000&mdash;&nbsp;the number of sides of the polygon
1001
1002</li>
1003
1004<li>
1005<tt>radius:</tt>
1006<tt>Number</tt>
1007&mdash;&nbsp;the radius of the polygon
1008
1009</li>
1010
1011</ul>
1012
1013
1014 <ul><b>Returns:</b>
1015
1016 <li>
1017<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
1018</li>
1019
1020 </ul>
1021
1022<p>
1023<b>Example</b>
1024</p>
1025
1026<div class="paperscript split">
1027
1028<div class="buttons">
1029<div class="button run">Run</div>
1030</div>
1031
1032<script type="text/paperscript" canvas="canvas-19">
1033var center = new Point(50, 50);
1034var sides = 3;
1035var radius = 40;
1036var triangle = new Path.RegularPolygon(center, sides, radius);
1037triangle.fillColor = 'black';
1038</script>
1039<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
1040</div>
1041
1042
1043
1044</div>
1045</div>
1046</div>
1047
1048
1049<div id="path-regularpolygon-object" class="member">
1050<div class="member-link">
1051<a name="path-regularpolygon-object" href="#path-regularpolygon-object"><tt><b>Path.RegularPolygon</b>(object)</tt></a>
1052</div>
1053<div class="member-description hidden">
1054<div class="member-text">
1055<p>Creates a regular polygon shaped path item from the properties
1056described by an object literal.</p>
1057
1058<ul><b>Parameters:</b>
1059
1060<li>
1061<tt>object:</tt>
1062<tt>Object</tt>
1063&mdash;&nbsp;an object literal containing properties
1064describing the path's attributes
1065
1066</li>
1067
1068</ul>
1069
1070
1071 <ul><b>Returns:</b>
1072
1073 <li>
1074<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
1075</li>
1076
1077 </ul>
1078
1079<p>
1080<b>Example</b>
1081</p>
1082
1083<div class="paperscript split">
1084
1085<div class="buttons">
1086<div class="button run">Run</div>
1087</div>
1088
1089<script type="text/paperscript" canvas="canvas-20">
1090var triangle = new Path.RegularPolygon({
1091 center: [50, 50],
1092 sides: 10,
1093 radius: 40,
1094 fillColor: 'black'
1095});
1096</script>
1097<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
1098</div>
1099
1100
1101
1102</div>
1103</div>
1104</div>
1105
1106
1107<div id="path-star-center-points-radius1-radius2" class="member">
1108<div class="member-link">
1109<a name="path-star-center-points-radius1-radius2" href="#path-star-center-points-radius1-radius2"><tt><b>Path.Star</b>(center, points, radius1, radius2)</tt></a>
1110</div>
1111<div class="member-description hidden">
1112<div class="member-text">
1113<p>Creates a star shaped path item.</p>
1114<p>The largest of <tt>radius1</tt> and <tt>radius2</tt> will be the outer
1115radius of the star. The smallest of radius1 and radius2 will be the
1116inner radius.</p>
1117
1118<ul><b>Parameters:</b>
1119
1120<li>
1121<tt>center:</tt>
1122<a href="../classes/Point.html"><tt>Point</tt></a>
1123&mdash;&nbsp;the center point of the star
1124
1125</li>
1126
1127<li>
1128<tt>points:</tt>
1129<tt>Number</tt>
1130&mdash;&nbsp;the number of points of the star
1131
1132</li>
1133
1134<li>
1135<tt>radius1:</tt>
1136<tt>Number</tt>
1137
1138
1139</li>
1140
1141<li>
1142<tt>radius2:</tt>
1143<tt>Number</tt>
1144
1145
1146</li>
1147
1148</ul>
1149
1150
1151 <ul><b>Returns:</b>
1152
1153 <li>
1154<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
1155</li>
1156
1157 </ul>
1158
1159<p>
1160<b>Example</b>
1161</p>
1162
1163<div class="paperscript split">
1164
1165<div class="buttons">
1166<div class="button run">Run</div>
1167</div>
1168
1169<script type="text/paperscript" canvas="canvas-21">
1170var center = new Point(50, 50);
1171var points = 12;
1172var radius1 = 25;
1173var radius2 = 40;
1174var path = new Path.Star(center, points, radius1, radius2);
1175path.fillColor = 'black';
1176</script>
1177<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
1178</div>
1179
1180
1181
1182</div>
1183</div>
1184</div>
1185
1186
1187<div id="path-star-object" class="member">
1188<div class="member-link">
1189<a name="path-star-object" href="#path-star-object"><tt><b>Path.Star</b>(object)</tt></a>
1190</div>
1191<div class="member-description hidden">
1192<div class="member-text">
1193<p>Creates a star shaped path item from the properties described by an
1194object literal.</p>
1195
1196<ul><b>Parameters:</b>
1197
1198<li>
1199<tt>object:</tt>
1200<tt>Object</tt>
1201&mdash;&nbsp;an object literal containing properties
1202describing the path's attributes
1203
1204</li>
1205
1206</ul>
1207
1208
1209 <ul><b>Returns:</b>
1210
1211 <li>
1212<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
1213</li>
1214
1215 </ul>
1216
1217<p>
1218<b>Example</b>
1219</p>
1220
1221<div class="paperscript split">
1222
1223<div class="buttons">
1224<div class="button run">Run</div>
1225</div>
1226
1227<script type="text/paperscript" canvas="canvas-22">
1228var path = new Path.Star({
1229 center: [50, 50],
1230 points: 12,
1231 radius1: 25,
1232 radius2: 40,
1233 fillColor: 'black'
1234});
1235</script>
1236<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
1237</div>
1238
1239
1240
1241</div>
1242</div>
1243</div>
1244
1245</div>
1246
1247
1248
1249
1250
1251 <div class="reference-members"><h2>Properties</h2>
1252
1253
1254<div id="segments" class="member">
1255<div class="member-link">
1256<a name="segments" href="#segments"><tt><b>segments</b></tt></a>
1257</div>
1258<div class="member-description hidden">
1259
1260<div class="member-text">
1261 <p>The segments contained within the path.</p>
1262
1263
1264 <ul><b>Type:</b>
1265 <li>
1266 Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
1267 </li>
1268 </ul>
1269
1270
1271</div>
1272
1273</div>
1274</div>
1275
1276
1277<div id="firstsegment" class="member">
1278<div class="member-link">
1279<a name="firstsegment" href="#firstsegment"><tt><b>firstSegment</b></tt></a>
1280</div>
1281<div class="member-description hidden">
1282
1283<div class="member-text">
1284 <p>The first Segment contained within the path.</p>
1285
1286 <p>Read only.</p>
1287
1288
1289 <ul><b>Type:</b>
1290 <li>
1291 <a href="../classes/Segment.html"><tt>Segment</tt></a>
1292 </li>
1293 </ul>
1294
1295
1296</div>
1297
1298</div>
1299</div>
1300
1301
1302<div id="lastsegment" class="member">
1303<div class="member-link">
1304<a name="lastsegment" href="#lastsegment"><tt><b>lastSegment</b></tt></a>
1305</div>
1306<div class="member-description hidden">
1307
1308<div class="member-text">
1309 <p>The last Segment contained within the path.</p>
1310
1311 <p>Read only.</p>
1312
1313
1314 <ul><b>Type:</b>
1315 <li>
1316 <a href="../classes/Segment.html"><tt>Segment</tt></a>
1317 </li>
1318 </ul>
1319
1320
1321</div>
1322
1323</div>
1324</div>
1325
1326
1327<div id="curves" class="member">
1328<div class="member-link">
1329<a name="curves" href="#curves"><tt><b>curves</b></tt></a>
1330</div>
1331<div class="member-description hidden">
1332
1333<div class="member-text">
1334 <p>The curves contained within the path.</p>
1335
1336 <p>Read only.</p>
1337
1338
1339 <ul><b>Type:</b>
1340 <li>
1341 Array of <a href="../classes/Curve.html"><tt>Curve</tt></a> objects
1342 </li>
1343 </ul>
1344
1345
1346</div>
1347
1348</div>
1349</div>
1350
1351
1352<div id="firstcurve" class="member">
1353<div class="member-link">
1354<a name="firstcurve" href="#firstcurve"><tt><b>firstCurve</b></tt></a>
1355</div>
1356<div class="member-description hidden">
1357
1358<div class="member-text">
1359 <p>The first Curve contained within the path.</p>
1360
1361 <p>Read only.</p>
1362
1363
1364 <ul><b>Type:</b>
1365 <li>
1366 <a href="../classes/Curve.html"><tt>Curve</tt></a>
1367 </li>
1368 </ul>
1369
1370
1371</div>
1372
1373</div>
1374</div>
1375
1376
1377<div id="lastcurve" class="member">
1378<div class="member-link">
1379<a name="lastcurve" href="#lastcurve"><tt><b>lastCurve</b></tt></a>
1380</div>
1381<div class="member-description hidden">
1382
1383<div class="member-text">
1384 <p>The last Curve contained within the path.</p>
1385
1386 <p>Read only.</p>
1387
1388
1389 <ul><b>Type:</b>
1390 <li>
1391 <a href="../classes/Curve.html"><tt>Curve</tt></a>
1392 </li>
1393 </ul>
1394
1395
1396</div>
1397
1398</div>
1399</div>
1400
1401
1402<div id="pathdata" class="member">
1403<div class="member-link">
1404<a name="pathdata" href="#pathdata"><tt><b>pathData</b></tt></a>
1405</div>
1406<div class="member-description hidden">
1407
1408<div class="member-text">
1409 <p>The segments contained within the path, described as SVG style path data.</p>
1410
1411 <p>Read only.</p>
1412
1413
1414 <ul><b>Type:</b>
1415 <li>
1416 <tt>String</tt>
1417 </li>
1418 </ul>
1419
1420
1421</div>
1422
1423</div>
1424</div>
1425
1426
1427<div id="closed" class="member">
1428<div class="member-link">
1429<a name="closed" href="#closed"><tt><b>closed</b></tt></a>
1430</div>
1431<div class="member-description hidden">
1432
1433<div class="member-text">
1434 <p>Specifies whether the path is closed. If it is closed, Paper.js connects
1435the first and last segments.</p>
1436
1437
1438 <ul><b>Type:</b>
1439 <li>
1440 <tt>Boolean</tt>
1441 </li>
1442 </ul>
1443
1444 <p>
1445<b>Example</b>
1446</p>
1447
1448<div class="paperscript split">
1449
1450<div class="buttons">
1451<div class="button run">Run</div>
1452</div>
1453
1454<script type="text/paperscript" canvas="canvas-23">
1455var myPath = new Path();
1456myPath.strokeColor = 'black';
1457myPath.add(new Point(50, 75));
1458myPath.add(new Point(100, 25));
1459myPath.add(new Point(150, 75));
1460
1461// Close the path:
1462myPath.closed = true;
1463</script>
1464<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
1465</div>
1466
1467
1468</div>
1469
1470</div>
1471</div>
1472
1473
1474<div id="fullyselected" class="member">
1475<div class="member-link">
1476<a name="fullyselected" href="#fullyselected"><tt><b>fullySelected</b></tt></a>
1477</div>
1478<div class="member-description hidden">
1479
1480<div class="member-text">
1481 <p>Specifies whether the path and all its segments are selected. Cannot be
1482<tt>true</tt> on an empty path.</p>
1483
1484
1485 <ul><b>Type:</b>
1486 <li>
1487 <tt>Boolean</tt>
1488 </li>
1489 </ul>
1490
1491 <p>
1492<b>Example</b> &mdash; A path is fully selected, if all of its segments are selected:
1493</p>
1494
1495<div class="paperscript split">
1496
1497<div class="buttons">
1498<div class="button run">Run</div>
1499</div>
1500
1501<script type="text/paperscript" canvas="canvas-24">
1502var path = new Path.Circle({
1503 center: new Size(80, 50),
1504 radius: 35
1505});
1506path.fullySelected = true;
1507
1508var path2 = new Path.Circle({
1509 center: new Size(180, 50),
1510 radius: 35
1511});
1512
1513// Deselect the second segment of the second path:
1514path2.segments[1].selected = false;
1515
1516// If the path is fully selected (which it is),
1517// set its fill color to red:
1518if (path.fullySelected) {
1519 path.fillColor = 'red';
1520}
1521
1522// If the second path is fully selected (which it isn't, since we just
1523// deselected its second segment),
1524// set its fill color to red:
1525if (path2.fullySelected) {
1526 path2.fillColor = 'red';
1527}
1528</script>
1529<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
1530</div>
1531
1532
1533</div>
1534
1535</div>
1536</div>
1537
1538
1539<div id="clockwise" class="member">
1540<div class="member-link">
1541<a name="clockwise" href="#clockwise"><tt><b>clockwise</b></tt></a>
1542</div>
1543<div class="member-description hidden">
1544
1545<div class="member-text">
1546 <p>Specifies whether the path is oriented clock-wise.</p>
1547
1548
1549 <ul><b>Type:</b>
1550 <li>
1551 <tt>Boolean</tt>
1552 </li>
1553 </ul>
1554
1555
1556</div>
1557
1558</div>
1559</div>
1560
1561
1562<div id="length" class="member">
1563<div class="member-link">
1564<a name="length" href="#length"><tt><b>length</b></tt></a>
1565</div>
1566<div class="member-description hidden">
1567
1568<div class="member-text">
1569 <p>The approximate length of the path in points.</p>
1570
1571 <p>Read only.</p>
1572
1573
1574 <ul><b>Type:</b>
1575 <li>
1576 <tt>Number</tt>
1577 </li>
1578 </ul>
1579
1580
1581</div>
1582
1583</div>
1584</div>
1585
1586
1587<div id="area" class="member">
1588<div class="member-link">
1589<a name="area" href="#area"><tt><b>area</b></tt></a>
1590</div>
1591<div class="member-description hidden">
1592
1593<div class="member-text">
1594 <p>The area of the path in square points. Self-intersecting paths can
1595contain sub-areas that cancel each other out.</p>
1596
1597 <p>Read only.</p>
1598
1599
1600 <ul><b>Type:</b>
1601 <li>
1602 <tt>Number</tt>
1603 </li>
1604 </ul>
1605
1606
1607</div>
1608
1609</div>
1610</div>
1611
1612 </div>
1613
1614
1615
1616<!-- ============================== methods ================================ -->
1617 <div class="reference-members"><h2>Methods</h2>
1618
1619
1620<div id="add-segment" class="member">
1621<div class="member-link">
1622<a name="add-segment" href="#add-segment"><tt><b>add</b>(segment)</tt></a>
1623</div>
1624<div class="member-description hidden">
1625<div class="member-text">
1626 <p>Adds one or more segments to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array of
1627this path.</p>
1628
1629<ul><b>Parameters:</b>
1630
1631<li>
1632<tt>segment:</tt>
1633<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
1634&mdash;&nbsp;the segment or point to be added.
1635
1636</li>
1637
1638</ul>
1639
1640
1641 <ul><b>Returns:</b>
1642
1643 <li>
1644<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
1645object, e.g. if the segment to be added already belongs to another path.
1646</li>
1647
1648 </ul>
1649
1650
1651 <p>
1652<b>Example</b> &mdash; Adding segments to a path using point objects:
1653</p>
1654
1655<div class="paperscript split">
1656
1657<div class="buttons">
1658<div class="button run">Run</div>
1659</div>
1660
1661<script type="text/paperscript" canvas="canvas-25">
1662var path = new Path({
1663 strokeColor: 'black'
1664});
1665
1666// Add a segment at {x: 30, y: 75}
1667path.add(new Point(30, 75));
1668
1669// Add two segments in one go at {x: 100, y: 20}
1670// and {x: 170, y: 75}:
1671path.add(new Point(100, 20), new Point(170, 75));
1672</script>
1673<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
1674</div>
1675
1676
1677<p>
1678<b>Example</b> &mdash; Adding segments to a path using arrays containing number pairs:
1679</p>
1680
1681<div class="paperscript split">
1682
1683<div class="buttons">
1684<div class="button run">Run</div>
1685</div>
1686
1687<script type="text/paperscript" canvas="canvas-26">
1688var path = new Path({
1689 strokeColor: 'black'
1690});
1691
1692// Add a segment at {x: 30, y: 75}
1693path.add([30, 75]);
1694
1695// Add two segments in one go at {x: 100, y: 20}
1696// and {x: 170, y: 75}:
1697path.add([100, 20], [170, 75]);
1698</script>
1699<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
1700</div>
1701
1702
1703<p>
1704<b>Example</b> &mdash; Adding segments to a path using objects:
1705</p>
1706
1707<div class="paperscript split">
1708
1709<div class="buttons">
1710<div class="button run">Run</div>
1711</div>
1712
1713<script type="text/paperscript" canvas="canvas-27">
1714var path = new Path({
1715 strokeColor: 'black'
1716});
1717
1718// Add a segment at {x: 30, y: 75}
1719path.add({x: 30, y: 75});
1720
1721// Add two segments in one go at {x: 100, y: 20}
1722// and {x: 170, y: 75}:
1723path.add({x: 100, y: 20}, {x: 170, y: 75});
1724</script>
1725<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
1726</div>
1727
1728
1729<p>
1730<b>Example</b> &mdash; Adding a segment with handles to a path:
1731</p>
1732
1733<div class="paperscript split">
1734
1735<div class="buttons">
1736<div class="button run">Run</div>
1737</div>
1738
1739<script type="text/paperscript" canvas="canvas-28">
1740var path = new Path({
1741 strokeColor: 'black'
1742});
1743
1744path.add(new Point(30, 75));
1745
1746// Add a segment with handles:
1747var point = new Point(100, 20);
1748var handleIn = new Point(-50, 0);
1749var handleOut = new Point(50, 0);
1750var added = path.add(new Segment(point, handleIn, handleOut));
1751
1752// Select the added segment, so we can see its handles:
1753added.selected = true;
1754
1755path.add(new Point(170, 75));
1756</script>
1757<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
1758</div>
1759
1760
1761</div>
1762</div>
1763</div>
1764
1765
1766<div id="insert-index-segment" class="member">
1767<div class="member-link">
1768<a name="insert-index-segment" href="#insert-index-segment"><tt><b>insert</b>(index, segment)</tt></a>
1769</div>
1770<div class="member-description hidden">
1771<div class="member-text">
1772 <p>Inserts one or more segments at a given index in the list of this path's
1773segments.</p>
1774
1775<ul><b>Parameters:</b>
1776
1777<li>
1778<tt>index:</tt>
1779<tt>Number</tt>
1780&mdash;&nbsp;the index at which to insert the segment.
1781
1782</li>
1783
1784<li>
1785<tt>segment:</tt>
1786<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
1787&mdash;&nbsp;the segment or point to be inserted.
1788
1789</li>
1790
1791</ul>
1792
1793
1794 <ul><b>Returns:</b>
1795
1796 <li>
1797<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
1798object, e.g. if the segment to be added already belongs to another path.
1799</li>
1800
1801 </ul>
1802
1803
1804 <p>
1805<b>Example</b> &mdash; Inserting a segment:
1806</p>
1807
1808<div class="paperscript split">
1809
1810<div class="buttons">
1811<div class="button run">Run</div>
1812</div>
1813
1814<script type="text/paperscript" canvas="canvas-29">
1815var myPath = new Path();
1816myPath.strokeColor = 'black';
1817myPath.add(new Point(50, 75));
1818myPath.add(new Point(150, 75));
1819
1820// Insert a new segment into myPath at index 1:
1821myPath.insert(1, new Point(100, 25));
1822
1823// Select the segment which we just inserted:
1824myPath.segments[1].selected = true;
1825</script>
1826<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
1827</div>
1828
1829
1830<p>
1831<b>Example</b> &mdash; Inserting multiple segments:
1832</p>
1833
1834<div class="paperscript split">
1835
1836<div class="buttons">
1837<div class="button run">Run</div>
1838</div>
1839
1840<script type="text/paperscript" canvas="canvas-30">
1841var myPath = new Path();
1842myPath.strokeColor = 'black';
1843myPath.add(new Point(50, 75));
1844myPath.add(new Point(150, 75));
1845
1846// Insert two segments into myPath at index 1:
1847myPath.insert(1, [80, 25], [120, 25]);
1848
1849// Select the segments which we just inserted:
1850myPath.segments[1].selected = true;
1851myPath.segments[2].selected = true;
1852</script>
1853<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
1854</div>
1855
1856
1857</div>
1858</div>
1859</div>
1860
1861
1862<div id="addsegments-segments" class="member">
1863<div class="member-link">
1864<a name="addsegments-segments" href="#addsegments-segments"><tt><b>addSegments</b>(segments)</tt></a>
1865</div>
1866<div class="member-description hidden">
1867<div class="member-text">
1868 <p>Adds an array of segments (or types that can be converted to segments)
1869to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
1870
1871<ul><b>Parameters:</b>
1872
1873<li>
1874<tt>segments:</tt>
1875Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
1876
1877
1878</li>
1879
1880</ul>
1881
1882
1883 <ul><b>Returns:</b>
1884
1885 <li>
1886<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
1887not necessarily the same objects, e.g. if the segment to be added already
1888belongs to another path.
1889</li>
1890
1891 </ul>
1892
1893
1894 <p>
1895<b>Example</b> &mdash; Adding an array of Point objects:
1896</p>
1897
1898<div class="paperscript split">
1899
1900<div class="buttons">
1901<div class="button run">Run</div>
1902</div>
1903
1904<script type="text/paperscript" canvas="canvas-31">
1905var path = new Path({
1906 strokeColor: 'black'
1907});
1908var points = [new Point(30, 50), new Point(170, 50)];
1909path.addSegments(points);
1910</script>
1911<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
1912</div>
1913
1914
1915<p>
1916<b>Example</b> &mdash; Adding an array of [x, y] arrays:
1917</p>
1918
1919<div class="paperscript split">
1920
1921<div class="buttons">
1922<div class="button run">Run</div>
1923</div>
1924
1925<script type="text/paperscript" canvas="canvas-32">
1926var path = new Path({
1927 strokeColor: 'black'
1928});
1929var array = [[30, 75], [100, 20], [170, 75]];
1930path.addSegments(array);
1931</script>
1932<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
1933</div>
1934
1935
1936<p>
1937<b>Example</b> &mdash; Adding segments from one path to another:
1938</p>
1939
1940<div class="paperscript split">
1941
1942<div class="buttons">
1943<div class="button run">Run</div>
1944</div>
1945
1946<script type="text/paperscript" canvas="canvas-33">
1947var path = new Path({
1948 strokeColor: 'black'
1949});
1950path.addSegments([[30, 75], [100, 20], [170, 75]]);
1951
1952var path2 = new Path();
1953path2.strokeColor = 'red';
1954
1955// Add the second and third segments of path to path2:
1956path2.add(path.segments[1], path.segments[2]);
1957
1958// Move path2 30pt to the right:
1959path2.position.x += 30;
1960</script>
1961<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
1962</div>
1963
1964
1965</div>
1966</div>
1967</div>
1968
1969
1970<div id="insertsegments-index-segments" class="member">
1971<div class="member-link">
1972<a name="insertsegments-index-segments" href="#insertsegments-index-segments"><tt><b>insertSegments</b>(index, segments)</tt></a>
1973</div>
1974<div class="member-description hidden">
1975<div class="member-text">
1976 <p>Inserts an array of segments at a given index in the path's
1977<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
1978
1979<ul><b>Parameters:</b>
1980
1981<li>
1982<tt>index:</tt>
1983<tt>Number</tt>
1984&mdash;&nbsp;the index at which to insert the segments.
1985
1986</li>
1987
1988<li>
1989<tt>segments:</tt>
1990Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
1991&mdash;&nbsp;the segments to be inserted.
1992
1993</li>
1994
1995</ul>
1996
1997
1998 <ul><b>Returns:</b>
1999
2000 <li>
2001<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
2002not necessarily the same objects, e.g. if the segment to be added already
2003belongs to another path.
2004</li>
2005
2006 </ul>
2007
2008
2009
2010</div>
2011</div>
2012</div>
2013
2014
2015<div id="removesegment-index" class="member">
2016<div class="member-link">
2017<a name="removesegment-index" href="#removesegment-index"><tt><b>removeSegment</b>(index)</tt></a>
2018</div>
2019<div class="member-description hidden">
2020<div class="member-text">
2021 <p>Removes the segment at the specified index of the path's
2022<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
2023
2024<ul><b>Parameters:</b>
2025
2026<li>
2027<tt>index:</tt>
2028<tt>Number</tt>
2029&mdash;&nbsp;the index of the segment to be removed
2030
2031</li>
2032
2033</ul>
2034
2035
2036 <ul><b>Returns:</b>
2037
2038 <li>
2039<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the removed segment
2040</li>
2041
2042 </ul>
2043
2044
2045 <p>
2046<b>Example</b> &mdash; Removing a segment from a path:
2047</p>
2048
2049<div class="paperscript split">
2050
2051<div class="buttons">
2052<div class="button run">Run</div>
2053</div>
2054
2055<script type="text/paperscript" canvas="canvas-34">
2056// Create a circle shaped path at { x: 80, y: 50 }
2057// with a radius of 35:
2058var path = new Path.Circle({
2059 center: new Point(80, 50),
2060 radius: 35,
2061 strokeColor: 'black'
2062});
2063
2064// Remove its second segment:
2065path.removeSegment(1);
2066
2067// Select the path, so we can see its segments:
2068path.selected = true;
2069</script>
2070<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
2071</div>
2072
2073
2074</div>
2075</div>
2076</div>
2077
2078
2079<div id="removesegments" class="member">
2080<div class="member-link">
2081<a name="removesegments" href="#removesegments"><tt><b>removeSegments</b>()</tt></a>
2082</div>
2083<div class="member-description hidden">
2084<div class="member-text">
2085 <p>Removes all segments from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
2086
2087
2088 <ul><b>Returns:</b>
2089
2090 <li>
2091<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
2092</li>
2093
2094 </ul>
2095
2096
2097
2098</div>
2099</div>
2100</div>
2101
2102
2103<div id="removesegments-from" class="member">
2104<div class="member-link">
2105<a name="removesegments-from" href="#removesegments-from"><tt><b>removeSegments</b>(from[, to])</tt></a>
2106</div>
2107<div class="member-description hidden">
2108<div class="member-text">
2109 <p>Removes the segments from the specified <tt>from</tt> index to the
2110<tt>to</tt> index from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
2111
2112<ul><b>Parameters:</b>
2113
2114<li>
2115<tt>from:</tt>
2116<tt>Number</tt>
2117&mdash;&nbsp;the beginning index, inclusive
2118
2119</li>
2120
2121<li>
2122<tt>to:</tt>
2123<tt>Number</tt>
2124&mdash;&nbsp;the ending index, exclusive
2125&mdash;&nbsp;optional, default: <tt>segments.length</tt>
2126</li>
2127
2128</ul>
2129
2130
2131 <ul><b>Returns:</b>
2132
2133 <li>
2134<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
2135</li>
2136
2137 </ul>
2138
2139
2140 <p>
2141<b>Example</b> &mdash; Removing segments from a path:
2142</p>
2143
2144<div class="paperscript split">
2145
2146<div class="buttons">
2147<div class="button run">Run</div>
2148</div>
2149
2150<script type="text/paperscript" canvas="canvas-35">
2151// Create a circle shaped path at { x: 80, y: 50 }
2152// with a radius of 35:
2153var path = new Path.Circle({
2154 center: new Point(80, 50),
2155 radius: 35,
2156 strokeColor: 'black'
2157});
2158
2159// Remove the segments from index 1 till index 2:
2160path.removeSegments(1, 2);
2161
2162// Select the path, so we can see its segments:
2163path.selected = true;
2164</script>
2165<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
2166</div>
2167
2168
2169</div>
2170</div>
2171</div>
2172
2173
2174<div id="flatten-maxDistance" class="member">
2175<div class="member-link">
2176<a name="flatten-maxDistance" href="#flatten-maxDistance"><tt><b>flatten</b>(maxDistance)</tt></a>
2177</div>
2178<div class="member-description hidden">
2179<div class="member-text">
2180 <p>Converts the curves in a path to straight lines with an even distribution
2181of points. The distance between the produced segments is as close as
2182possible to the value specified by the <tt>maxDistance</tt> parameter.</p>
2183
2184<ul><b>Parameters:</b>
2185
2186<li>
2187<tt>maxDistance:</tt>
2188<tt>Number</tt>
2189&mdash;&nbsp;the maximum distance between the points
2190
2191</li>
2192
2193</ul>
2194
2195
2196
2197 <p>
2198<b>Example</b> &mdash; Flattening a circle shaped path:
2199</p>
2200
2201<div class="paperscript split">
2202
2203<div class="buttons">
2204<div class="button run">Run</div>
2205</div>
2206
2207<script type="text/paperscript" canvas="canvas-36">
2208// Create a circle shaped path at { x: 80, y: 50 }
2209// with a radius of 35:
2210var path = new Path.Circle({
2211 center: new Size(80, 50),
2212 radius: 35
2213});
2214
2215// Select the path, so we can inspect its segments:
2216path.selected = true;
2217
2218// Create a copy of the path and move it 150 points to the right:
2219var copy = path.clone();
2220copy.position.x += 150;
2221
2222// Convert its curves to points, with a max distance of 20:
2223copy.flatten(20);
2224</script>
2225<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
2226</div>
2227
2228
2229</div>
2230</div>
2231</div>
2232
2233
2234<div id="simplify" class="member">
2235<div class="member-link">
2236<a name="simplify" href="#simplify"><tt><b>simplify</b>([tolerance])</tt></a>
2237</div>
2238<div class="member-description hidden">
2239<div class="member-text">
2240 <p>Smooths a path by simplifying it. The <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array is
2241analyzed and replaced by a more optimal set of segments, reducing memory
2242usage and speeding up drawing.</p>
2243
2244<ul><b>Parameters:</b>
2245
2246<li>
2247<tt>tolerance:</tt>
2248<tt>Number</tt>
2249
2250&mdash;&nbsp;optional, default: <tt>2.5</tt>
2251</li>
2252
2253</ul>
2254
2255
2256
2257 <p>
2258<b>Example</b> &mdash; Click and drag below to draw to draw a line, when you release the mouse, the is made smooth using path.simplify():
2259</p>
2260
2261<div class="paperscript split">
2262
2263<div class="buttons">
2264<div class="button run">Run</div>
2265</div>
2266
2267<script type="text/paperscript" canvas="canvas-37">
2268var path;
2269function onMouseDown(event) {
2270 // If we already made a path before, deselect it:
2271 if (path) {
2272 path.selected = false;
2273 }
2274
2275 // Create a new path and add the position of the mouse
2276 // as its first segment. Select it, so we can see the
2277 // segment points:
2278 path = new Path({
2279 segments: [event.point],
2280 strokeColor: 'black',
2281 selected: true
2282 });
2283}
2284
2285function onMouseDrag(event) {
2286 // On every drag event, add a segment to the path
2287 // at the position of the mouse:
2288 path.add(event.point);
2289}
2290
2291function onMouseUp(event) {
2292 // When the mouse is released, simplify the path:
2293 path.simplify();
2294 path.selected = true;
2295}
2296</script>
2297<div class="canvas"><canvas width="516" height="300" id="canvas-37"></canvas></div>
2298</div>
2299
2300
2301</div>
2302</div>
2303</div>
2304
2305
2306<div id="split-offset" class="member">
2307<div class="member-link">
2308<a name="split-offset" href="#split-offset"><tt><b>split</b>(offset)</tt></a>
2309</div>
2310<div class="member-description hidden">
2311<div class="member-text">
2312 <p>Splits the path at the given offset. After splitting, the path will be
2313open. If the path was open already, splitting will result in two paths.</p>
2314
2315<ul><b>Parameters:</b>
2316
2317<li>
2318<tt>offset:</tt>
2319<tt>Number</tt>
2320&mdash;&nbsp;the offset at which to split the path
2321as a number between 0 and <a href="../classes/Path.html#length"><tt>path.length</tt></a>
2322
2323</li>
2324
2325</ul>
2326
2327
2328 <ul><b>Returns:</b>
2329
2330 <li>
2331<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path after splitting, if any
2332</li>
2333
2334 </ul>
2335
2336
2337 <p>
2338<b>Example</b> &mdash; Splitting an open path
2339</p>
2340
2341<div class="paperscript split">
2342
2343<div class="buttons">
2344<div class="button run">Run</div>
2345</div>
2346
2347<script type="text/paperscript" canvas="canvas-38">
2348var path = new Path();
2349path.strokeColor = 'black';
2350path.add(20, 20);
2351
2352// Add an arc through {x: 90, y: 80} to {x: 160, y: 20}
2353path.arcTo([90, 80], [160, 20]);
2354
2355// Split the path at 30% of its length:
2356var path2 = path.split(path.length * 0.3);
2357path2.strokeColor = 'red';
2358
2359// Move the newly created path 40px to the right:
2360path2.position.x += 40;
2361</script>
2362<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
2363</div>
2364
2365
2366<p>
2367<b>Example</b> &mdash; Splitting a closed path
2368</p>
2369
2370<div class="paperscript split">
2371
2372<div class="buttons">
2373<div class="button run">Run</div>
2374</div>
2375
2376<script type="text/paperscript" canvas="canvas-39">
2377var path = new Path.Rectangle({
2378 from: [20, 20],
2379 to: [80, 80],
2380 strokeColor: 'black'
2381});
2382
2383// Split the path at 60% of its length:
2384path.split(path.length * 0.6);
2385
2386// Move the first segment, to show where the path
2387// was split:
2388path.firstSegment.point.x += 20;
2389
2390// Select the first segment:
2391path.firstSegment.selected = true;
2392</script>
2393<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
2394</div>
2395
2396
2397</div>
2398</div>
2399</div>
2400
2401
2402<div id="split-location" class="member">
2403<div class="member-link">
2404<a name="split-location" href="#split-location"><tt><b>split</b>(location)</tt></a>
2405</div>
2406<div class="member-description hidden">
2407<div class="member-text">
2408 <p>Splits the path at the given curve location. After splitting, the path
2409will be open. If the path was open already, splitting will result in two
2410paths.</p>
2411
2412<ul><b>Parameters:</b>
2413
2414<li>
2415<tt>location:</tt>
2416<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
2417&mdash;&nbsp;the curve location at which to split
2418the path
2419
2420</li>
2421
2422</ul>
2423
2424
2425 <ul><b>Returns:</b>
2426
2427 <li>
2428<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path after splitting, if any
2429</li>
2430
2431 </ul>
2432
2433
2434 <p>
2435<b>Example</b>
2436</p>
2437
2438<div class="paperscript split">
2439
2440<div class="buttons">
2441<div class="button run">Run</div>
2442</div>
2443
2444<script type="text/paperscript" canvas="canvas-40">
2445var path = new Path.Circle({
2446 center: view.center,
2447 radius: 40,
2448 strokeColor: 'black'
2449});
2450
2451var pointOnCircle = view.center + {
2452 length: 40,
2453 angle: 30
2454};
2455
2456var curveLocation = path.getNearestLocation(pointOnCircle);
2457
2458path.split(curveLocation);
2459path.lastSegment.selected = true;
2460</script>
2461<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
2462</div>
2463
2464
2465</div>
2466</div>
2467</div>
2468
2469
2470<div id="split-index-parameter" class="member">
2471<div class="member-link">
2472<a name="split-index-parameter" href="#split-index-parameter"><tt><b>split</b>(index, parameter)</tt></a>
2473</div>
2474<div class="member-description hidden">
2475<div class="member-text">
2476 <p>Splits the path at the given curve index and parameter. After splitting,
2477the path will be open. If the path was open already, splitting will
2478result in two paths.</p>
2479
2480<ul><b>Parameters:</b>
2481
2482<li>
2483<tt>index:</tt>
2484<tt>Number</tt>
2485&mdash;&nbsp;the index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a>
2486array at which to split
2487
2488</li>
2489
2490<li>
2491<tt>parameter:</tt>
2492<tt>Number</tt>
2493&mdash;&nbsp;the parameter at which the curve will be split
2494
2495</li>
2496
2497</ul>
2498
2499
2500 <ul><b>Returns:</b>
2501
2502 <li>
2503<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path after splitting, if any
2504</li>
2505
2506 </ul>
2507
2508
2509 <p>
2510<b>Example</b> &mdash; Splitting an open path Draw a V shaped path:
2511</p>
2512
2513<div class="paperscript split">
2514
2515<div class="buttons">
2516<div class="button run">Run</div>
2517</div>
2518
2519<script type="text/paperscript" canvas="canvas-41">
2520var path = new Path([20, 20], [50, 80], [80, 20]);
2521path.strokeColor = 'black';
2522
2523// Split the path half-way down its second curve:
2524var path2 = path.split(1, 0.5);
2525
2526// Give the resulting path a red stroke-color
2527// and move it 20px to the right:
2528path2.strokeColor = 'red';
2529path2.position.x += 20;
2530</script>
2531<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
2532</div>
2533
2534
2535<p>
2536<b>Example</b> &mdash; Splitting a closed path
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-42">
2546var path = new Path.Rectangle({
2547 from: [20, 20],
2548 to: [80, 80],
2549 strokeColor: 'black'
2550});
2551
2552// Split the path half-way down its second curve:
2553path.split(2, 0.5);
2554
2555// Move the first segment, to show where the path
2556// was split:
2557path.firstSegment.point.x += 20;
2558
2559// Select the first segment:
2560path.firstSegment.selected = true;
2561</script>
2562<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
2563</div>
2564
2565
2566</div>
2567</div>
2568</div>
2569
2570
2571<div id="reverse" class="member">
2572<div class="member-link">
2573<a name="reverse" href="#reverse"><tt><b>reverse</b>()</tt></a>
2574</div>
2575<div class="member-description hidden">
2576<div class="member-text">
2577 <p>Reverses the orientation of the path, by reversing all its segments.</p>
2578
2579
2580
2581
2582</div>
2583</div>
2584</div>
2585
2586
2587<div id="join-path" class="member">
2588<div class="member-link">
2589<a name="join-path" href="#join-path"><tt><b>join</b>(path)</tt></a>
2590</div>
2591<div class="member-description hidden">
2592<div class="member-text">
2593 <p>Joins the path with the specified path, which will be removed in the
2594process.</p>
2595
2596<ul><b>Parameters:</b>
2597
2598<li>
2599<tt>path:</tt>
2600<a href="../classes/Path.html"><tt>Path</tt></a>
2601
2602
2603</li>
2604
2605</ul>
2606
2607
2608
2609 <p>
2610<b>Example</b> &mdash; Joining two paths:
2611</p>
2612
2613<div class="paperscript split">
2614
2615<div class="buttons">
2616<div class="button run">Run</div>
2617</div>
2618
2619<script type="text/paperscript" canvas="canvas-43">
2620var path = new Path({
2621 segments: [[30, 25], [30, 75]],
2622 strokeColor: 'black'
2623});
2624
2625var path2 = new Path({
2626 segments: [[200, 25], [200, 75]],
2627 strokeColor: 'black'
2628});
2629
2630// Join the paths:
2631path.join(path2);
2632</script>
2633<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
2634</div>
2635
2636
2637<p>
2638<b>Example</b> &mdash; Joining two paths that share a point at the start or end of their segments array:
2639</p>
2640
2641<div class="paperscript split">
2642
2643<div class="buttons">
2644<div class="button run">Run</div>
2645</div>
2646
2647<script type="text/paperscript" canvas="canvas-44">
2648var path = new Path({
2649 segments: [[30, 25], [30, 75]],
2650 strokeColor: 'black'
2651});
2652
2653var path2 = new Path({
2654 segments: [[30, 25], [80, 25]],
2655 strokeColor: 'black'
2656});
2657
2658// Join the paths:
2659path.join(path2);
2660
2661// After joining, path with have 3 segments, since it
2662// shared its first segment point with the first
2663// segment point of path2.
2664
2665// Select the path to show that they have joined:
2666path.selected = true;
2667</script>
2668<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
2669</div>
2670
2671
2672<p>
2673<b>Example</b> &mdash; Joining two paths that connect at two points:
2674</p>
2675
2676<div class="paperscript split">
2677
2678<div class="buttons">
2679<div class="button run">Run</div>
2680</div>
2681
2682<script type="text/paperscript" canvas="canvas-45">
2683var path = new Path({
2684 segments: [[30, 25], [80, 25], [80, 75]],
2685 strokeColor: 'black'
2686});
2687
2688var path2 = new Path({
2689 segments: [[30, 25], [30, 75], [80, 75]],
2690 strokeColor: 'black'
2691});
2692
2693// Join the paths:
2694path.join(path2);
2695
2696// Because the paths were joined at two points, the path is closed
2697// and has 4 segments.
2698
2699// Select the path to show that they have joined:
2700path.selected = true;
2701</script>
2702<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
2703</div>
2704
2705
2706</div>
2707</div>
2708</div>
2709
2710
2711<div id="getlocationof-point" class="member">
2712<div class="member-link">
2713<a name="getlocationof-point" href="#getlocationof-point"><tt><b>getLocationOf</b>(point)</tt></a>
2714</div>
2715<div class="member-description hidden">
2716<div class="member-text">
2717 <p>Returns the curve location of the specified point if it lies on the
2718path, <tt>null</tt> otherwise.</p>
2719
2720<ul><b>Parameters:</b>
2721
2722<li>
2723<tt>point:</tt>
2724<a href="../classes/Point.html"><tt>Point</tt></a>
2725&mdash;&nbsp;the point on the path.
2726
2727</li>
2728
2729</ul>
2730
2731
2732 <ul><b>Returns:</b>
2733
2734 <li>
2735<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;the curve location of the specified point.
2736</li>
2737
2738 </ul>
2739
2740
2741
2742</div>
2743</div>
2744</div>
2745
2746
2747<h3>Positions on Paths and Curves</h3>
2748
2749<div id="getlocationat-offset" class="member">
2750<div class="member-link">
2751<a name="getlocationat-offset" href="#getlocationat-offset"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
2752</div>
2753<div class="member-description hidden">
2754<div class="member-text">
2755
2756
2757<ul><b>Parameters:</b>
2758
2759<li>
2760<tt>offset:</tt>
2761<tt>Number</tt>
2762
2763
2764</li>
2765
2766<li>
2767<tt>isParameter:</tt>
2768<tt>Boolean</tt>
2769
2770&mdash;&nbsp;optional, default: <tt>false</tt>
2771</li>
2772
2773</ul>
2774
2775
2776 <ul><b>Returns:</b>
2777
2778 <li>
2779<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>
2780</li>
2781
2782 </ul>
2783
2784
2785
2786</div>
2787</div>
2788</div>
2789
2790
2791<div id="getpointat-offset" class="member">
2792<div class="member-link">
2793<a name="getpointat-offset" href="#getpointat-offset"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
2794</div>
2795<div class="member-description hidden">
2796<div class="member-text">
2797 <p>Calculates the point on the path at the given offset.</p>
2798
2799<ul><b>Parameters:</b>
2800
2801<li>
2802<tt>offset:</tt>
2803<tt>Number</tt>
2804
2805
2806</li>
2807
2808<li>
2809<tt>isParameter:</tt>
2810<tt>Boolean</tt>
2811
2812&mdash;&nbsp;optional, default: <tt>false</tt>
2813</li>
2814
2815</ul>
2816
2817
2818 <ul><b>Returns:</b>
2819
2820 <li>
2821<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the point at the given offset
2822</li>
2823
2824 </ul>
2825
2826
2827 <p>
2828<b>Example</b> &mdash; Finding the point on a path at a given offset:
2829</p>
2830
2831<div class="paperscript split">
2832
2833<div class="buttons">
2834<div class="button run">Run</div>
2835</div>
2836
2837<script type="text/paperscript" canvas="canvas-46">
2838// Create an arc shaped path:
2839var path = new Path({
2840 strokeColor: 'black'
2841});
2842
2843path.add(new Point(40, 100));
2844path.arcTo(new Point(150, 100));
2845
2846// We're going to be working with a third of the length
2847// of the path as the offset:
2848var offset = path.length / 3;
2849
2850// Find the point on the path:
2851var point = path.getPointAt(offset);
2852
2853// Create a small circle shaped path at the point:
2854var circle = new Path.Circle({
2855 center: point,
2856 radius: 3,
2857 fillColor: 'red'
2858});
2859</script>
2860<div class="canvas"><canvas width="516" height="150" id="canvas-46"></canvas></div>
2861</div>
2862
2863
2864<p>
2865<b>Example</b> &mdash; Iterating over the length of a path:
2866</p>
2867
2868<div class="paperscript split">
2869
2870<div class="buttons">
2871<div class="button run">Run</div>
2872</div>
2873
2874<script type="text/paperscript" canvas="canvas-47">
2875// Create an arc shaped path:
2876var path = new Path({
2877 strokeColor: 'black'
2878});
2879
2880path.add(new Point(40, 100));
2881path.arcTo(new Point(150, 100));
2882
2883var amount = 5;
2884var length = path.length;
2885for (var i = 0; i < amount + 1; i++) {
2886 var offset = i / amount * length;
2887
2888 // Find the point on the path at the given offset:
2889 var point = path.getPointAt(offset);
2890
2891 // Create a small circle shaped path at the point:
2892 var circle = new Path.Circle({
2893 center: point,
2894 radius: 3,
2895 fillColor: 'red'
2896 });
2897}
2898</script>
2899<div class="canvas"><canvas width="516" height="150" id="canvas-47"></canvas></div>
2900</div>
2901
2902
2903</div>
2904</div>
2905</div>
2906
2907
2908<div id="gettangentat-offset" class="member">
2909<div class="member-link">
2910<a name="gettangentat-offset" href="#gettangentat-offset"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
2911</div>
2912<div class="member-description hidden">
2913<div class="member-text">
2914 <p>Calculates the tangent to the path at the given offset as a vector point.</p>
2915
2916<ul><b>Parameters:</b>
2917
2918<li>
2919<tt>offset:</tt>
2920<tt>Number</tt>
2921
2922
2923</li>
2924
2925<li>
2926<tt>isParameter:</tt>
2927<tt>Boolean</tt>
2928
2929&mdash;&nbsp;optional, default: <tt>false</tt>
2930</li>
2931
2932</ul>
2933
2934
2935 <ul><b>Returns:</b>
2936
2937 <li>
2938<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the tangent vector at the given offset
2939</li>
2940
2941 </ul>
2942
2943
2944 <p>
2945<b>Example</b> &mdash; Working with the tangent vector at a given offset:
2946</p>
2947
2948<div class="paperscript split">
2949
2950<div class="buttons">
2951<div class="button run">Run</div>
2952</div>
2953
2954<script type="text/paperscript" canvas="canvas-48">
2955// Create an arc shaped path:
2956var path = new Path({
2957 strokeColor: 'black'
2958});
2959
2960path.add(new Point(40, 100));
2961path.arcTo(new Point(150, 100));
2962
2963// We're going to be working with a third of the length
2964// of the path as the offset:
2965var offset = path.length / 3;
2966
2967// Find the point on the path:
2968var point = path.getPointAt(offset);
2969
2970// Find the tangent vector at the given offset:
2971var tangent = path.getTangentAt(offset);
2972
2973// Make the tangent vector 60pt long:
2974tangent.length = 60;
2975
2976var line = new Path({
2977 segments: [point, point + tangent],
2978 strokeColor: 'red'
2979})
2980</script>
2981<div class="canvas"><canvas width="516" height="150" id="canvas-48"></canvas></div>
2982</div>
2983
2984
2985<p>
2986<b>Example</b> &mdash; Iterating over the length of a path:
2987</p>
2988
2989<div class="paperscript split">
2990
2991<div class="buttons">
2992<div class="button run">Run</div>
2993</div>
2994
2995<script type="text/paperscript" canvas="canvas-49">
2996// Create an arc shaped path:
2997var path = new Path({
2998 strokeColor: 'black'
2999});
3000
3001path.add(new Point(40, 100));
3002path.arcTo(new Point(150, 100));
3003
3004var amount = 6;
3005var length = path.length;
3006for (var i = 0; i < amount + 1; i++) {
3007 var offset = i / amount * length;
3008
3009 // Find the point on the path at the given offset:
3010 var point = path.getPointAt(offset);
3011
3012 // Find the normal vector on the path at the given offset:
3013 var tangent = path.getTangentAt(offset);
3014
3015 // Make the tangent vector 60pt long:
3016 tangent.length = 60;
3017
3018 var line = new Path({
3019 segments: [point, point + tangent],
3020 strokeColor: 'red'
3021 })
3022}
3023</script>
3024<div class="canvas"><canvas width="516" height="200" id="canvas-49"></canvas></div>
3025</div>
3026
3027
3028</div>
3029</div>
3030</div>
3031
3032
3033<div id="getnormalat-offset" class="member">
3034<div class="member-link">
3035<a name="getnormalat-offset" href="#getnormalat-offset"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
3036</div>
3037<div class="member-description hidden">
3038<div class="member-text">
3039 <p>Calculates the normal to the path at the given offset as a vector point.</p>
3040
3041<ul><b>Parameters:</b>
3042
3043<li>
3044<tt>offset:</tt>
3045<tt>Number</tt>
3046
3047
3048</li>
3049
3050<li>
3051<tt>isParameter:</tt>
3052<tt>Boolean</tt>
3053
3054&mdash;&nbsp;optional, default: <tt>false</tt>
3055</li>
3056
3057</ul>
3058
3059
3060 <ul><b>Returns:</b>
3061
3062 <li>
3063<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the normal vector at the given offset
3064</li>
3065
3066 </ul>
3067
3068
3069 <p>
3070<b>Example</b> &mdash; Working with the normal vector at a given offset:
3071</p>
3072
3073<div class="paperscript split">
3074
3075<div class="buttons">
3076<div class="button run">Run</div>
3077</div>
3078
3079<script type="text/paperscript" canvas="canvas-50">
3080// Create an arc shaped path:
3081var path = new Path({
3082 strokeColor: 'black'
3083});
3084
3085path.add(new Point(40, 100));
3086path.arcTo(new Point(150, 100));
3087
3088// We're going to be working with a third of the length
3089// of the path as the offset:
3090var offset = path.length / 3;
3091
3092// Find the point on the path:
3093var point = path.getPointAt(offset);
3094
3095// Find the normal vector at the given offset:
3096var normal = path.getNormalAt(offset);
3097
3098// Make the normal vector 30pt long:
3099normal.length = 30;
3100
3101var line = new Path({
3102 segments: [point, point + normal],
3103 strokeColor: 'red'
3104});
3105</script>
3106<div class="canvas"><canvas width="516" height="150" id="canvas-50"></canvas></div>
3107</div>
3108
3109
3110<p>
3111<b>Example</b> &mdash; Iterating over the length of a path:
3112</p>
3113
3114<div class="paperscript split">
3115
3116<div class="buttons">
3117<div class="button run">Run</div>
3118</div>
3119
3120<script type="text/paperscript" canvas="canvas-51">
3121// Create an arc shaped path:
3122var path = new Path({
3123 strokeColor: 'black'
3124});
3125
3126path.add(new Point(40, 100));
3127path.arcTo(new Point(150, 100));
3128
3129var amount = 10;
3130var length = path.length;
3131for (var i = 0; i < amount + 1; i++) {
3132 var offset = i / amount * length;
3133
3134 // Find the point on the path at the given offset:
3135 var point = path.getPointAt(offset);
3136
3137 // Find the normal vector on the path at the given offset:
3138 var normal = path.getNormalAt(offset);
3139
3140 // Make the normal vector 30pt long:
3141 normal.length = 30;
3142
3143 var line = new Path({
3144 segments: [point, point + normal],
3145 strokeColor: 'red'
3146 });
3147}
3148</script>
3149<div class="canvas"><canvas width="516" height="200" id="canvas-51"></canvas></div>
3150</div>
3151
3152
3153</div>
3154</div>
3155</div>
3156
3157
3158<div id="getnearestlocation-point" class="member">
3159<div class="member-link">
3160<a name="getnearestlocation-point" href="#getnearestlocation-point"><tt><b>getNearestLocation</b>(point)</tt></a>
3161</div>
3162<div class="member-description hidden">
3163<div class="member-text">
3164 <p>Returns the nearest location on the path to the specified point.</p>
3165
3166<ul><b>Parameters:</b>
3167
3168<li>
3169<tt>point:</tt>
3170
3171&mdash;&nbsp;{Point} the point for which we search the nearest location
3172
3173</li>
3174
3175</ul>
3176
3177
3178 <ul><b>Returns:</b>
3179
3180 <li>
3181<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;the location on the path that's the closest to
3182the specified point
3183</li>
3184
3185 </ul>
3186
3187
3188
3189</div>
3190</div>
3191</div>
3192
3193
3194<div id="getnearestpoint-point" class="member">
3195<div class="member-link">
3196<a name="getnearestpoint-point" href="#getnearestpoint-point"><tt><b>getNearestPoint</b>(point)</tt></a>
3197</div>
3198<div class="member-description hidden">
3199<div class="member-text">
3200 <p>Returns the nearest point on the path to the specified point.</p>
3201
3202<ul><b>Parameters:</b>
3203
3204<li>
3205<tt>point:</tt>
3206
3207&mdash;&nbsp;{Point} the point for which we search the nearest point
3208
3209</li>
3210
3211</ul>
3212
3213
3214 <ul><b>Returns:</b>
3215
3216 <li>
3217<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the point on the path that's the closest to the specified
3218point
3219</li>
3220
3221 </ul>
3222
3223
3224 <p>
3225<b>Example</b>
3226</p>
3227
3228<div class="paperscript split">
3229
3230<div class="buttons">
3231<div class="button run">Run</div>
3232</div>
3233
3234<script type="text/paperscript" canvas="canvas-52">
3235var star = new Path.Star({
3236 center: view.center,
3237 points: 10,
3238 radius1: 30,
3239 radius2: 60,
3240 strokeColor: 'black'
3241});
3242
3243var circle = new Path.Circle({
3244 center: view.center,
3245 radius: 3,
3246 fillColor: 'red'
3247});
3248
3249function onMouseMove(event) {
3250 // Get the nearest point from the mouse position
3251 // to the star shaped path:
3252 var nearestPoint = star.getNearestPoint(event.point);
3253
3254 // Move the red circle to the nearest point:
3255 circle.position = nearestPoint;
3256}
3257</script>
3258<div class="canvas"><canvas width="516" height="200" id="canvas-52"></canvas></div>
3259</div>
3260
3261
3262</div>
3263</div>
3264</div>
3265
3266
3267<div id="unite-path" class="member">
3268<div class="member-link">
3269<a name="unite-path" href="#unite-path"><tt><b>unite</b>(path)</tt></a>
3270</div>
3271<div class="member-description hidden">
3272<div class="member-text">
3273 <p>Merges the geometry of the specified path from this path's
3274geometry and returns the result as a new path item.</p>
3275
3276<ul><b>Parameters:</b>
3277
3278<li>
3279<tt>path:</tt>
3280<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3281&mdash;&nbsp;the path to unite with
3282
3283</li>
3284
3285</ul>
3286
3287
3288 <ul><b>Returns:</b>
3289
3290 <li>
3291<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
3292</li>
3293
3294 </ul>
3295
3296
3297
3298</div>
3299</div>
3300</div>
3301
3302
3303<div id="intersect-path" class="member">
3304<div class="member-link">
3305<a name="intersect-path" href="#intersect-path"><tt><b>intersect</b>(path)</tt></a>
3306</div>
3307<div class="member-description hidden">
3308<div class="member-text">
3309 <p>Intersects the geometry of the specified path with this path's
3310geometry and returns the result as a new path item.</p>
3311
3312<ul><b>Parameters:</b>
3313
3314<li>
3315<tt>path:</tt>
3316<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3317&mdash;&nbsp;the path to intersect with
3318
3319</li>
3320
3321</ul>
3322
3323
3324 <ul><b>Returns:</b>
3325
3326 <li>
3327<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
3328</li>
3329
3330 </ul>
3331
3332
3333
3334</div>
3335</div>
3336</div>
3337
3338
3339<div id="subtract-path" class="member">
3340<div class="member-link">
3341<a name="subtract-path" href="#subtract-path"><tt><b>subtract</b>(path)</tt></a>
3342</div>
3343<div class="member-description hidden">
3344<div class="member-text">
3345 <p>Subtracts the geometry of the specified path from this path's
3346geometry and returns the result as a new path item.</p>
3347
3348<ul><b>Parameters:</b>
3349
3350<li>
3351<tt>path:</tt>
3352<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3353&mdash;&nbsp;the path to subtract
3354
3355</li>
3356
3357</ul>
3358
3359
3360 <ul><b>Returns:</b>
3361
3362 <li>
3363<tt><a href="../classes/PathItem.html"><tt>PathItem</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting path item
3364</li>
3365
3366 </ul>
3367
3368
3369
3370</div>
3371</div>
3372</div>
3373
3374
3375<div id="exclude-path" class="member">
3376<div class="member-link">
3377<a name="exclude-path" href="#exclude-path"><tt><b>exclude</b>(path)</tt></a>
3378</div>
3379<div class="member-description hidden">
3380<div class="member-text">
3381 <p>Excludes the intersection of the geometry of the specified path with
3382this path's geometry and returns the result as a new group item.</p>
3383
3384<ul><b>Parameters:</b>
3385
3386<li>
3387<tt>path:</tt>
3388<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3389&mdash;&nbsp;the path to exclude the intersection of
3390
3391</li>
3392
3393</ul>
3394
3395
3396 <ul><b>Returns:</b>
3397
3398 <li>
3399<tt><a href="../classes/Group.html"><tt>Group</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting group item
3400</li>
3401
3402 </ul>
3403
3404
3405
3406</div>
3407</div>
3408</div>
3409
3410
3411<div id="divide-path" class="member">
3412<div class="member-link">
3413<a name="divide-path" href="#divide-path"><tt><b>divide</b>(path)</tt></a>
3414</div>
3415<div class="member-description hidden">
3416<div class="member-text">
3417 <p>Splits the geometry of this path along the geometry of the specified
3418path returns the result as a new group item.</p>
3419
3420<ul><b>Parameters:</b>
3421
3422<li>
3423<tt>path:</tt>
3424<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3425&mdash;&nbsp;the path to divide by
3426
3427</li>
3428
3429</ul>
3430
3431
3432 <ul><b>Returns:</b>
3433
3434 <li>
3435<tt><a href="../classes/Group.html"><tt>Group</tt></a></tt>&nbsp;&mdash;&nbsp;the resulting group item
3436</li>
3437
3438 </ul>
3439
3440
3441
3442</div>
3443</div>
3444</div>
3445
3446 </div>
3447
3448
3449
3450
3451
3452<!-- =========================== inherited methods ========================= -->
3453<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
3454
3455
3456<div id="getintersections-path" class="member">
3457<div class="member-link">
3458<a name="getintersections-path" href="#getintersections-path"><tt><b>getIntersections</b>(path)</tt></a>
3459</div>
3460<div class="member-description hidden">
3461<div class="member-text">
3462 <p>Returns all intersections between two <a href="../classes/PathItem.html"><tt>PathItem</tt></a> items as an array
3463of <a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a> objects. <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items are also
3464supported.</p>
3465
3466<ul><b>Parameters:</b>
3467
3468<li>
3469<tt>path:</tt>
3470<a href="../classes/PathItem.html"><tt>PathItem</tt></a>
3471&mdash;&nbsp;the other item to find the intersections to.
3472
3473</li>
3474
3475</ul>
3476
3477
3478 <ul><b>Returns:</b>
3479
3480 <li>
3481<tt>Array of <a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a> objects</tt>&nbsp;&mdash;&nbsp;the locations of all intersection between the
3482paths
3483</li>
3484
3485 </ul>
3486
3487
3488 <p>
3489<b>Example</b> &mdash; Create a rectangular path with its top-left point at {x: 30, y: 25} and a size of {width: 50, height: 50}:
3490</p>
3491
3492<div class="paperscript split">
3493
3494<div class="buttons">
3495<div class="button run">Run</div>
3496</div>
3497
3498<script type="text/paperscript" canvas="canvas-53">
3499var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
3500path.strokeColor = 'black';
3501
3502var secondPath = path.clone();
3503var intersectionGroup = new Group();
3504
3505function onFrame(event) {
3506 secondPath.rotate(3);
3507
3508 var intersections = path.getIntersections(secondPath);
3509 intersectionGroup.removeChildren();
3510
3511 for (var i = 0; i < intersections.length; i++) {
3512 var intersectionPath = new Path.Circle({
3513 center: intersections[i].point,
3514 radius: 4,
3515 fillColor: 'red'
3516 });
3517 intersectionGroup.addChild(intersectionPath);
3518 }
3519}
3520</script>
3521<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
3522</div>
3523
3524
3525</div>
3526</div>
3527</div>
3528
3529
3530<div id="smooth" class="member">
3531<div class="member-link">
3532<a name="smooth" href="#smooth"><tt><b>smooth</b>()</tt></a>
3533</div>
3534<div class="member-description hidden">
3535<div class="member-text">
3536 <p>Smooth bezier curves without changing the amount of segments or their
3537points, by only smoothing and adjusting their handle points, for both
3538open ended and closed paths.</p>
3539
3540
3541
3542 <p>
3543<b>Example</b> &mdash; Smoothing a closed shape:
3544</p>
3545
3546<div class="paperscript split">
3547
3548<div class="buttons">
3549<div class="button run">Run</div>
3550</div>
3551
3552<script type="text/paperscript" canvas="canvas-54">
3553// Create a rectangular path with its top-left point at
3554// {x: 30, y: 25} and a size of {width: 50, height: 50}:
3555var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
3556path.strokeColor = 'black';
3557
3558// Select the path, so we can see its handles:
3559path.fullySelected = true;
3560
3561// Create a copy of the path and move it 100pt to the right:
3562var copy = path.clone();
3563copy.position.x += 100;
3564
3565// Smooth the segments of the copy:
3566copy.smooth();
3567</script>
3568<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
3569</div>
3570
3571
3572<p>
3573<b>Example</b>
3574</p>
3575
3576<div class="paperscript split">
3577
3578<div class="buttons">
3579<div class="button run">Run</div>
3580</div>
3581
3582<script type="text/paperscript" canvas="canvas-55">
3583var path = new Path();
3584path.strokeColor = 'black';
3585
3586path.add(new Point(30, 50));
3587
3588var y = 5;
3589var x = 3;
3590
3591for (var i = 0; i < 28; i++) {
3592 y *= -1.1;
3593 x *= 1.1;
3594 path.lineBy(x, y);
3595}
3596
3597// Create a copy of the path and move it 100pt down:
3598var copy = path.clone();
3599copy.position.y += 120;
3600
3601// Set its stroke color to red:
3602copy.strokeColor = 'red';
3603
3604// Smooth the segments of the copy:
3605copy.smooth();
3606</script>
3607<div class="canvas"><canvas width="516" height="220" id="canvas-55"></canvas></div>
3608</div>
3609
3610
3611</div>
3612</div>
3613</div>
3614
3615
3616<h3>Postscript Style Drawing Commands</h3>
3617
3618<div id="moveto-point" class="member">
3619<div class="member-link">
3620<a name="moveto-point" href="#moveto-point"><tt><b>moveTo</b>(point)</tt></a>
3621</div>
3622<div class="member-description hidden">
3623<div class="member-text">
3624 <p>On a normal empty <a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as the path's
3625first segment. If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is
3626created as a child and the point is added as its first segment.</p>
3627
3628<ul><b>Parameters:</b>
3629
3630<li>
3631<tt>point:</tt>
3632<a href="../classes/Point.html"><tt>Point</tt></a>
3633
3634
3635</li>
3636
3637</ul>
3638
3639
3640
3641
3642</div>
3643</div>
3644</div>
3645
3646
3647<div id="lineto-point" class="member">
3648<div class="member-link">
3649<a name="lineto-point" href="#lineto-point"><tt><b>lineTo</b>(point)</tt></a>
3650</div>
3651<div class="member-description hidden">
3652<div class="member-text">
3653
3654
3655<ul><b>Parameters:</b>
3656
3657<li>
3658<tt>point:</tt>
3659<a href="../classes/Point.html"><tt>Point</tt></a>
3660
3661
3662</li>
3663
3664</ul>
3665
3666
3667
3668
3669</div>
3670</div>
3671</div>
3672
3673
3674<div id="cubiccurveto-handle1-handle2-to" class="member">
3675<div class="member-link">
3676<a name="cubiccurveto-handle1-handle2-to" href="#cubiccurveto-handle1-handle2-to"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
3677</div>
3678<div class="member-description hidden">
3679<div class="member-text">
3680 <p>Adds a cubic bezier curve to the path, defined by two handles and a to
3681point.</p>
3682
3683<ul><b>Parameters:</b>
3684
3685<li>
3686<tt>handle1:</tt>
3687<a href="../classes/Point.html"><tt>Point</tt></a>
3688
3689
3690</li>
3691
3692<li>
3693<tt>handle2:</tt>
3694<a href="../classes/Point.html"><tt>Point</tt></a>
3695
3696
3697</li>
3698
3699<li>
3700<tt>to:</tt>
3701<a href="../classes/Point.html"><tt>Point</tt></a>
3702
3703
3704</li>
3705
3706</ul>
3707
3708
3709
3710
3711</div>
3712</div>
3713</div>
3714
3715
3716<div id="quadraticcurveto-handle-to" class="member">
3717<div class="member-link">
3718<a name="quadraticcurveto-handle-to" href="#quadraticcurveto-handle-to"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
3719</div>
3720<div class="member-description hidden">
3721<div class="member-text">
3722 <p>Adds a quadratic bezier curve to the path, defined by a handle and a to
3723point.</p>
3724
3725<ul><b>Parameters:</b>
3726
3727<li>
3728<tt>handle:</tt>
3729<a href="../classes/Point.html"><tt>Point</tt></a>
3730
3731
3732</li>
3733
3734<li>
3735<tt>to:</tt>
3736<a href="../classes/Point.html"><tt>Point</tt></a>
3737
3738
3739</li>
3740
3741</ul>
3742
3743
3744
3745
3746</div>
3747</div>
3748</div>
3749
3750
3751<div id="curveto-through-to" class="member">
3752<div class="member-link">
3753<a name="curveto-through-to" href="#curveto-through-to"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
3754</div>
3755<div class="member-description hidden">
3756<div class="member-text">
3757 <p>Draws a curve from the position of the last segment point in the path
3758that goes through the specified <tt>through</tt> point, to the specified
3759<tt>to</tt> point by adding one segment to the path.</p>
3760
3761<ul><b>Parameters:</b>
3762
3763<li>
3764<tt>through:</tt>
3765<a href="../classes/Point.html"><tt>Point</tt></a>
3766&mdash;&nbsp;the point through which the curve should go
3767
3768</li>
3769
3770<li>
3771<tt>to:</tt>
3772<a href="../classes/Point.html"><tt>Point</tt></a>
3773&mdash;&nbsp;the point where the curve should end
3774
3775</li>
3776
3777<li>
3778<tt>parameter:</tt>
3779<tt>Number</tt>
3780
3781&mdash;&nbsp;optional, default: <tt>0.5</tt>
3782</li>
3783
3784</ul>
3785
3786
3787
3788 <p>
3789<b>Example</b> &mdash; Interactive example. Move your mouse around the view below:
3790</p>
3791
3792<div class="paperscript split">
3793
3794<div class="buttons">
3795<div class="button run">Run</div>
3796</div>
3797
3798<script type="text/paperscript" canvas="canvas-56">
3799var myPath;
3800function onMouseMove(event) {
3801 // If we created a path before, remove it:
3802 if (myPath) {
3803 myPath.remove();
3804 }
3805
3806 // Create a new path and add a segment point to it
3807 // at {x: 150, y: 150):
3808 myPath = new Path();
3809 myPath.add(150, 150);
3810
3811 // Draw a curve through the position of the mouse to 'toPoint'
3812 var toPoint = new Point(350, 150);
3813 myPath.curveTo(event.point, toPoint);
3814
3815 // Select the path, so we can see its segments:
3816 myPath.selected = true;
3817}
3818</script>
3819<div class="canvas"><canvas width="516" height="300" id="canvas-56"></canvas></div>
3820</div>
3821
3822
3823</div>
3824</div>
3825</div>
3826
3827
3828<div id="arcto-through-to" class="member">
3829<div class="member-link">
3830<a name="arcto-through-to" href="#arcto-through-to"><tt><b>arcTo</b>(through, to)</tt></a>
3831</div>
3832<div class="member-description hidden">
3833<div class="member-text">
3834 <p>Draws an arc from the position of the last segment point in the path that
3835goes through the specified <tt>through</tt> point, to the specified
3836<tt>to</tt> point by adding one or more segments to the path.</p>
3837
3838<ul><b>Parameters:</b>
3839
3840<li>
3841<tt>through:</tt>
3842<a href="../classes/Point.html"><tt>Point</tt></a>
3843&mdash;&nbsp;the point where the arc should pass through
3844
3845</li>
3846
3847<li>
3848<tt>to:</tt>
3849<a href="../classes/Point.html"><tt>Point</tt></a>
3850&mdash;&nbsp;the point where the arc should end
3851
3852</li>
3853
3854</ul>
3855
3856
3857
3858 <p>
3859<b>Example</b>
3860</p>
3861
3862<div class="paperscript split">
3863
3864<div class="buttons">
3865<div class="button run">Run</div>
3866</div>
3867
3868<script type="text/paperscript" canvas="canvas-57">
3869var path = new Path();
3870path.strokeColor = 'black';
3871
3872var firstPoint = new Point(30, 75);
3873path.add(firstPoint);
3874
3875// The point through which we will create the arc:
3876var throughPoint = new Point(40, 40);
3877
3878// The point at which the arc will end:
3879var toPoint = new Point(130, 75);
3880
3881// Draw an arc through 'throughPoint' to 'toPoint'
3882path.arcTo(throughPoint, toPoint);
3883
3884// Add a red circle shaped path at the position of 'throughPoint':
3885var circle = new Path.Circle(throughPoint, 3);
3886circle.fillColor = 'red';
3887</script>
3888<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
3889</div>
3890
3891
3892<p>
3893<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
3894</p>
3895
3896<div class="paperscript split">
3897
3898<div class="buttons">
3899<div class="button run">Run</div>
3900</div>
3901
3902<script type="text/paperscript" canvas="canvas-58">
3903var myPath;
3904function onMouseDrag(event) {
3905 // If we created a path before, remove it:
3906 if (myPath) {
3907 myPath.remove();
3908 }
3909
3910 // Create a new path and add a segment point to it
3911 // at {x: 150, y: 150):
3912 myPath = new Path();
3913 myPath.add(150, 150);
3914
3915 // Draw an arc through the position of the mouse to 'toPoint'
3916 var toPoint = new Point(350, 150);
3917 myPath.arcTo(event.point, toPoint);
3918
3919 // Select the path, so we can see its segments:
3920 myPath.selected = true;
3921}
3922
3923// When the mouse is released, deselect the path
3924// and fill it with black.
3925function onMouseUp(event) {
3926 myPath.selected = false;
3927 myPath.fillColor = 'black';
3928}
3929</script>
3930<div class="canvas"><canvas width="516" height="300" id="canvas-58"></canvas></div>
3931</div>
3932
3933
3934</div>
3935</div>
3936</div>
3937
3938
3939<div id="arcto-to" class="member">
3940<div class="member-link">
3941<a name="arcto-to" href="#arcto-to"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
3942</div>
3943<div class="member-description hidden">
3944<div class="member-text">
3945 <p>Draws an arc from the position of the last segment point in the path to
3946the specified point by adding one or more segments to the path.</p>
3947
3948<ul><b>Parameters:</b>
3949
3950<li>
3951<tt>to:</tt>
3952<a href="../classes/Point.html"><tt>Point</tt></a>
3953&mdash;&nbsp;the point where the arc should end
3954
3955</li>
3956
3957<li>
3958<tt>clockwise:</tt>
3959<tt>Boolean</tt>
3960&mdash;&nbsp;specifies whether the arc should be
3961 drawn in clockwise direction.
3962&mdash;&nbsp;optional, default: <tt>true</tt>
3963</li>
3964
3965</ul>
3966
3967
3968
3969 <p>
3970<b>Example</b>
3971</p>
3972
3973<div class="paperscript split">
3974
3975<div class="buttons">
3976<div class="button run">Run</div>
3977</div>
3978
3979<script type="text/paperscript" canvas="canvas-59">
3980var path = new Path();
3981path.strokeColor = 'black';
3982
3983path.add(new Point(30, 75));
3984path.arcTo(new Point(130, 75));
3985
3986var path2 = new Path();
3987path2.strokeColor = 'red';
3988path2.add(new Point(180, 25));
3989
3990// To draw an arc in anticlockwise direction,
3991// we pass 'false' as the second argument to arcTo:
3992path2.arcTo(new Point(280, 25), false);
3993</script>
3994<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
3995</div>
3996
3997
3998<p>
3999<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
4000</p>
4001
4002<div class="paperscript split">
4003
4004<div class="buttons">
4005<div class="button run">Run</div>
4006</div>
4007
4008<script type="text/paperscript" canvas="canvas-60">
4009var myPath;
4010
4011// The mouse has to move at least 20 points before
4012// the next mouse drag event is fired:
4013tool.minDistance = 20;
4014
4015// When the user clicks, create a new path and add
4016// the current mouse position to it as its first segment:
4017function onMouseDown(event) {
4018 myPath = new Path();
4019 myPath.strokeColor = 'black';
4020 myPath.add(event.point);
4021}
4022
4023// On each mouse drag event, draw an arc to the current
4024// position of the mouse:
4025function onMouseDrag(event) {
4026 myPath.arcTo(event.point);
4027}
4028</script>
4029<div class="canvas"><canvas width="516" height="300" id="canvas-60"></canvas></div>
4030</div>
4031
4032
4033</div>
4034</div>
4035</div>
4036
4037
4038<div id="closepath" class="member">
4039<div class="member-link">
4040<a name="closepath" href="#closepath"><tt><b>closePath</b>()</tt></a>
4041</div>
4042<div class="member-description hidden">
4043<div class="member-text">
4044 <p>Closes the path. When closed, Paper.js connects the first and last
4045segments.</p>
4046
4047
4048
4049 <p><b>See also:</b>
4050 <tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
4051 </p>
4052
4053
4054</div>
4055</div>
4056</div>
4057
4058
4059<h3>Relative Drawing Commands</h3>
4060
4061<div id="moveby-to" class="member">
4062<div class="member-link">
4063<a name="moveby-to" href="#moveby-to"><tt><b>moveBy</b>(to)</tt></a>
4064</div>
4065<div class="member-description hidden">
4066<div class="member-text">
4067 <p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
4068child and a point is added as its first segment relative to the
4069position of the last segment of the current path.</p>
4070
4071<ul><b>Parameters:</b>
4072
4073<li>
4074<tt>to:</tt>
4075<a href="../classes/Point.html"><tt>Point</tt></a>
4076
4077
4078</li>
4079
4080</ul>
4081
4082
4083
4084
4085</div>
4086</div>
4087</div>
4088
4089
4090<div id="lineby-to" class="member">
4091<div class="member-link">
4092<a name="lineby-to" href="#lineby-to"><tt><b>lineBy</b>(to)</tt></a>
4093</div>
4094<div class="member-description hidden">
4095<div class="member-text">
4096 <p>Adds a segment relative to the last segment point of the path.</p>
4097
4098<ul><b>Parameters:</b>
4099
4100<li>
4101<tt>to:</tt>
4102<a href="../classes/Point.html"><tt>Point</tt></a>
4103&mdash;&nbsp;the vector which is added to the position of the last
4104segment of the path, to get to the position of the new segment.
4105
4106</li>
4107
4108</ul>
4109
4110
4111
4112 <p>
4113<b>Example</b>
4114</p>
4115
4116<div class="paperscript split">
4117
4118<div class="buttons">
4119<div class="button run">Run</div>
4120</div>
4121
4122<script type="text/paperscript" canvas="canvas-61">
4123var path = new Path();
4124path.strokeColor = 'black';
4125
4126// Add a segment at {x: 50, y: 50}
4127path.add(25, 25);
4128
4129// Add a segment relative to the last segment of the path.
4130// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
4131path.lineBy(50, 0);
4132
4133// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
4134path.lineBy(0, 50);
4135</script>
4136<div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
4137</div>
4138
4139
4140<p>
4141<b>Example</b> &mdash; Drawing a spiral using lineBy:
4142</p>
4143
4144<div class="paperscript split">
4145
4146<div class="buttons">
4147<div class="button run">Run</div>
4148</div>
4149
4150<script type="text/paperscript" canvas="canvas-62">
4151var path = new Path();
4152path.strokeColor = 'black';
4153
4154// Add the first segment at {x: 50, y: 50}
4155path.add(view.center);
4156
4157// Loop 500 times:
4158for (var i = 0; i < 500; i++) {
4159 // Create a vector with an ever increasing length
4160 // and an angle in increments of 45 degrees
4161 var vector = new Point({
4162 angle: i * 45,
4163 length: i / 2
4164 });
4165 // Add the vector relatively to the last segment point:
4166 path.lineBy(vector);
4167}
4168
4169// Smooth the handles of the path:
4170path.smooth();
4171
4172// Uncomment the following line and click on 'run' to see
4173// the construction of the path:
4174// path.selected = true;
4175</script>
4176<div class="canvas"><canvas width="516" height="300" id="canvas-62"></canvas></div>
4177</div>
4178
4179
4180</div>
4181</div>
4182</div>
4183
4184
4185<div id="curveby-through-to" class="member">
4186<div class="member-link">
4187<a name="curveby-through-to" href="#curveby-through-to"><tt><b>curveBy</b>(through, to[, parameter])</tt></a>
4188</div>
4189<div class="member-description hidden">
4190<div class="member-text">
4191
4192
4193<ul><b>Parameters:</b>
4194
4195<li>
4196<tt>through:</tt>
4197<a href="../classes/Point.html"><tt>Point</tt></a>
4198
4199
4200</li>
4201
4202<li>
4203<tt>to:</tt>
4204<a href="../classes/Point.html"><tt>Point</tt></a>
4205
4206
4207</li>
4208
4209<li>
4210<tt>parameter:</tt>
4211<tt>Number</tt>
4212
4213&mdash;&nbsp;optional, default: <tt>0.5</tt>
4214</li>
4215
4216</ul>
4217
4218
4219
4220
4221</div>
4222</div>
4223</div>
4224
4225
4226<div id="cubiccurveby-handle1-handle2-to" class="member">
4227<div class="member-link">
4228<a name="cubiccurveby-handle1-handle2-to" href="#cubiccurveby-handle1-handle2-to"><tt><b>cubicCurveBy</b>(handle1, handle2, to)</tt></a>
4229</div>
4230<div class="member-description hidden">
4231<div class="member-text">
4232
4233
4234<ul><b>Parameters:</b>
4235
4236<li>
4237<tt>handle1:</tt>
4238<a href="../classes/Point.html"><tt>Point</tt></a>
4239
4240
4241</li>
4242
4243<li>
4244<tt>handle2:</tt>
4245<a href="../classes/Point.html"><tt>Point</tt></a>
4246
4247
4248</li>
4249
4250<li>
4251<tt>to:</tt>
4252<a href="../classes/Point.html"><tt>Point</tt></a>
4253
4254
4255</li>
4256
4257</ul>
4258
4259
4260
4261
4262</div>
4263</div>
4264</div>
4265
4266
4267<div id="quadraticcurveby-handle-to" class="member">
4268<div class="member-link">
4269<a name="quadraticcurveby-handle-to" href="#quadraticcurveby-handle-to"><tt><b>quadraticCurveBy</b>(handle, to)</tt></a>
4270</div>
4271<div class="member-description hidden">
4272<div class="member-text">
4273
4274
4275<ul><b>Parameters:</b>
4276
4277<li>
4278<tt>handle:</tt>
4279<a href="../classes/Point.html"><tt>Point</tt></a>
4280
4281
4282</li>
4283
4284<li>
4285<tt>to:</tt>
4286<a href="../classes/Point.html"><tt>Point</tt></a>
4287
4288
4289</li>
4290
4291</ul>
4292
4293
4294
4295
4296</div>
4297</div>
4298</div>
4299
4300
4301<div id="arcby-through-to" class="member">
4302<div class="member-link">
4303<a name="arcby-through-to" href="#arcby-through-to"><tt><b>arcBy</b>(through, to)</tt></a>
4304</div>
4305<div class="member-description hidden">
4306<div class="member-text">
4307
4308
4309<ul><b>Parameters:</b>
4310
4311<li>
4312<tt>through:</tt>
4313<a href="../classes/Point.html"><tt>Point</tt></a>
4314
4315
4316</li>
4317
4318<li>
4319<tt>to:</tt>
4320<a href="../classes/Point.html"><tt>Point</tt></a>
4321
4322
4323</li>
4324
4325</ul>
4326
4327
4328
4329
4330</div>
4331</div>
4332</div>
4333
4334
4335<div id="arcby-to" class="member">
4336<div class="member-link">
4337<a name="arcby-to" href="#arcby-to"><tt><b>arcBy</b>(to[, clockwise])</tt></a>
4338</div>
4339<div class="member-description hidden">
4340<div class="member-text">
4341
4342
4343<ul><b>Parameters:</b>
4344
4345<li>
4346<tt>to:</tt>
4347<a href="../classes/Point.html"><tt>Point</tt></a>
4348
4349
4350</li>
4351
4352<li>
4353<tt>clockwise:</tt>
4354<tt>Boolean</tt>
4355
4356&mdash;&nbsp;optional, default: <tt>true</tt>
4357</li>
4358
4359</ul>
4360
4361
4362
4363
4364</div>
4365</div>
4366</div>
4367
4368</div>
4369
4370
4371
4372<!-- =========================== inherited properties ====================== -->
4373<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
4374
4375
4376<div id="id" class="member">
4377<div class="member-link">
4378<a name="id" href="#id"><tt><b>id</b></tt></a>
4379</div>
4380<div class="member-description hidden">
4381
4382<div class="member-text">
4383 <p>The unique id of the item.</p>
4384
4385 <p>Read only.</p>
4386
4387
4388 <ul><b>Type:</b>
4389 <li>
4390 <tt>Number</tt>
4391 </li>
4392 </ul>
4393
4394
4395</div>
4396
4397</div>
4398</div>
4399
4400
4401<div id="type" class="member">
4402<div class="member-link">
4403<a name="type" href="#type"><tt><b>type</b></tt></a>
4404</div>
4405<div class="member-description hidden">
4406
4407<div class="member-text">
4408 <p>The type of the item as a string.</p>
4409
4410 <p>Read only.</p>
4411
4412
4413 <ul><b>Type:</b>
4414 <li>
4415 <tt>String('group', 'layer', 'path', 'compound-path', 'raster',
4416'placed-symbol', 'point-text')</tt>
4417 </li>
4418 </ul>
4419
4420
4421</div>
4422
4423</div>
4424</div>
4425
4426
4427<div id="name" class="member">
4428<div class="member-link">
4429<a name="name" href="#name"><tt><b>name</b></tt></a>
4430</div>
4431<div class="member-description hidden">
4432
4433<div class="member-text">
4434 <p>The name of the item. If the item has a name, it can be accessed by name
4435through its parent's children list.</p>
4436
4437
4438 <ul><b>Type:</b>
4439 <li>
4440 <tt>String</tt>
4441 </li>
4442 </ul>
4443
4444 <p>
4445<b>Example</b>
4446</p>
4447
4448<div class="paperscript split">
4449
4450<div class="buttons">
4451<div class="button run">Run</div>
4452</div>
4453
4454<script type="text/paperscript" canvas="canvas-63">
4455var path = new Path.Circle({
4456 center: [80, 50],
4457 radius: 35
4458});
4459// Set the name of the path:
4460path.name = 'example';
4461
4462// Create a group and add path to it as a child:
4463var group = new Group();
4464group.addChild(path);
4465
4466// The path can be accessed by name:
4467group.children['example'].fillColor = 'red';
4468</script>
4469<div class="canvas"><canvas width="516" height="100" id="canvas-63"></canvas></div>
4470</div>
4471
4472
4473</div>
4474
4475</div>
4476</div>
4477
4478
4479<div id="style" class="member">
4480<div class="member-link">
4481<a name="style" href="#style"><tt><b>style</b></tt></a>
4482</div>
4483<div class="member-description hidden">
4484
4485<div class="member-text">
4486 <p>The path style of the item.</p>
4487
4488
4489 <ul><b>Type:</b>
4490 <li>
4491 <a href="../classes/Style.html"><tt>Style</tt></a>
4492 </li>
4493 </ul>
4494
4495 <p>
4496<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
4497</p>
4498
4499<div class="paperscript split">
4500
4501<div class="buttons">
4502<div class="button run">Run</div>
4503</div>
4504
4505<script type="text/paperscript" canvas="canvas-64">
4506var circle = new Path.Circle({
4507 center: [80, 50],
4508 radius: 30
4509});
4510circle.style = {
4511 fillColor: 'blue',
4512 strokeColor: 'red',
4513 strokeWidth: 5
4514};
4515</script>
4516<div class="canvas"><canvas width="516" height="100" id="canvas-64"></canvas></div>
4517</div>
4518
4519
4520<p>
4521<b>Example</b> &mdash; Copying the style of another item:
4522</p>
4523
4524<div class="paperscript split">
4525
4526<div class="buttons">
4527<div class="button run">Run</div>
4528</div>
4529
4530<script type="text/paperscript" canvas="canvas-65">
4531var path = new Path.Circle({
4532 center: [50, 50],
4533 radius: 30,
4534 fillColor: 'red'
4535});
4536
4537var path2 = new Path.Circle({
4538 center: new Point(180, 50),
4539 radius: 20
4540});
4541
4542// Copy the path style of path:
4543path2.style = path.style;
4544</script>
4545<div class="canvas"><canvas width="516" height="100" id="canvas-65"></canvas></div>
4546</div>
4547
4548
4549<p>
4550<b>Example</b> &mdash; Applying the same style object to multiple items:
4551</p>
4552
4553<div class="paperscript split">
4554
4555<div class="buttons">
4556<div class="button run">Run</div>
4557</div>
4558
4559<script type="text/paperscript" canvas="canvas-66">
4560var myStyle = {
4561 fillColor: 'red',
4562 strokeColor: 'blue',
4563 strokeWidth: 4
4564};
4565
4566var path = new Path.Circle({
4567 center: [50, 50],
4568 radius: 30
4569});
4570path.style = myStyle;
4571
4572var path2 = new Path.Circle({
4573 center: new Point(150, 50),
4574 radius: 20
4575});
4576path2.style = myStyle;
4577</script>
4578<div class="canvas"><canvas width="516" height="100" id="canvas-66"></canvas></div>
4579</div>
4580
4581
4582</div>
4583
4584</div>
4585</div>
4586
4587
4588<div id="visible" class="member">
4589<div class="member-link">
4590<a name="visible" href="#visible"><tt><b>visible</b></tt></a>
4591</div>
4592<div class="member-description hidden">
4593
4594<div class="member-text">
4595 <p>Specifies whether the item is visible. When set to <tt>false</tt>, the
4596item won't be drawn.</p>
4597
4598
4599 <ul><b>Default:</b>
4600 <li>
4601 <tt>true</tt>
4602 </li>
4603 </ul>
4604
4605 <ul><b>Type:</b>
4606 <li>
4607 <tt>Boolean</tt>
4608 </li>
4609 </ul>
4610
4611 <p>
4612<b>Example</b> &mdash; Hiding an item:
4613</p>
4614
4615<div class="paperscript split">
4616
4617<div class="buttons">
4618<div class="button run">Run</div>
4619</div>
4620
4621<script type="text/paperscript" canvas="canvas-67">
4622var path = new Path.Circle({
4623 center: [50, 50],
4624 radius: 20,
4625 fillColor: 'red'
4626});
4627
4628// Hide the path:
4629path.visible = false;
4630</script>
4631<div class="canvas"><canvas width="516" height="100" id="canvas-67"></canvas></div>
4632</div>
4633
4634
4635</div>
4636
4637</div>
4638</div>
4639
4640
4641<div id="blendmode" class="member">
4642<div class="member-link">
4643<a name="blendmode" href="#blendmode"><tt><b>blendMode</b></tt></a>
4644</div>
4645<div class="member-description hidden">
4646
4647<div class="member-text">
4648 <p>The blend mode with which the item is composited onto the canvas. Both
4649the standard canvas compositing modes, as well as the new CSS blend modes
4650are supported. If blend-modes cannot be rendered natively, they are
4651emulated. Be aware that emulation can have an impact on performance.</p>
4652
4653
4654 <ul><b>Default:</b>
4655 <li>
4656 <tt>'normal'</tt>
4657 </li>
4658 </ul>
4659
4660 <ul><b>Type:</b>
4661 <li>
4662 <tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
4663'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
4664'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
4665'add', 'subtract', 'average', 'pin-light', 'negation', 'source-over',
4666'source-in', 'source-out', 'source-atop', 'destination-over',
4667'destination-in', 'destination-out', 'destination-atop', 'lighter',
4668'darker', 'copy', 'xor')</tt>
4669 </li>
4670 </ul>
4671
4672 <p>
4673<b>Example</b> &mdash; Setting an item's blend mode:
4674</p>
4675
4676<div class="paperscript split">
4677
4678<div class="buttons">
4679<div class="button run">Run</div>
4680</div>
4681
4682<script type="text/paperscript" canvas="canvas-68">
4683// Create a white rectangle in the background
4684// with the same dimensions as the view:
4685var background = new Path.Rectangle(view.bounds);
4686background.fillColor = 'white';
4687
4688var circle = new Path.Circle({
4689 center: [80, 50],
4690 radius: 35,
4691 fillColor: 'red'
4692});
4693
4694var circle2 = new Path.Circle({
4695 center: new Point(120, 50),
4696 radius: 35,
4697 fillColor: 'blue'
4698});
4699
4700// Set the blend mode of circle2:
4701circle2.blendMode = 'multiply';
4702</script>
4703<div class="canvas"><canvas width="516" height="100" id="canvas-68"></canvas></div>
4704</div>
4705
4706
4707</div>
4708
4709</div>
4710</div>
4711
4712
4713<div id="opacity" class="member">
4714<div class="member-link">
4715<a name="opacity" href="#opacity"><tt><b>opacity</b></tt></a>
4716</div>
4717<div class="member-description hidden">
4718
4719<div class="member-text">
4720 <p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
4721
4722
4723 <ul><b>Default:</b>
4724 <li>
4725 <tt>1</tt>
4726 </li>
4727 </ul>
4728
4729 <ul><b>Type:</b>
4730 <li>
4731 <tt>Number</tt>
4732 </li>
4733 </ul>
4734
4735 <p>
4736<b>Example</b> &mdash; Making an item 50% transparent:
4737</p>
4738
4739<div class="paperscript split">
4740
4741<div class="buttons">
4742<div class="button run">Run</div>
4743</div>
4744
4745<script type="text/paperscript" canvas="canvas-69">
4746var circle = new Path.Circle({
4747 center: [80, 50],
4748 radius: 35,
4749 fillColor: 'red'
4750});
4751
4752var circle2 = new Path.Circle({
4753 center: new Point(120, 50),
4754 radius: 35,
4755 fillColor: 'blue',
4756 strokeColor: 'green',
4757 strokeWidth: 10
4758});
4759
4760// Make circle2 50% transparent:
4761circle2.opacity = 0.5;
4762</script>
4763<div class="canvas"><canvas width="516" height="100" id="canvas-69"></canvas></div>
4764</div>
4765
4766
4767</div>
4768
4769</div>
4770</div>
4771
4772
4773<div id="selected" class="member">
4774<div class="member-link">
4775<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
4776</div>
4777<div class="member-description hidden">
4778
4779<div class="member-text">
4780 <p>Specifies whether an item is selected and will also return <tt>true</tt>
4781if the item is partially selected (groups with some selected or partially
4782selected paths).</p>
4783<p>Paper.js draws the visual outlines of selected items on top of your
4784project. This can be useful for debugging, as it allows you to see the
4785construction of paths, position of path curves, individual segment points
4786and bounding boxes of symbol and raster items.</p>
4787
4788
4789 <ul><b>Type:</b>
4790 <li>
4791 <tt>Boolean</tt>
4792 </li>
4793 </ul>
4794
4795 <p><b>See also:</b>
4796 <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>
4797 </p>
4798
4799 <p>
4800<b>Example</b> &mdash; Selecting an item:
4801</p>
4802
4803<div class="paperscript split">
4804
4805<div class="buttons">
4806<div class="button run">Run</div>
4807</div>
4808
4809<script type="text/paperscript" canvas="canvas-70">
4810var path = new Path.Circle({
4811 center: [80, 50],
4812 radius: 35
4813});
4814path.selected = true; // Select the path
4815</script>
4816<div class="canvas"><canvas width="516" height="100" id="canvas-70"></canvas></div>
4817</div>
4818
4819
4820</div>
4821
4822</div>
4823</div>
4824
4825
4826<div id="clipmask" class="member">
4827<div class="member-link">
4828<a name="clipmask" href="#clipmask"><tt><b>clipMask</b></tt></a>
4829</div>
4830<div class="member-description hidden">
4831
4832<div class="member-text">
4833 <p>Specifies whether the item defines a clip mask. This can only be set on
4834paths, compound paths, and text frame objects, and only if the item is
4835already contained within a clipping group.</p>
4836
4837
4838 <ul><b>Type:</b>
4839 <li>
4840 <tt>Boolean</tt>
4841 </li>
4842 </ul>
4843
4844
4845</div>
4846
4847</div>
4848</div>
4849
4850
4851<div id="data" class="member">
4852<div class="member-link">
4853<a name="data" href="#data"><tt><b>data</b></tt></a>
4854</div>
4855<div class="member-description hidden">
4856
4857<div class="member-text">
4858 <p>A plain javascript object which can be used to store
4859arbitrary data on the item.</p>
4860
4861
4862 <ul><b>Type:</b>
4863 <li>
4864 <tt>Object</tt>
4865 </li>
4866 </ul>
4867
4868 <p>
4869<b>Example</b>
4870</p>
4871
4872
4873<pre class="code">var path = new Path();
4874path.data.remember = 'milk';</pre>
4875
4876<p>
4877<b>Example</b>
4878</p>
4879
4880
4881<pre class="code">var path = new Path();
4882path.data.malcolm = new Point(20, 30);
4883console.log(path.data.malcolm.x); // 20</pre>
4884
4885<p>
4886<b>Example</b>
4887</p>
4888
4889
4890<pre class="code">var path = new Path();
4891path.data = {
4892 home: 'Omicron Theta',
4893 found: 2338,
4894 pets: ['Spot']
4895};
4896console.log(path.data.pets.length); // 1</pre>
4897
4898<p>
4899<b>Example</b>
4900</p>
4901
4902
4903<pre class="code">var path = new Path({
4904 data: {
4905 home: 'Omicron Theta',
4906 found: 2338,
4907 pets: ['Spot']
4908 }
4909});
4910console.log(path.data.pets.length); // 1</pre>
4911
4912</div>
4913
4914</div>
4915</div>
4916
4917
4918 <h3>Position and Bounding Boxes</h3>
4919
4920<div id="position" class="member">
4921<div class="member-link">
4922<a name="position" href="#position"><tt><b>position</b></tt></a>
4923</div>
4924<div class="member-description hidden">
4925
4926<div class="member-text">
4927 <p>The item's position within the project. This is the
4928<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>
4929
4930
4931 <ul><b>Type:</b>
4932 <li>
4933 <a href="../classes/Point.html"><tt>Point</tt></a>
4934 </li>
4935 </ul>
4936
4937 <p>
4938<b>Example</b> &mdash; Changing the position of a path:
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-71">
4948// Create a circle at position { x: 10, y: 10 }
4949var circle = new Path.Circle({
4950 center: new Point(10, 10),
4951 radius: 10,
4952 fillColor: 'red'
4953});
4954
4955// Move the circle to { x: 20, y: 20 }
4956circle.position = new Point(20, 20);
4957
4958// Move the circle 100 points to the right and 50 points down
4959circle.position += new Point(100, 50);
4960</script>
4961<div class="canvas"><canvas width="516" height="100" id="canvas-71"></canvas></div>
4962</div>
4963
4964
4965<p>
4966<b>Example</b> &mdash; Changing the x coordinate of an item's position:
4967</p>
4968
4969<div class="paperscript split">
4970
4971<div class="buttons">
4972<div class="button run">Run</div>
4973</div>
4974
4975<script type="text/paperscript" canvas="canvas-72">
4976// Create a circle at position { x: 20, y: 20 }
4977var circle = new Path.Circle({
4978 center: new Point(20, 20),
4979 radius: 10,
4980 fillColor: 'red'
4981});
4982
4983// Move the circle 100 points to the right
4984circle.position.x += 100;
4985</script>
4986<div class="canvas"><canvas width="516" height="100" id="canvas-72"></canvas></div>
4987</div>
4988
4989
4990</div>
4991
4992</div>
4993</div>
4994
4995
4996<div id="bounds" class="member">
4997<div class="member-link">
4998<a name="bounds" href="#bounds"><tt><b>bounds</b></tt></a>
4999</div>
5000<div class="member-description hidden">
5001
5002<div class="member-text">
5003 <p>The bounding rectangle of the item excluding stroke width.</p>
5004
5005 <p>Read only.</p>
5006
5007
5008 <ul><b>Type:</b>
5009 <li>
5010 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
5011 </li>
5012 </ul>
5013
5014
5015</div>
5016
5017</div>
5018</div>
5019
5020
5021<div id="strokebounds" class="member">
5022<div class="member-link">
5023<a name="strokebounds" href="#strokebounds"><tt><b>strokeBounds</b></tt></a>
5024</div>
5025<div class="member-description hidden">
5026
5027<div class="member-text">
5028 <p>The bounding rectangle of the item including stroke width.</p>
5029
5030 <p>Read only.</p>
5031
5032
5033 <ul><b>Type:</b>
5034 <li>
5035 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
5036 </li>
5037 </ul>
5038
5039
5040</div>
5041
5042</div>
5043</div>
5044
5045
5046<div id="handlebounds" class="member">
5047<div class="member-link">
5048<a name="handlebounds" href="#handlebounds"><tt><b>handleBounds</b></tt></a>
5049</div>
5050<div class="member-description hidden">
5051
5052<div class="member-text">
5053 <p>The bounding rectangle of the item including handles.</p>
5054
5055 <p>Read only.</p>
5056
5057
5058 <ul><b>Type:</b>
5059 <li>
5060 <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
5061 </li>
5062 </ul>
5063
5064
5065</div>
5066
5067</div>
5068</div>
5069
5070
5071<div id="matrix" class="member">
5072<div class="member-link">
5073<a name="matrix" href="#matrix"><tt><b>matrix</b></tt></a>
5074</div>
5075<div class="member-description hidden">
5076
5077<div class="member-text">
5078 <p>The item's transformation matrix, defining position and dimensions in
5079relation to its parent item in which it is contained.</p>
5080
5081
5082 <ul><b>Type:</b>
5083 <li>
5084 <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
5085 </li>
5086 </ul>
5087
5088
5089</div>
5090
5091</div>
5092</div>
5093
5094
5095<div id="globalmatrix" class="member">
5096<div class="member-link">
5097<a name="globalmatrix" href="#globalmatrix"><tt><b>globalMatrix</b></tt></a>
5098</div>
5099<div class="member-description hidden">
5100
5101<div class="member-text">
5102 <p>The item's global transformation matrix in relation to the global project
5103coordinate space.</p>
5104
5105 <p>Read only.</p>
5106
5107
5108 <ul><b>Type:</b>
5109 <li>
5110 <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
5111 </li>
5112 </ul>
5113
5114
5115</div>
5116
5117</div>
5118</div>
5119
5120
5121<div id="transformcontent" class="member">
5122<div class="member-link">
5123<a name="transformcontent" href="#transformcontent"><tt><b>transformContent</b></tt></a>
5124</div>
5125<div class="member-description hidden">
5126
5127<div class="member-text">
5128 <p>Specifies whether the group applies transformations directly to its
5129children, or whether they are to be stored in its <a href="../classes/Item.html#matrix"><tt>item.matrix</tt></a></p>
5130
5131
5132 <ul><b>Type:</b>
5133 <li>
5134 <tt>Boolean</tt>
5135 </li>
5136 </ul>
5137
5138
5139</div>
5140
5141</div>
5142</div>
5143
5144
5145 <h3>Project Hierarchy</h3>
5146
5147<div id="project" class="member">
5148<div class="member-link">
5149<a name="project" href="#project"><tt><b>project</b></tt></a>
5150</div>
5151<div class="member-description hidden">
5152
5153<div class="member-text">
5154 <p>The project that this item belongs to.</p>
5155
5156 <p>Read only.</p>
5157
5158
5159 <ul><b>Type:</b>
5160 <li>
5161 <a href="../classes/Project.html"><tt>Project</tt></a>
5162 </li>
5163 </ul>
5164
5165
5166</div>
5167
5168</div>
5169</div>
5170
5171
5172<div id="layer" class="member">
5173<div class="member-link">
5174<a name="layer" href="#layer"><tt><b>layer</b></tt></a>
5175</div>
5176<div class="member-description hidden">
5177
5178<div class="member-text">
5179 <p>The layer that this item is contained within.</p>
5180
5181 <p>Read only.</p>
5182
5183
5184 <ul><b>Type:</b>
5185 <li>
5186 <a href="../classes/Layer.html"><tt>Layer</tt></a>
5187 </li>
5188 </ul>
5189
5190
5191</div>
5192
5193</div>
5194</div>
5195
5196
5197<div id="parent" class="member">
5198<div class="member-link">
5199<a name="parent" href="#parent"><tt><b>parent</b></tt></a>
5200</div>
5201<div class="member-description hidden">
5202
5203<div class="member-text">
5204 <p>The item that this item is contained within.</p>
5205
5206
5207 <ul><b>Type:</b>
5208 <li>
5209 <a href="../classes/Item.html"><tt>Item</tt></a>
5210 </li>
5211 </ul>
5212
5213 <p>
5214<b>Example</b>
5215</p>
5216
5217
5218<pre class="code">var path = new Path();
5219
5220// New items are placed in the active layer:
5221console.log(path.parent == project.activeLayer); // true
5222
5223var group = new Group();
5224group.addChild(path);
5225
5226// Now the parent of the path has become the group:
5227console.log(path.parent == group); // true</pre>
5228
5229<p>
5230<b>Example</b> &mdash; Setting the parent of the item to another item
5231</p>
5232
5233
5234<pre class="code">var path = new Path();
5235
5236// New items are placed in the active layer:
5237console.log(path.parent == project.activeLayer); // true
5238
5239var group = new Group();
5240group.parent = path;
5241
5242// Now the parent of the path has become the group:
5243console.log(path.parent == group); // true
5244
5245// The path is now contained in the children list of group:
5246console.log(group.children[0] == path); // true</pre>
5247
5248<p>
5249<b>Example</b> &mdash; Setting the parent of an item in the constructor
5250</p>
5251
5252
5253<pre class="code">var group = new Group();
5254
5255var path = new Path({
5256 parent: group
5257});
5258
5259// The parent of the path is the group:
5260console.log(path.parent == group); // true
5261
5262// The path is contained in the children list of group:
5263console.log(group.children[0] == path); // true</pre>
5264
5265</div>
5266
5267</div>
5268</div>
5269
5270
5271<div id="children" class="member">
5272<div class="member-link">
5273<a name="children" href="#children"><tt><b>children</b></tt></a>
5274</div>
5275<div class="member-description hidden">
5276
5277<div class="member-text">
5278 <p>The children items contained within this item. Items that define a
5279<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
5280<p><b>Please note:</b> The children array should not be modified directly
5281using array functions. To remove single items from the children list, use
5282<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
5283<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
5284<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>
5285
5286
5287 <ul><b>Type:</b>
5288 <li>
5289 Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
5290 </li>
5291 </ul>
5292
5293 <p>
5294<b>Example</b> &mdash; Accessing items in the children array:
5295</p>
5296
5297<div class="paperscript split">
5298
5299<div class="buttons">
5300<div class="button run">Run</div>
5301</div>
5302
5303<script type="text/paperscript" canvas="canvas-73">
5304var path = new Path.Circle({
5305 center: [80, 50],
5306 radius: 35
5307});
5308
5309// Create a group and move the path into it:
5310var group = new Group();
5311group.addChild(path);
5312
5313// Access the path through the group's children array:
5314group.children[0].fillColor = 'red';
5315</script>
5316<div class="canvas"><canvas width="516" height="100" id="canvas-73"></canvas></div>
5317</div>
5318
5319
5320<p>
5321<b>Example</b> &mdash; Accessing children by name:
5322</p>
5323
5324<div class="paperscript split">
5325
5326<div class="buttons">
5327<div class="button run">Run</div>
5328</div>
5329
5330<script type="text/paperscript" canvas="canvas-74">
5331var path = new Path.Circle({
5332 center: [80, 50],
5333 radius: 35
5334});
5335// Set the name of the path:
5336path.name = 'example';
5337
5338// Create a group and move the path into it:
5339var group = new Group();
5340group.addChild(path);
5341
5342// The path can be accessed by name:
5343group.children['example'].fillColor = 'orange';
5344</script>
5345<div class="canvas"><canvas width="516" height="100" id="canvas-74"></canvas></div>
5346</div>
5347
5348
5349<p>
5350<b>Example</b> &mdash; Passing an array of items to item.children:
5351</p>
5352
5353<div class="paperscript split">
5354
5355<div class="buttons">
5356<div class="button run">Run</div>
5357</div>
5358
5359<script type="text/paperscript" canvas="canvas-75">
5360var path = new Path.Circle({
5361 center: [80, 50],
5362 radius: 35
5363});
5364
5365var group = new Group();
5366group.children = [path];
5367
5368// The path is the first child of the group:
5369group.firstChild.fillColor = 'green';
5370</script>
5371<div class="canvas"><canvas width="516" height="100" id="canvas-75"></canvas></div>
5372</div>
5373
5374
5375</div>
5376
5377</div>
5378</div>
5379
5380
5381<div id="firstchild" class="member">
5382<div class="member-link">
5383<a name="firstchild" href="#firstchild"><tt><b>firstChild</b></tt></a>
5384</div>
5385<div class="member-description hidden">
5386
5387<div class="member-text">
5388 <p>The first item contained within this item. This is a shortcut for
5389accessing <tt>item.children[0]</tt>.</p>
5390
5391 <p>Read only.</p>
5392
5393
5394 <ul><b>Type:</b>
5395 <li>
5396 <a href="../classes/Item.html"><tt>Item</tt></a>
5397 </li>
5398 </ul>
5399
5400
5401</div>
5402
5403</div>
5404</div>
5405
5406
5407<div id="lastchild" class="member">
5408<div class="member-link">
5409<a name="lastchild" href="#lastchild"><tt><b>lastChild</b></tt></a>
5410</div>
5411<div class="member-description hidden">
5412
5413<div class="member-text">
5414 <p>The last item contained within this item.This is a shortcut for
5415accessing <tt>item.children[item.children.length - 1]</tt>.</p>
5416
5417 <p>Read only.</p>
5418
5419
5420 <ul><b>Type:</b>
5421 <li>
5422 <a href="../classes/Item.html"><tt>Item</tt></a>
5423 </li>
5424 </ul>
5425
5426
5427</div>
5428
5429</div>
5430</div>
5431
5432
5433<div id="nextsibling" class="member">
5434<div class="member-link">
5435<a name="nextsibling" href="#nextsibling"><tt><b>nextSibling</b></tt></a>
5436</div>
5437<div class="member-description hidden">
5438
5439<div class="member-text">
5440 <p>The next item on the same level as this item.</p>
5441
5442 <p>Read only.</p>
5443
5444
5445 <ul><b>Type:</b>
5446 <li>
5447 <a href="../classes/Item.html"><tt>Item</tt></a>
5448 </li>
5449 </ul>
5450
5451
5452</div>
5453
5454</div>
5455</div>
5456
5457
5458<div id="previoussibling" class="member">
5459<div class="member-link">
5460<a name="previoussibling" href="#previoussibling"><tt><b>previousSibling</b></tt></a>
5461</div>
5462<div class="member-description hidden">
5463
5464<div class="member-text">
5465 <p>The previous item on the same level as this item.</p>
5466
5467 <p>Read only.</p>
5468
5469
5470 <ul><b>Type:</b>
5471 <li>
5472 <a href="../classes/Item.html"><tt>Item</tt></a>
5473 </li>
5474 </ul>
5475
5476
5477</div>
5478
5479</div>
5480</div>
5481
5482
5483<div id="index" class="member">
5484<div class="member-link">
5485<a name="index" href="#index"><tt><b>index</b></tt></a>
5486</div>
5487<div class="member-description hidden">
5488
5489<div class="member-text">
5490 <p>The index of this item within the list of its parent's children.</p>
5491
5492 <p>Read only.</p>
5493
5494
5495 <ul><b>Type:</b>
5496 <li>
5497 <tt>Number</tt>
5498 </li>
5499 </ul>
5500
5501
5502</div>
5503
5504</div>
5505</div>
5506
5507
5508<div id="appendtop-item" class="member">
5509<div class="member-link">
5510<a name="appendtop-item" href="#appendtop-item"><tt><b>appendTop</b></tt></a>
5511</div>
5512<div class="member-description hidden">
5513
5514</div>
5515</div>
5516
5517
5518<div id="moveabove-item" class="member">
5519<div class="member-link">
5520<a name="moveabove-item" href="#moveabove-item"><tt><b>moveAbove</b></tt></a>
5521</div>
5522<div class="member-description hidden">
5523
5524<div class="member-text">
5525 <p>Moves this item above the specified item.</p>
5526
5527
5528 <ul><b>Type:</b>
5529 <li>
5530 <tt>Boolean</tt>
5531 </li>
5532 </ul>
5533
5534
5535</div>
5536
5537</div>
5538</div>
5539
5540
5541<div id="movebelow-item" class="member">
5542<div class="member-link">
5543<a name="movebelow-item" href="#movebelow-item"><tt><b>moveBelow</b></tt></a>
5544</div>
5545<div class="member-description hidden">
5546
5547<div class="member-text">
5548 <p>Moves the item below the specified item.</p>
5549
5550
5551 <ul><b>Type:</b>
5552 <li>
5553 <tt>Boolean</tt>
5554 </li>
5555 </ul>
5556
5557
5558</div>
5559
5560</div>
5561</div>
5562
5563
5564 <h3>Stroke Style</h3>
5565
5566<div id="strokecolor" class="member">
5567<div class="member-link">
5568<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
5569</div>
5570<div class="member-description hidden">
5571
5572<div class="member-text">
5573 <p>The color of the stroke.</p>
5574
5575
5576 <ul><b>Type:</b>
5577 <li>
5578 <a href="../classes/Color.html"><tt>Color</tt></a>
5579 </li>
5580 </ul>
5581
5582 <p>
5583<b>Example</b> &mdash; Setting the stroke color of a path:
5584</p>
5585
5586<div class="paperscript split">
5587
5588<div class="buttons">
5589<div class="button run">Run</div>
5590</div>
5591
5592<script type="text/paperscript" canvas="canvas-76">
5593// Create a circle shaped path at { x: 80, y: 50 }
5594// with a radius of 35:
5595var circle = new Path.Circle({
5596 center: [80, 50],
5597 radius: 35
5598});
5599
5600// Set its stroke color to RGB red:
5601circle.strokeColor = new Color(1, 0, 0);
5602</script>
5603<div class="canvas"><canvas width="516" height="100" id="canvas-76"></canvas></div>
5604</div>
5605
5606
5607</div>
5608
5609</div>
5610</div>
5611
5612
5613<div id="strokewidth" class="member">
5614<div class="member-link">
5615<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
5616</div>
5617<div class="member-description hidden">
5618
5619<div class="member-text">
5620 <p>The width of the stroke.</p>
5621
5622
5623 <ul><b>Type:</b>
5624 <li>
5625 <tt>Number</tt>
5626 </li>
5627 </ul>
5628
5629 <p>
5630<b>Example</b> &mdash; Setting an item's stroke width:
5631</p>
5632
5633<div class="paperscript split">
5634
5635<div class="buttons">
5636<div class="button run">Run</div>
5637</div>
5638
5639<script type="text/paperscript" canvas="canvas-77">
5640// Create a circle shaped path at { x: 80, y: 50 }
5641// with a radius of 35:
5642var circle = new Path.Circle({
5643 center: [80, 50],
5644 radius: 35,
5645 strokeColor: 'red'
5646});
5647
5648// Set its stroke width to 10:
5649circle.strokeWidth = 10;
5650</script>
5651<div class="canvas"><canvas width="516" height="100" id="canvas-77"></canvas></div>
5652</div>
5653
5654
5655</div>
5656
5657</div>
5658</div>
5659
5660
5661<div id="strokecap" class="member">
5662<div class="member-link">
5663<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
5664</div>
5665<div class="member-description hidden">
5666
5667<div class="member-text">
5668 <p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
5669have a stroke.</p>
5670
5671
5672 <ul><b>Default:</b>
5673 <li>
5674 <tt>'butt'</tt>
5675 </li>
5676 </ul>
5677
5678 <ul><b>Type:</b>
5679 <li>
5680 <tt>String('round', 'square', 'butt')</tt>
5681 </li>
5682 </ul>
5683
5684 <p>
5685<b>Example</b> &mdash; A look at the different stroke caps:
5686</p>
5687
5688<div class="paperscript split">
5689
5690<div class="buttons">
5691<div class="button run">Run</div>
5692</div>
5693
5694<script type="text/paperscript" canvas="canvas-78">
5695var line = new Path({
5696 segments: [[80, 50], [420, 50]],
5697 strokeColor: 'black',
5698 strokeWidth: 20,
5699 selected: true
5700});
5701
5702// Set the stroke cap of the line to be round:
5703line.strokeCap = 'round';
5704
5705// Copy the path and set its stroke cap to be square:
5706var line2 = line.clone();
5707line2.position.y += 50;
5708line2.strokeCap = 'square';
5709
5710// Make another copy and set its stroke cap to be butt:
5711var line2 = line.clone();
5712line2.position.y += 100;
5713line2.strokeCap = 'butt';
5714</script>
5715<div class="canvas"><canvas width="516" height="200" id="canvas-78"></canvas></div>
5716</div>
5717
5718
5719</div>
5720
5721</div>
5722</div>
5723
5724
5725<div id="strokejoin" class="member">
5726<div class="member-link">
5727<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
5728</div>
5729<div class="member-description hidden">
5730
5731<div class="member-text">
5732 <p>The shape to be used at the corners of paths when they have a stroke.</p>
5733
5734
5735 <ul><b>Default:</b>
5736 <li>
5737 <tt>'miter'</tt>
5738 </li>
5739 </ul>
5740
5741 <ul><b>Type:</b>
5742 <li>
5743 <tt>String('miter', 'round', 'bevel')</tt>
5744 </li>
5745 </ul>
5746
5747 <p>
5748<b>Example</b> &mdash; A look at the different stroke joins:
5749</p>
5750
5751<div class="paperscript split">
5752
5753<div class="buttons">
5754<div class="button run">Run</div>
5755</div>
5756
5757<script type="text/paperscript" canvas="canvas-79">
5758var path = new Path({
5759 segments: [[80, 100], [120, 40], [160, 100]],
5760 strokeColor: 'black',
5761 strokeWidth: 20,
5762 // Select the path, in order to see where the stroke is formed:
5763 selected: true
5764});
5765
5766var path2 = path.clone();
5767path2.position.x += path2.bounds.width * 1.5;
5768path2.strokeJoin = 'round';
5769
5770var path3 = path2.clone();
5771path3.position.x += path3.bounds.width * 1.5;
5772path3.strokeJoin = 'bevel';
5773</script>
5774<div class="canvas"><canvas width="516" height="120" id="canvas-79"></canvas></div>
5775</div>
5776
5777
5778</div>
5779
5780</div>
5781</div>
5782
5783
5784<div id="dashoffset" class="member">
5785<div class="member-link">
5786<a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
5787</div>
5788<div class="member-description hidden">
5789
5790<div class="member-text">
5791 <p>The dash offset of the stroke.</p>
5792
5793
5794 <ul><b>Default:</b>
5795 <li>
5796 <tt>0</tt>
5797 </li>
5798 </ul>
5799
5800 <ul><b>Type:</b>
5801 <li>
5802 <tt>Number</tt>
5803 </li>
5804 </ul>
5805
5806
5807</div>
5808
5809</div>
5810</div>
5811
5812
5813<div id="dasharray" class="member">
5814<div class="member-link">
5815<a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
5816</div>
5817<div class="member-description hidden">
5818
5819<div class="member-text">
5820 <p>Specifies an array containing the dash and gap lengths of the stroke.</p>
5821
5822
5823 <ul><b>Default:</b>
5824 <li>
5825 <tt>[]</tt>
5826 </li>
5827 </ul>
5828
5829 <ul><b>Type:</b>
5830 <li>
5831 <tt>Array</tt>
5832 </li>
5833 </ul>
5834
5835 <p>
5836<b>Example</b>
5837</p>
5838
5839<div class="paperscript split">
5840
5841<div class="buttons">
5842<div class="button run">Run</div>
5843</div>
5844
5845<script type="text/paperscript" canvas="canvas-80">
5846var path = new Path.Circle({
5847 center: [80, 50],
5848 radius: 40,
5849 strokeWidth: 2,
5850 strokeColor: 'black'
5851});
5852
5853// Set the dashed stroke to [10pt dash, 4pt gap]:
5854path.dashArray = [10, 4];
5855</script>
5856<div class="canvas"><canvas width="516" height="100" id="canvas-80"></canvas></div>
5857</div>
5858
5859
5860</div>
5861
5862</div>
5863</div>
5864
5865
5866<div id="miterlimit" class="member">
5867<div class="member-link">
5868<a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
5869</div>
5870<div class="member-description hidden">
5871
5872<div class="member-text">
5873 <p>The miter limit of the stroke.</p>
5874<p>When two line segments meet at a sharp angle and miter joins have been
5875specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
5876extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
5877miterLimit imposes a limit on the ratio of the miter length to the
5878<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
5879
5880
5881 <ul><b>Default:</b>
5882 <li>
5883 <tt>10</tt>
5884 </li>
5885 </ul>
5886
5887 <ul><b>Type:</b>
5888 <li>
5889 <tt>Number</tt>
5890 </li>
5891 </ul>
5892
5893
5894</div>
5895
5896</div>
5897</div>
5898
5899
5900<div id="windingrule" class="member">
5901<div class="member-link">
5902<a name="windingrule" href="#windingrule"><tt><b>windingRule</b></tt></a>
5903</div>
5904<div class="member-description hidden">
5905
5906<div class="member-text">
5907 <p>The winding-rule with which the shape gets filled. Please note that only
5908modern browsers support winding-rules other than <tt>'nonzero'</tt>.</p>
5909
5910
5911 <ul><b>Default:</b>
5912 <li>
5913 <tt>'nonzero'</tt>
5914 </li>
5915 </ul>
5916
5917 <ul><b>Type:</b>
5918 <li>
5919 <tt>String('nonzero', 'evenodd')</tt>
5920 </li>
5921 </ul>
5922
5923
5924</div>
5925
5926</div>
5927</div>
5928
5929
5930 <h3>Fill Style</h3>
5931
5932<div id="fillcolor" class="member">
5933<div class="member-link">
5934<a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
5935</div>
5936<div class="member-description hidden">
5937
5938<div class="member-text">
5939 <p>The fill color of the item.</p>
5940
5941
5942 <ul><b>Type:</b>
5943 <li>
5944 <a href="../classes/Color.html"><tt>Color</tt></a>
5945 </li>
5946 </ul>
5947
5948 <p>
5949<b>Example</b> &mdash; Setting the fill color of a path to red:
5950</p>
5951
5952<div class="paperscript split">
5953
5954<div class="buttons">
5955<div class="button run">Run</div>
5956</div>
5957
5958<script type="text/paperscript" canvas="canvas-81">
5959// Create a circle shaped path at { x: 80, y: 50 }
5960// with a radius of 35:
5961var circle = new Path.Circle({
5962 center: [80, 50],
5963 radius: 35
5964});
5965
5966// Set the fill color of the circle to RGB red:
5967circle.fillColor = new Color(1, 0, 0);
5968</script>
5969<div class="canvas"><canvas width="516" height="100" id="canvas-81"></canvas></div>
5970</div>
5971
5972
5973</div>
5974
5975</div>
5976</div>
5977
5978
5979 <h3>Selection Style</h3>
5980
5981<div id="selectedcolor" class="member">
5982<div class="member-link">
5983<a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
5984</div>
5985<div class="member-description hidden">
5986
5987<div class="member-text">
5988 <p>The color the item is highlighted with when selected. If the item does
5989not specify its own color, the color defined by its layer is used instead.</p>
5990
5991
5992 <ul><b>Type:</b>
5993 <li>
5994 <a href="../classes/Color.html"><tt>Color</tt></a>
5995 </li>
5996 </ul>
5997
5998
5999</div>
6000
6001</div>
6002</div>
6003
6004
6005 <h3>Event Handlers</h3>
6006
6007<div id="onframe" class="member">
6008<div class="member-link">
6009<a name="onframe" href="#onframe"><tt><b>onFrame</b></tt></a>
6010</div>
6011<div class="member-description hidden">
6012
6013<div class="member-text">
6014 <p>Item level handler function to be called on each frame of an animation.</p>
6015<p>The function receives an event object which contains information about
6016the frame event:</p>
6017<p><b><tt>event.count</tt></b>: the number of times the frame event was
6018fired.</p>
6019<p><b><tt>event.time</tt></b>: the total amount of time passed since the
6020first frame event in seconds.</p>
6021<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last
6022frame event.</p>
6023
6024
6025 <ul><b>Type:</b>
6026 <li>
6027 <tt>Function</tt>
6028 </li>
6029 </ul>
6030
6031 <p><b>See also:</b>
6032 <tt><a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a></tt>
6033 </p>
6034
6035 <p>
6036<b>Example</b> &mdash; Creating an animation:
6037</p>
6038
6039<div class="paperscript split">
6040
6041<div class="buttons">
6042<div class="button run">Run</div>
6043</div>
6044
6045<script type="text/paperscript" canvas="canvas-82">
6046// Create a rectangle shaped path with its top left point at:
6047// {x: 50, y: 25} and a size of {width: 50, height: 50}
6048var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
6049path.fillColor = 'black';
6050
6051path.onFrame = function(event) {
6052 // Every frame, rotate the path by 3 degrees:
6053 this.rotate(3);
6054}
6055</script>
6056<div class="canvas"><canvas width="516" height="100" id="canvas-82"></canvas></div>
6057</div>
6058
6059
6060</div>
6061
6062</div>
6063</div>
6064
6065
6066<div id="onmousedown" class="member">
6067<div class="member-link">
6068<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
6069</div>
6070<div class="member-description hidden">
6071
6072<div class="member-text">
6073 <p>The function to be called when the mouse button is pushed down on the
6074item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
6075information about the mouse event.</p>
6076
6077
6078 <ul><b>Type:</b>
6079 <li>
6080 <tt>Function</tt>
6081 </li>
6082 </ul>
6083
6084 <p>
6085<b>Example</b> &mdash; Press the mouse button down on the circle shaped path, to make it red:
6086</p>
6087
6088<div class="paperscript split">
6089
6090<div class="buttons">
6091<div class="button run">Run</div>
6092</div>
6093
6094<script type="text/paperscript" canvas="canvas-83">
6095// Create a circle shaped path at the center of the view:
6096var path = new Path.Circle({
6097 center: view.center,
6098 radius: 25,
6099 fillColor: 'black'
6100});
6101
6102// When the mouse is pressed on the item,
6103// set its fill color to red:
6104path.onMouseDown = function(event) {
6105 this.fillColor = 'red';
6106}
6107</script>
6108<div class="canvas"><canvas width="516" height="100" id="canvas-83"></canvas></div>
6109</div>
6110
6111
6112<p>
6113<b>Example</b> &mdash; Press the mouse on the circle shaped paths to remove them:
6114</p>
6115
6116<div class="paperscript split">
6117
6118<div class="buttons">
6119<div class="button run">Run</div>
6120</div>
6121
6122<script type="text/paperscript" canvas="canvas-84">
6123// Loop 30 times:
6124for (var i = 0; i < 30; i++) {
6125 // Create a circle shaped path at a random position
6126 // in the view:
6127 var path = new Path.Circle({
6128 center: Point.random() * view.size,
6129 radius: 25,
6130 fillColor: 'black',
6131 strokeColor: 'white'
6132 });
6133
6134 // When the mouse is pressed on the item, remove it:
6135 path.onMouseDown = function(event) {
6136 this.remove();
6137 }
6138}
6139</script>
6140<div class="canvas"><canvas width="516" height="100" id="canvas-84"></canvas></div>
6141</div>
6142
6143
6144</div>
6145
6146</div>
6147</div>
6148
6149
6150<div id="onmouseup" class="member">
6151<div class="member-link">
6152<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
6153</div>
6154<div class="member-description hidden">
6155
6156<div class="member-text">
6157 <p>The function to be called when the mouse button is released over the item.</p>
6158<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
6159information about the mouse event.</p>
6160
6161
6162 <ul><b>Type:</b>
6163 <li>
6164 <tt>Function</tt>
6165 </li>
6166 </ul>
6167
6168 <p>
6169<b>Example</b> &mdash; Release the mouse button over the circle shaped path, to make it red:
6170</p>
6171
6172<div class="paperscript split">
6173
6174<div class="buttons">
6175<div class="button run">Run</div>
6176</div>
6177
6178<script type="text/paperscript" canvas="canvas-85">
6179// Create a circle shaped path at the center of the view:
6180var path = new Path.Circle({
6181 center: view.center,
6182 radius: 25,
6183 fillColor: 'black'
6184});
6185
6186// When the mouse is released over the item,
6187// set its fill color to red:
6188path.onMouseUp = function(event) {
6189 this.fillColor = 'red';
6190}
6191</script>
6192<div class="canvas"><canvas width="516" height="100" id="canvas-85"></canvas></div>
6193</div>
6194
6195
6196</div>
6197
6198</div>
6199</div>
6200
6201
6202<div id="onclick" class="member">
6203<div class="member-link">
6204<a name="onclick" href="#onclick"><tt><b>onClick</b></tt></a>
6205</div>
6206<div class="member-description hidden">
6207
6208<div class="member-text">
6209 <p>The function to be called when the mouse clicks on the item. The function
6210receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the
6211mouse event.</p>
6212
6213
6214 <ul><b>Type:</b>
6215 <li>
6216 <tt>Function</tt>
6217 </li>
6218 </ul>
6219
6220 <p>
6221<b>Example</b> &mdash; Click on the circle shaped path, to make it red:
6222</p>
6223
6224<div class="paperscript split">
6225
6226<div class="buttons">
6227<div class="button run">Run</div>
6228</div>
6229
6230<script type="text/paperscript" canvas="canvas-86">
6231// Create a circle shaped path at the center of the view:
6232var path = new Path.Circle({
6233 center: view.center,
6234 radius: 25,
6235 fillColor: 'black'
6236});
6237
6238// When the mouse is clicked on the item,
6239// set its fill color to red:
6240path.onClick = function(event) {
6241 this.fillColor = 'red';
6242}
6243</script>
6244<div class="canvas"><canvas width="516" height="100" id="canvas-86"></canvas></div>
6245</div>
6246
6247
6248<p>
6249<b>Example</b> &mdash; Click on the circle shaped paths to remove them:
6250</p>
6251
6252<div class="paperscript split">
6253
6254<div class="buttons">
6255<div class="button run">Run</div>
6256</div>
6257
6258<script type="text/paperscript" canvas="canvas-87">
6259// Loop 30 times:
6260for (var i = 0; i < 30; i++) {
6261 // Create a circle shaped path at a random position
6262 // in the view:
6263 var path = new Path.Circle({
6264 center: Point.random() * view.size,
6265 radius: 25,
6266 fillColor: 'black',
6267 strokeColor: 'white'
6268 });
6269
6270 // When the mouse clicks on the item, remove it:
6271 path.onClick = function(event) {
6272 this.remove();
6273 }
6274}
6275</script>
6276<div class="canvas"><canvas width="516" height="100" id="canvas-87"></canvas></div>
6277</div>
6278
6279
6280</div>
6281
6282</div>
6283</div>
6284
6285
6286<div id="ondoubleclick" class="member">
6287<div class="member-link">
6288<a name="ondoubleclick" href="#ondoubleclick"><tt><b>onDoubleClick</b></tt></a>
6289</div>
6290<div class="member-description hidden">
6291
6292<div class="member-text">
6293 <p>The function to be called when the mouse double clicks on the item. The
6294function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information
6295about the mouse event.</p>
6296
6297
6298 <ul><b>Type:</b>
6299 <li>
6300 <tt>Function</tt>
6301 </li>
6302 </ul>
6303
6304 <p>
6305<b>Example</b> &mdash; Double click on the circle shaped path, to make it red:
6306</p>
6307
6308<div class="paperscript split">
6309
6310<div class="buttons">
6311<div class="button run">Run</div>
6312</div>
6313
6314<script type="text/paperscript" canvas="canvas-88">
6315// Create a circle shaped path at the center of the view:
6316var path = new Path.Circle({
6317 center: view.center,
6318 radius: 25,
6319 fillColor: 'black'
6320});
6321
6322// When the mouse is double clicked on the item,
6323// set its fill color to red:
6324path.onDoubleClick = function(event) {
6325 this.fillColor = 'red';
6326}
6327</script>
6328<div class="canvas"><canvas width="516" height="100" id="canvas-88"></canvas></div>
6329</div>
6330
6331
6332<p>
6333<b>Example</b> &mdash; Double click on the circle shaped paths to remove them:
6334</p>
6335
6336<div class="paperscript split">
6337
6338<div class="buttons">
6339<div class="button run">Run</div>
6340</div>
6341
6342<script type="text/paperscript" canvas="canvas-89">
6343// Loop 30 times:
6344for (var i = 0; i < 30; i++) {
6345 // Create a circle shaped path at a random position
6346 // in the view:
6347 var path = new Path.Circle({
6348 center: Point.random() * view.size,
6349 radius: 25,
6350 fillColor: 'black',
6351 strokeColor: 'white'
6352 });
6353
6354 // When the mouse is double clicked on the item, remove it:
6355 path.onDoubleClick = function(event) {
6356 this.remove();
6357 }
6358}
6359</script>
6360<div class="canvas"><canvas width="516" height="100" id="canvas-89"></canvas></div>
6361</div>
6362
6363
6364</div>
6365
6366</div>
6367</div>
6368
6369
6370<div id="onmousemove" class="member">
6371<div class="member-link">
6372<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
6373</div>
6374<div class="member-description hidden">
6375
6376<div class="member-text">
6377 <p>The function to be called repeatedly when the mouse moves on top of the
6378item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
6379information about the mouse event.</p>
6380
6381
6382 <ul><b>Type:</b>
6383 <li>
6384 <tt>Function</tt>
6385 </li>
6386 </ul>
6387
6388 <p>
6389<b>Example</b> &mdash; Move over the circle shaped path, to change its opacity:
6390</p>
6391
6392<div class="paperscript split">
6393
6394<div class="buttons">
6395<div class="button run">Run</div>
6396</div>
6397
6398<script type="text/paperscript" canvas="canvas-90">
6399// Create a circle shaped path at the center of the view:
6400 var path = new Path.Circle({
6401 center: view.center,
6402 radius: 25,
6403 fillColor: 'black'
6404 });
6405
6406// When the mouse moves on top of the item, set its opacity
6407// to a random value between 0 and 1:
6408path.onMouseMove = function(event) {
6409 this.opacity = Math.random();
6410}
6411</script>
6412<div class="canvas"><canvas width="516" height="100" id="canvas-90"></canvas></div>
6413</div>
6414
6415
6416</div>
6417
6418</div>
6419</div>
6420
6421
6422<div id="onmouseenter" class="member">
6423<div class="member-link">
6424<a name="onmouseenter" href="#onmouseenter"><tt><b>onMouseEnter</b></tt></a>
6425</div>
6426<div class="member-description hidden">
6427
6428<div class="member-text">
6429 <p>The function to be called when the mouse moves over the item. This
6430function will only be called again, once the mouse moved outside of the
6431item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which
6432contains information about the mouse event.</p>
6433
6434
6435 <ul><b>Type:</b>
6436 <li>
6437 <tt>Function</tt>
6438 </li>
6439 </ul>
6440
6441 <p>
6442<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.
6443</p>
6444
6445<div class="paperscript split">
6446
6447<div class="buttons">
6448<div class="button run">Run</div>
6449</div>
6450
6451<script type="text/paperscript" canvas="canvas-91">
6452// Create a circle shaped path at the center of the view:
6453var path = new Path.Circle({
6454 center: view.center,
6455 radius: 25,
6456 fillColor: 'black'
6457});
6458
6459// When the mouse enters the item, set its fill color to red:
6460path.onMouseEnter = function(event) {
6461 this.fillColor = 'red';
6462}
6463
6464// When the mouse leaves the item, set its fill color to black:
6465path.onMouseLeave = function(event) {
6466 this.fillColor = 'black';
6467}
6468</script>
6469<div class="canvas"><canvas width="516" height="100" id="canvas-91"></canvas></div>
6470</div>
6471
6472
6473<p>
6474<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.
6475</p>
6476
6477<div class="paperscript split">
6478
6479<div class="buttons">
6480<div class="button run">Run</div>
6481</div>
6482
6483<script type="text/paperscript" canvas="canvas-92">
6484function enter(event) {
6485 this.fillColor = 'red';
6486}
6487
6488function leave(event) {
6489 this.fillColor = 'black';
6490}
6491
6492// When the mouse is pressed:
6493function onMouseDown(event) {
6494 // Create a circle shaped path at the position of the mouse:
6495 var path = new Path.Circle(event.point, 25);
6496 path.fillColor = 'black';
6497
6498 // When the mouse enters the item, set its fill color to red:
6499 path.onMouseEnter = enter;
6500
6501 // When the mouse leaves the item, set its fill color to black:
6502 path.onMouseLeave = leave;
6503}
6504</script>
6505<div class="canvas"><canvas width="516" height="100" id="canvas-92"></canvas></div>
6506</div>
6507
6508
6509</div>
6510
6511</div>
6512</div>
6513
6514
6515<div id="onmouseleave" class="member">
6516<div class="member-link">
6517<a name="onmouseleave" href="#onmouseleave"><tt><b>onMouseLeave</b></tt></a>
6518</div>
6519<div class="member-description hidden">
6520
6521<div class="member-text">
6522 <p>The function to be called when the mouse moves out of the item.</p>
6523<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
6524information about the mouse event.</p>
6525
6526
6527 <ul><b>Type:</b>
6528 <li>
6529 <tt>Function</tt>
6530 </li>
6531 </ul>
6532
6533 <p>
6534<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:
6535</p>
6536
6537<div class="paperscript split">
6538
6539<div class="buttons">
6540<div class="button run">Run</div>
6541</div>
6542
6543<script type="text/paperscript" canvas="canvas-93">
6544// Create a circle shaped path at the center of the view:
6545var path = new Path.Circle({
6546 center: view.center,
6547 radius: 25,
6548 fillColor: 'black'
6549});
6550
6551// When the mouse leaves the item, set its fill color to red:
6552path.onMouseLeave = function(event) {
6553 this.fillColor = 'red';
6554}
6555</script>
6556<div class="canvas"><canvas width="516" height="100" id="canvas-93"></canvas></div>
6557</div>
6558
6559
6560</div>
6561
6562</div>
6563</div>
6564
6565</div>
6566
6567
6568<!-- =========================== inherited methods ========================= -->
6569<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
6570
6571
6572<div id="set-props" class="member">
6573<div class="member-link">
6574<a name="set-props" href="#set-props"><tt><b>set</b>(props)</tt></a>
6575</div>
6576<div class="member-description hidden">
6577<div class="member-text">
6578 <p>Sets those properties of the passed object literal on this item to
6579the values defined in the object literal, if the item has property of the
6580given name (or a setter defined for it).</p>
6581
6582<ul><b>Parameters:</b>
6583
6584<li>
6585<tt>props:</tt>
6586<tt>Object</tt>
6587
6588
6589</li>
6590
6591</ul>
6592
6593
6594 <ul><b>Returns:</b>
6595
6596 <li>
6597<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the item itself.
6598</li>
6599
6600 </ul>
6601
6602
6603 <p>
6604<b>Example</b> &mdash; Setting properties through an object literal
6605</p>
6606
6607<div class="paperscript split">
6608
6609<div class="buttons">
6610<div class="button run">Run</div>
6611</div>
6612
6613<script type="text/paperscript" canvas="canvas-94">
6614var circle = new Path.Circle({
6615 center: [80, 50],
6616 radius: 35
6617});
6618
6619circle.set({
6620 strokeColor: 'red',
6621 strokeWidth: 10,
6622 fillColor: 'black',
6623 selected: true
6624});
6625</script>
6626<div class="canvas"><canvas width="516" height="100" id="canvas-94"></canvas></div>
6627</div>
6628
6629
6630</div>
6631</div>
6632</div>
6633
6634
6635<div id="isinserted" class="member">
6636<div class="member-link">
6637<a name="isinserted" href="#isinserted"><tt><b>isInserted</b>()</tt></a>
6638</div>
6639<div class="member-description hidden">
6640<div class="member-text">
6641 <p>Checks whether the item and all its parents are inserted into the DOM or
6642not.</p>
6643
6644
6645 <ul><b>Returns:</b>
6646
6647 <li>
6648<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is inserted into the DOM, <tt>false</tt> otherwise
6649</li>
6650
6651 </ul>
6652
6653
6654
6655</div>
6656</div>
6657</div>
6658
6659
6660<div id="clone" class="member">
6661<div class="member-link">
6662<a name="clone" href="#clone"><tt><b>clone</b>([insert])</tt></a>
6663</div>
6664<div class="member-description hidden">
6665<div class="member-text">
6666 <p>Clones the item within the same project and places the copy above the
6667item.</p>
6668
6669<ul><b>Parameters:</b>
6670
6671<li>
6672<tt>insert:</tt>
6673<tt>Boolean</tt>
6674&mdash;&nbsp;specifies whether the copy should be
6675inserted into the DOM. When set to <tt>true</tt>, it is inserted above the
6676original.
6677&mdash;&nbsp;optional, default: <tt>true</tt>
6678</li>
6679
6680</ul>
6681
6682
6683 <ul><b>Returns:</b>
6684
6685 <li>
6686<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
6687</li>
6688
6689 </ul>
6690
6691
6692 <p>
6693<b>Example</b> &mdash; Cloning items:
6694</p>
6695
6696<div class="paperscript split">
6697
6698<div class="buttons">
6699<div class="button run">Run</div>
6700</div>
6701
6702<script type="text/paperscript" canvas="canvas-95">
6703var circle = new Path.Circle({
6704 center: [50, 50],
6705 radius: 10,
6706 fillColor: 'red'
6707});
6708
6709// Make 20 copies of the circle:
6710for (var i = 0; i < 20; i++) {
6711 var copy = circle.clone();
6712
6713 // Distribute the copies horizontally, so we can see them:
6714 copy.position.x += i * copy.bounds.width;
6715}
6716</script>
6717<div class="canvas"><canvas width="516" height="100" id="canvas-95"></canvas></div>
6718</div>
6719
6720
6721</div>
6722</div>
6723</div>
6724
6725
6726<div id="copyto-item" class="member">
6727<div class="member-link">
6728<a name="copyto-item" href="#copyto-item"><tt><b>copyTo</b>(item)</tt></a>
6729</div>
6730<div class="member-description hidden">
6731<div class="member-text">
6732 <p>When passed a project, copies the item to the project,
6733or duplicates it within the same project. When passed an item,
6734copies the item into the specified item.</p>
6735
6736<ul><b>Parameters:</b>
6737
6738<li>
6739<tt>item:</tt>
6740<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>
6741&mdash;&nbsp;the item or project to
6742copy the item to
6743
6744</li>
6745
6746</ul>
6747
6748
6749 <ul><b>Returns:</b>
6750
6751 <li>
6752<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
6753</li>
6754
6755 </ul>
6756
6757
6758
6759</div>
6760</div>
6761</div>
6762
6763
6764<div id="rasterize" class="member">
6765<div class="member-link">
6766<a name="rasterize" href="#rasterize"><tt><b>rasterize</b>([resolution])</tt></a>
6767</div>
6768<div class="member-description hidden">
6769<div class="member-text">
6770 <p>Rasterizes the item into a newly created Raster object. The item itself
6771is not removed after rasterization.</p>
6772
6773<ul><b>Parameters:</b>
6774
6775<li>
6776<tt>resolution:</tt>
6777<tt>Number</tt>
6778&mdash;&nbsp;the resolution of the raster in dpi
6779&mdash;&nbsp;optional, default: <tt>72</tt>
6780</li>
6781
6782</ul>
6783
6784
6785 <ul><b>Returns:</b>
6786
6787 <li>
6788<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
6789</li>
6790
6791 </ul>
6792
6793
6794 <p>
6795<b>Example</b> &mdash; Rasterizing an item:
6796</p>
6797
6798<div class="paperscript split">
6799
6800<div class="buttons">
6801<div class="button run">Run</div>
6802</div>
6803
6804<script type="text/paperscript" canvas="canvas-96">
6805var circle = new Path.Circle({
6806 center: [50, 50],
6807 radius: 5,
6808 fillColor: 'red'
6809});
6810
6811// Create a rasterized version of the path:
6812var raster = circle.rasterize();
6813
6814// Move it 100pt to the right:
6815raster.position.x += 100;
6816
6817// Scale the path and the raster by 300%, so we can compare them:
6818circle.scale(5);
6819raster.scale(5);
6820</script>
6821<div class="canvas"><canvas width="516" height="100" id="canvas-96"></canvas></div>
6822</div>
6823
6824
6825</div>
6826</div>
6827</div>
6828
6829
6830<div id="contains-point" class="member">
6831<div class="member-link">
6832<a name="contains-point" href="#contains-point"><tt><b>contains</b>(point)</tt></a>
6833</div>
6834<div class="member-description hidden">
6835<div class="member-text">
6836 <p>Checks whether the item's geometry contains the given point.</p>
6837
6838<ul><b>Parameters:</b>
6839
6840<li>
6841<tt>point:</tt>
6842<a href="../classes/Point.html"><tt>Point</tt></a>
6843&mdash;&nbsp;The point to check for.
6844
6845</li>
6846
6847</ul>
6848
6849
6850
6851 <p>
6852<b>Example</b> &mdash; Click within and outside the star below Create a star shaped path:
6853</p>
6854
6855<div class="paperscript split">
6856
6857<div class="buttons">
6858<div class="button run">Run</div>
6859</div>
6860
6861<script type="text/paperscript" canvas="canvas-97">
6862var path = new Path.Star({
6863 center: [50, 50],
6864 points: 12,
6865 radius1: 20,
6866 radius2: 40,
6867 fillColor: 'black'
6868});
6869
6870// Whenever the user presses the mouse:
6871function onMouseDown(event) {
6872 // If the position of the mouse is within the path,
6873 // set its fill color to red, otherwise set it to
6874 // black:
6875 if (path.contains(event.point)) {
6876 path.fillColor = 'red';
6877 } else {
6878 path.fillColor = 'black';
6879 }
6880}
6881</script>
6882<div class="canvas"><canvas width="516" height="100" id="canvas-97"></canvas></div>
6883</div>
6884
6885
6886</div>
6887</div>
6888</div>
6889
6890
6891<div id="hittest-point" class="member">
6892<div class="member-link">
6893<a name="hittest-point" href="#hittest-point"><tt><b>hitTest</b>(point[, options])</tt></a>
6894</div>
6895<div class="member-description hidden">
6896<div class="member-text">
6897 <p>Perform a hit test on the item (and its children, if it is a
6898<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>
6899<p>The options object allows you to control the specifics of the hit test
6900and may contain a combination of the following values:</p>
6901<p><b>options.tolerance:</b> <tt>Number</tt> – the tolerance of the hit test
6902in points. Can also be controlled through
6903<a href="../classes/Project.html#options"><tt>project.options</tt></a><tt>.hitTolerance</tt>.</p>
6904<p><b>options.type:</b> Only hit test again a certain item
6905type: <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>
6906<p><b>options.fill:</b> <tt>Boolean</tt> – hit test the fill of items.</p>
6907<p><b>options.stroke:</b> <tt>Boolean</tt> – hit test the curves of path
6908items, taking into account stroke width.</p>
6909<p><b>options.segment:</b> <tt>Boolean</tt> – hit test for
6910<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
6911<p><b>options.handles:</b> <tt>Boolean</tt> – hit test for the handles
6912(<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>
6913<p><b>options.ends:</b> <tt>Boolean</tt> – only hit test for the first or
6914last segment points of open path items.</p>
6915<p><b>options.bounds:</b> <tt>Boolean</tt> – hit test the corners and
6916side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
6917<p><b>options.center:</b> <tt>Boolean</tt> – hit test the
6918<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
6919(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
6920<p><b>options.guides:</b> <tt>Boolean</tt> – hit test items that have
6921<tt>Item#guide</tt> set to <tt>true</tt>.</p>
6922<p><b>options.selected:</b> <tt>Boolean</tt> – only hit selected items.<b</p>
6923
6924<ul><b>Parameters:</b>
6925
6926<li>
6927<tt>point:</tt>
6928<a href="../classes/Point.html"><tt>Point</tt></a>
6929&mdash;&nbsp;The point where the hit test should be performed
6930
6931</li>
6932
6933<li>
6934<tt>options:</tt>
6935<tt>Object</tt>
6936
6937&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
6938tolerance: 2 }</tt>
6939</li>
6940
6941</ul>
6942
6943
6944 <ul><b>Returns:</b>
6945
6946 <li>
6947<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;a hit result object that contains more
6948information about what exactly was hit or <tt>null</tt> if nothing was
6949hit
6950</li>
6951
6952 </ul>
6953
6954
6955
6956</div>
6957</div>
6958</div>
6959
6960
6961<h3>Importing / Exporting JSON and SVG</h3>
6962
6963<div id="exportjson" class="member">
6964<div class="member-link">
6965<a name="exportjson" href="#exportjson"><tt><b>exportJSON</b>([options])</tt></a>
6966</div>
6967<div class="member-description hidden">
6968<div class="member-text">
6969 <p>Exports (serializes) the item with its content and child items to a JSON
6970data string.</p>
6971<p>The options object offers control over some aspects of the SVG export:</p>
6972<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
6973digits in numbers used in JSON data.</p>
6974
6975<ul><b>Parameters:</b>
6976
6977<li>
6978<tt>options:</tt>
6979<tt>Object</tt>
6980&mdash;&nbsp;the serialization options
6981&mdash;&nbsp;optional, default: <tt>{ precision: 5 }</tt>
6982</li>
6983
6984</ul>
6985
6986
6987 <ul><b>Returns:</b>
6988
6989 <li>
6990<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;the exported JSON data
6991</li>
6992
6993 </ul>
6994
6995
6996
6997</div>
6998</div>
6999</div>
7000
7001
7002<div id="importjson-json" class="member">
7003<div class="member-link">
7004<a name="importjson-json" href="#importjson-json"><tt><b>importJSON</b>(json)</tt></a>
7005</div>
7006<div class="member-description hidden">
7007<div class="member-text">
7008 <p>Imports (deserializes) the stored JSON data into this item. If the data
7009describes an item of the same class or a parent class of the item, the
7010data is imported into the item itself. If not, the imported item is added
7011to this item's <a href="../classes/Item.html#children"><tt>item.children</tt></a> list. Note that not all type of
7012items can have children.</p>
7013
7014<ul><b>Parameters:</b>
7015
7016<li>
7017<tt>json:</tt>
7018<tt>String</tt>
7019&mdash;&nbsp;the JSON data to import from.
7020
7021</li>
7022
7023</ul>
7024
7025
7026
7027
7028</div>
7029</div>
7030</div>
7031
7032
7033<div id="exportsvg" class="member">
7034<div class="member-link">
7035<a name="exportsvg" href="#exportsvg"><tt><b>exportSVG</b>([options])</tt></a>
7036</div>
7037<div class="member-description hidden">
7038<div class="member-text">
7039 <p>Exports the item with its content and child items as an SVG DOM.</p>
7040<p>The options object offers control over some aspects of the SVG export:</p>
7041<p><b>options.asString:</b> <tt>Boolean</tt> – wether a SVG node or a String
7042is to be returned.</p>
7043<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
7044digits in numbers used in SVG data.</p>
7045<p><b>options.matchShapes:</b> <tt>Boolean</tt> – wether imported path
7046items should tried to be converted to shape items, if their geometries
7047match.</p>
7048
7049<ul><b>Parameters:</b>
7050
7051<li>
7052<tt>options:</tt>
7053<tt>Object</tt>
7054&mdash;&nbsp;the export options.
7055&mdash;&nbsp;optional, default: <tt>{ asString: false, precision: 5,
7056matchShapes: false }</tt>
7057</li>
7058
7059</ul>
7060
7061
7062 <ul><b>Returns:</b>
7063
7064 <li>
7065<tt><tt>SVGSVGElement</tt></tt>&nbsp;&mdash;&nbsp;the item converted to an SVG node
7066</li>
7067
7068 </ul>
7069
7070
7071
7072</div>
7073</div>
7074</div>
7075
7076
7077<div id="importsvg-svg" class="member">
7078<div class="member-link">
7079<a name="importsvg-svg" href="#importsvg-svg"><tt><b>importSVG</b>(svg[, options])</tt></a>
7080</div>
7081<div class="member-description hidden">
7082<div class="member-text">
7083 <p>Converts the provided SVG content into Paper.js items and adds them to
7084the this item's children list.</p>
7085<p>Note that the item is not cleared first. You can call
7086<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
7087<p>The options object offers control over some aspects of the SVG import:</p>
7088<p><b>options.expandShapes:</b> <tt>Boolean</tt> – wether imported shape
7089items should be expanded to path items.</p>
7090
7091<ul><b>Parameters:</b>
7092
7093<li>
7094<tt>svg:</tt>
7095<tt>SVGSVGElement</tt> / <tt>String</tt>
7096&mdash;&nbsp;the SVG content to import
7097
7098</li>
7099
7100<li>
7101<tt>options:</tt>
7102<tt>Object</tt>
7103&mdash;&nbsp;the import options
7104&mdash;&nbsp;optional, default: <tt>{ expandShapes: false }</tt>
7105</li>
7106
7107</ul>
7108
7109
7110 <ul><b>Returns:</b>
7111
7112 <li>
7113<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the imported Paper.js parent item
7114</li>
7115
7116 </ul>
7117
7118
7119
7120</div>
7121</div>
7122</div>
7123
7124
7125<h3>Hierarchy Operations</h3>
7126
7127<div id="addchild-item-_preserve" class="member">
7128<div class="member-link">
7129<a name="addchild-item-_preserve" href="#addchild-item-_preserve"><tt><b>addChild</b>(item)</tt></a>
7130</div>
7131<div class="member-description hidden">
7132<div class="member-text">
7133 <p>Adds the specified item as a child of this item at the end of the
7134its children list. You can use this function for groups, compound
7135paths and layers.</p>
7136
7137<ul><b>Parameters:</b>
7138
7139<li>
7140<tt>item:</tt>
7141<a href="../classes/Item.html"><tt>Item</tt></a>
7142&mdash;&nbsp;the item to be added as a child
7143
7144</li>
7145
7146</ul>
7147
7148
7149 <ul><b>Returns:</b>
7150
7151 <li>
7152<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
7153possible.
7154</li>
7155
7156 </ul>
7157
7158
7159
7160</div>
7161</div>
7162</div>
7163
7164
7165<div id="insertchild-index-item-_preserve" class="member">
7166<div class="member-link">
7167<a name="insertchild-index-item-_preserve" href="#insertchild-index-item-_preserve"><tt><b>insertChild</b>(index, item)</tt></a>
7168</div>
7169<div class="member-description hidden">
7170<div class="member-text">
7171 <p>Inserts the specified item as a child of this item at the specified
7172index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
7173groups, compound paths and layers.</p>
7174
7175<ul><b>Parameters:</b>
7176
7177<li>
7178<tt>index:</tt>
7179<tt>Number</tt>
7180
7181
7182</li>
7183
7184<li>
7185<tt>item:</tt>
7186<a href="../classes/Item.html"><tt>Item</tt></a>
7187&mdash;&nbsp;the item to be inserted as a child
7188
7189</li>
7190
7191</ul>
7192
7193
7194 <ul><b>Returns:</b>
7195
7196 <li>
7197<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
7198possible.
7199</li>
7200
7201 </ul>
7202
7203
7204
7205</div>
7206</div>
7207</div>
7208
7209
7210<div id="addchildren-items-_preserve" class="member">
7211<div class="member-link">
7212<a name="addchildren-items-_preserve" href="#addchildren-items-_preserve"><tt><b>addChildren</b>(items)</tt></a>
7213</div>
7214<div class="member-description hidden">
7215<div class="member-text">
7216 <p>Adds the specified items as children of this item at the end of the
7217its children list. You can use this function for groups, compound
7218paths and layers.</p>
7219
7220<ul><b>Parameters:</b>
7221
7222<li>
7223<tt>items:</tt>
7224Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
7225&mdash;&nbsp;The items to be added as children
7226
7227</li>
7228
7229</ul>
7230
7231
7232 <ul><b>Returns:</b>
7233
7234 <li>
7235<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
7236possible.
7237</li>
7238
7239 </ul>
7240
7241
7242
7243</div>
7244</div>
7245</div>
7246
7247
7248<div id="insertchildren-index-items-_preserve-_type" class="member">
7249<div class="member-link">
7250<a name="insertchildren-index-items-_preserve-_type" href="#insertchildren-index-items-_preserve-_type"><tt><b>insertChildren</b>(index, items)</tt></a>
7251</div>
7252<div class="member-description hidden">
7253<div class="member-text">
7254 <p>Inserts the specified items as children of this item at the specified
7255index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
7256groups, compound paths and layers.</p>
7257
7258<ul><b>Parameters:</b>
7259
7260<li>
7261<tt>index:</tt>
7262<tt>Number</tt>
7263
7264
7265</li>
7266
7267<li>
7268<tt>items:</tt>
7269Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
7270&mdash;&nbsp;The items to be appended as children
7271
7272</li>
7273
7274</ul>
7275
7276
7277 <ul><b>Returns:</b>
7278
7279 <li>
7280<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
7281possible.
7282</li>
7283
7284 </ul>
7285
7286
7287
7288</div>
7289</div>
7290</div>
7291
7292
7293<div id="insertabove-item-_preserve" class="member">
7294<div class="member-link">
7295<a name="insertabove-item-_preserve" href="#insertabove-item-_preserve"><tt><b>insertAbove</b>(item)</tt></a>
7296</div>
7297<div class="member-description hidden">
7298<div class="member-text">
7299 <p>Inserts this item above the specified item.</p>
7300
7301<ul><b>Parameters:</b>
7302
7303<li>
7304<tt>item:</tt>
7305<a href="../classes/Item.html"><tt>Item</tt></a>
7306&mdash;&nbsp;the item above which it should be inserted
7307
7308</li>
7309
7310</ul>
7311
7312
7313 <ul><b>Returns:</b>
7314
7315 <li>
7316<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
7317possible.
7318</li>
7319
7320 </ul>
7321
7322
7323
7324</div>
7325</div>
7326</div>
7327
7328
7329<div id="insertbelow-item-_preserve" class="member">
7330<div class="member-link">
7331<a name="insertbelow-item-_preserve" href="#insertbelow-item-_preserve"><tt><b>insertBelow</b>(item)</tt></a>
7332</div>
7333<div class="member-description hidden">
7334<div class="member-text">
7335 <p>Inserts this item below the specified item.</p>
7336
7337<ul><b>Parameters:</b>
7338
7339<li>
7340<tt>item:</tt>
7341<a href="../classes/Item.html"><tt>Item</tt></a>
7342&mdash;&nbsp;the item above which it should be inserted
7343
7344</li>
7345
7346</ul>
7347
7348
7349 <ul><b>Returns:</b>
7350
7351 <li>
7352<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
7353possible.
7354</li>
7355
7356 </ul>
7357
7358
7359
7360</div>
7361</div>
7362</div>
7363
7364
7365<div id="sendtoback" class="member">
7366<div class="member-link">
7367<a name="sendtoback" href="#sendtoback"><tt><b>sendToBack</b>()</tt></a>
7368</div>
7369<div class="member-description hidden">
7370<div class="member-text">
7371 <p>Sends this item to the back of all other items within the same parent.</p>
7372
7373
7374
7375
7376</div>
7377</div>
7378</div>
7379
7380
7381<div id="bringtofront" class="member">
7382<div class="member-link">
7383<a name="bringtofront" href="#bringtofront"><tt><b>bringToFront</b>()</tt></a>
7384</div>
7385<div class="member-description hidden">
7386<div class="member-text">
7387 <p>Brings this item to the front of all other items within the same parent.</p>
7388
7389
7390
7391
7392</div>
7393</div>
7394</div>
7395
7396
7397<div id="appendbottom-item" class="member">
7398<div class="member-link">
7399<a name="appendbottom-item" href="#appendbottom-item"><tt><b>appendBottom</b>(item)</tt></a>
7400</div>
7401<div class="member-description hidden">
7402<div class="member-text">
7403 <p>Inserts the specified item as a child of this item by appending it to
7404the list of children and moving it below all other children. You can
7405use this function for groups, compound paths and layers.</p>
7406
7407<ul><b>Parameters:</b>
7408
7409<li>
7410<tt>item:</tt>
7411<a href="../classes/Item.html"><tt>Item</tt></a>
7412&mdash;&nbsp;The item to be appended as a child
7413
7414</li>
7415
7416</ul>
7417
7418
7419
7420
7421</div>
7422</div>
7423</div>
7424
7425
7426<div id="reduce" class="member">
7427<div class="member-link">
7428<a name="reduce" href="#reduce"><tt><b>reduce</b>()</tt></a>
7429</div>
7430<div class="member-description hidden">
7431<div class="member-text">
7432 <p>If this is a group, layer or compound-path with only one child-item,
7433the child-item is moved outside and the parent is erased. Otherwise, the
7434item itself is returned unmodified.</p>
7435
7436
7437 <ul><b>Returns:</b>
7438
7439 <li>
7440<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the reduced item
7441</li>
7442
7443 </ul>
7444
7445
7446
7447</div>
7448</div>
7449</div>
7450
7451
7452<div id="remove" class="member">
7453<div class="member-link">
7454<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
7455</div>
7456<div class="member-description hidden">
7457<div class="member-text">
7458 <p>Removes the item from the project. If the item has children, they are also
7459removed.</p>
7460
7461
7462 <ul><b>Returns:</b>
7463
7464 <li>
7465<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
7466</li>
7467
7468 </ul>
7469
7470
7471
7472</div>
7473</div>
7474</div>
7475
7476
7477<div id="removechildren" class="member">
7478<div class="member-link">
7479<a name="removechildren" href="#removechildren"><tt><b>removeChildren</b>()</tt></a>
7480</div>
7481<div class="member-description hidden">
7482<div class="member-text">
7483 <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>
7484
7485
7486 <ul><b>Returns:</b>
7487
7488 <li>
7489<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
7490</li>
7491
7492 </ul>
7493
7494
7495
7496</div>
7497</div>
7498</div>
7499
7500
7501<div id="removechildren-from" class="member">
7502<div class="member-link">
7503<a name="removechildren-from" href="#removechildren-from"><tt><b>removeChildren</b>(from[, to])</tt></a>
7504</div>
7505<div class="member-description hidden">
7506<div class="member-text">
7507 <p>Removes the children from the specified <tt>from</tt> index to the
7508<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>
7509
7510<ul><b>Parameters:</b>
7511
7512<li>
7513<tt>from:</tt>
7514<tt>Number</tt>
7515&mdash;&nbsp;the beginning index, inclusive
7516
7517</li>
7518
7519<li>
7520<tt>to:</tt>
7521<tt>Number</tt>
7522&mdash;&nbsp;the ending index, exclusive
7523&mdash;&nbsp;optional, default: <tt>children.length</tt>
7524</li>
7525
7526</ul>
7527
7528
7529 <ul><b>Returns:</b>
7530
7531 <li>
7532<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
7533</li>
7534
7535 </ul>
7536
7537
7538
7539</div>
7540</div>
7541</div>
7542
7543
7544<div id="reversechildren" class="member">
7545<div class="member-link">
7546<a name="reversechildren" href="#reversechildren"><tt><b>reverseChildren</b>()</tt></a>
7547</div>
7548<div class="member-description hidden">
7549<div class="member-text">
7550 <p>Reverses the order of the item's children</p>
7551
7552
7553
7554
7555</div>
7556</div>
7557</div>
7558
7559
7560<h3>Tests</h3>
7561
7562<div id="isempty" class="member">
7563<div class="member-link">
7564<a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
7565</div>
7566<div class="member-description hidden">
7567<div class="member-text">
7568 <p>Specifies whether the item has any content or not. The meaning of what
7569content is differs from type to type. For example, a <a href="../classes/Group.html"><tt>Group</tt></a> with
7570no 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>
7571with no segments all are considered empty.</p>
7572
7573
7574 <ul><b>Returns:</b>
7575
7576 <li>
7577<tt></tt>&nbsp;&mdash;&nbsp;Boolean
7578</li>
7579
7580 </ul>
7581
7582
7583
7584</div>
7585</div>
7586</div>
7587
7588
7589<h3>Hierarchy Tests</h3>
7590
7591<div id="haschildren" class="member">
7592<div class="member-link">
7593<a name="haschildren" href="#haschildren"><tt><b>hasChildren</b>()</tt></a>
7594</div>
7595<div class="member-description hidden">
7596<div class="member-text">
7597 <p>Checks if the item contains any children items.</p>
7598
7599
7600 <ul><b>Returns:</b>
7601
7602 <li>
7603<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
7604</li>
7605
7606 </ul>
7607
7608
7609
7610</div>
7611</div>
7612</div>
7613
7614
7615<div id="isabove-item" class="member">
7616<div class="member-link">
7617<a name="isabove-item" href="#isabove-item"><tt><b>isAbove</b>(item)</tt></a>
7618</div>
7619<div class="member-description hidden">
7620<div class="member-text">
7621 <p>Checks if this item is above the specified item in the stacking order
7622of the project.</p>
7623
7624<ul><b>Parameters:</b>
7625
7626<li>
7627<tt>item:</tt>
7628<a href="../classes/Item.html"><tt>Item</tt></a>
7629&mdash;&nbsp;The item to check against
7630
7631</li>
7632
7633</ul>
7634
7635
7636 <ul><b>Returns:</b>
7637
7638 <li>
7639<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
7640</li>
7641
7642 </ul>
7643
7644
7645
7646</div>
7647</div>
7648</div>
7649
7650
7651<div id="isbelow-item" class="member">
7652<div class="member-link">
7653<a name="isbelow-item" href="#isbelow-item"><tt><b>isBelow</b>(item)</tt></a>
7654</div>
7655<div class="member-description hidden">
7656<div class="member-text">
7657 <p>Checks if the item is below the specified item in the stacking order of
7658the project.</p>
7659
7660<ul><b>Parameters:</b>
7661
7662<li>
7663<tt>item:</tt>
7664<a href="../classes/Item.html"><tt>Item</tt></a>
7665&mdash;&nbsp;The item to check against
7666
7667</li>
7668
7669</ul>
7670
7671
7672 <ul><b>Returns:</b>
7673
7674 <li>
7675<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
7676</li>
7677
7678 </ul>
7679
7680
7681
7682</div>
7683</div>
7684</div>
7685
7686
7687<div id="isparent-item" class="member">
7688<div class="member-link">
7689<a name="isparent-item" href="#isparent-item"><tt><b>isParent</b>(item)</tt></a>
7690</div>
7691<div class="member-description hidden">
7692<div class="member-text">
7693 <p>Checks whether the specified item is the parent of the item.</p>
7694
7695<ul><b>Parameters:</b>
7696
7697<li>
7698<tt>item:</tt>
7699<a href="../classes/Item.html"><tt>Item</tt></a>
7700&mdash;&nbsp;The item to check against
7701
7702</li>
7703
7704</ul>
7705
7706
7707 <ul><b>Returns:</b>
7708
7709 <li>
7710<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
7711</li>
7712
7713 </ul>
7714
7715
7716
7717</div>
7718</div>
7719</div>
7720
7721
7722<div id="ischild-item" class="member">
7723<div class="member-link">
7724<a name="ischild-item" href="#ischild-item"><tt><b>isChild</b>(item)</tt></a>
7725</div>
7726<div class="member-description hidden">
7727<div class="member-text">
7728 <p>Checks whether the specified item is a child of the item.</p>
7729
7730<ul><b>Parameters:</b>
7731
7732<li>
7733<tt>item:</tt>
7734<a href="../classes/Item.html"><tt>Item</tt></a>
7735&mdash;&nbsp;The item to check against
7736
7737</li>
7738
7739</ul>
7740
7741
7742 <ul><b>Returns:</b>
7743
7744 <li>
7745<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
7746</li>
7747
7748 </ul>
7749
7750
7751
7752</div>
7753</div>
7754</div>
7755
7756
7757<div id="isdescendant-item" class="member">
7758<div class="member-link">
7759<a name="isdescendant-item" href="#isdescendant-item"><tt><b>isDescendant</b>(item)</tt></a>
7760</div>
7761<div class="member-description hidden">
7762<div class="member-text">
7763 <p>Checks if the item is contained within the specified item.</p>
7764
7765<ul><b>Parameters:</b>
7766
7767<li>
7768<tt>item:</tt>
7769<a href="../classes/Item.html"><tt>Item</tt></a>
7770&mdash;&nbsp;The item to check against
7771
7772</li>
7773
7774</ul>
7775
7776
7777 <ul><b>Returns:</b>
7778
7779 <li>
7780<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
7781</li>
7782
7783 </ul>
7784
7785
7786
7787</div>
7788</div>
7789</div>
7790
7791
7792<div id="isancestor-item" class="member">
7793<div class="member-link">
7794<a name="isancestor-item" href="#isancestor-item"><tt><b>isAncestor</b>(item)</tt></a>
7795</div>
7796<div class="member-description hidden">
7797<div class="member-text">
7798 <p>Checks if the item is an ancestor of the specified item.</p>
7799
7800<ul><b>Parameters:</b>
7801
7802<li>
7803<tt>item:</tt>
7804<a href="../classes/Item.html"><tt>Item</tt></a>
7805&mdash;&nbsp;the item to check against
7806
7807</li>
7808
7809</ul>
7810
7811
7812 <ul><b>Returns:</b>
7813
7814 <li>
7815<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
7816item, <tt>false</tt> otherwise
7817</li>
7818
7819 </ul>
7820
7821
7822
7823</div>
7824</div>
7825</div>
7826
7827
7828<div id="isgroupedwith-item" class="member">
7829<div class="member-link">
7830<a name="isgroupedwith-item" href="#isgroupedwith-item"><tt><b>isGroupedWith</b>(item)</tt></a>
7831</div>
7832<div class="member-description hidden">
7833<div class="member-text">
7834 <p>Checks whether the item is grouped with the specified item.</p>
7835
7836<ul><b>Parameters:</b>
7837
7838<li>
7839<tt>item:</tt>
7840<a href="../classes/Item.html"><tt>Item</tt></a>
7841
7842
7843</li>
7844
7845</ul>
7846
7847
7848 <ul><b>Returns:</b>
7849
7850 <li>
7851<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
7852</li>
7853
7854 </ul>
7855
7856
7857
7858</div>
7859</div>
7860</div>
7861
7862
7863<h3>Transform Functions</h3>
7864
7865<div id="scale-scale" class="member">
7866<div class="member-link">
7867<a name="scale-scale" href="#scale-scale"><tt><b>scale</b>(scale[, center])</tt></a>
7868</div>
7869<div class="member-description hidden">
7870<div class="member-text">
7871 <p>Scales the item by the given value from its center point, or optionally
7872from a supplied point.</p>
7873
7874<ul><b>Parameters:</b>
7875
7876<li>
7877<tt>scale:</tt>
7878<tt>Number</tt>
7879&mdash;&nbsp;the scale factor
7880
7881</li>
7882
7883<li>
7884<tt>center:</tt>
7885<a href="../classes/Point.html"><tt>Point</tt></a>
7886
7887&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
7888</li>
7889
7890</ul>
7891
7892
7893
7894 <p>
7895<b>Example</b> &mdash; Scaling an item from its center point:
7896</p>
7897
7898<div class="paperscript split">
7899
7900<div class="buttons">
7901<div class="button run">Run</div>
7902</div>
7903
7904<script type="text/paperscript" canvas="canvas-98">
7905// Create a circle shaped path at { x: 80, y: 50 }
7906// with a radius of 20:
7907var circle = new Path.Circle({
7908 center: [80, 50],
7909 radius: 20,
7910 fillColor: 'red'
7911});
7912
7913// Scale the path by 150% from its center point
7914circle.scale(1.5);
7915</script>
7916<div class="canvas"><canvas width="516" height="100" id="canvas-98"></canvas></div>
7917</div>
7918
7919
7920<p>
7921<b>Example</b> &mdash; Scaling an item from a specific point:
7922</p>
7923
7924<div class="paperscript split">
7925
7926<div class="buttons">
7927<div class="button run">Run</div>
7928</div>
7929
7930<script type="text/paperscript" canvas="canvas-99">
7931// Create a circle shaped path at { x: 80, y: 50 }
7932// with a radius of 20:
7933var circle = new Path.Circle({
7934 center: [80, 50],
7935 radius: 20,
7936 fillColor: 'red'
7937});
7938
7939// Scale the path 150% from its bottom left corner
7940circle.scale(1.5, circle.bounds.bottomLeft);
7941</script>
7942<div class="canvas"><canvas width="516" height="100" id="canvas-99"></canvas></div>
7943</div>
7944
7945
7946</div>
7947</div>
7948</div>
7949
7950
7951<div id="scale-hor-ver" class="member">
7952<div class="member-link">
7953<a name="scale-hor-ver" href="#scale-hor-ver"><tt><b>scale</b>(hor, ver[, center])</tt></a>
7954</div>
7955<div class="member-description hidden">
7956<div class="member-text">
7957 <p>Scales the item by the given values from its center point, or optionally
7958from a supplied point.</p>
7959
7960<ul><b>Parameters:</b>
7961
7962<li>
7963<tt>hor:</tt>
7964<tt>Number</tt>
7965&mdash;&nbsp;the horizontal scale factor
7966
7967</li>
7968
7969<li>
7970<tt>ver:</tt>
7971<tt>Number</tt>
7972&mdash;&nbsp;the vertical scale factor
7973
7974</li>
7975
7976<li>
7977<tt>center:</tt>
7978<a href="../classes/Point.html"><tt>Point</tt></a>
7979
7980&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
7981</li>
7982
7983</ul>
7984
7985
7986
7987 <p>
7988<b>Example</b> &mdash; Scaling an item horizontally by 300%:
7989</p>
7990
7991<div class="paperscript split">
7992
7993<div class="buttons">
7994<div class="button run">Run</div>
7995</div>
7996
7997<script type="text/paperscript" canvas="canvas-100">
7998// Create a circle shaped path at { x: 100, y: 50 }
7999// with a radius of 20:
8000var circle = new Path.Circle({
8001 center: [100, 50],
8002 radius: 20,
8003 fillColor: 'red'
8004});
8005
8006// Scale the path horizontally by 300%
8007circle.scale(3, 1);
8008</script>
8009<div class="canvas"><canvas width="516" height="100" id="canvas-100"></canvas></div>
8010</div>
8011
8012
8013</div>
8014</div>
8015</div>
8016
8017
8018<div id="translate-delta" class="member">
8019<div class="member-link">
8020<a name="translate-delta" href="#translate-delta"><tt><b>translate</b>(delta)</tt></a>
8021</div>
8022<div class="member-description hidden">
8023<div class="member-text">
8024 <p>Translates (moves) the item by the given offset point.</p>
8025
8026<ul><b>Parameters:</b>
8027
8028<li>
8029<tt>delta:</tt>
8030<a href="../classes/Point.html"><tt>Point</tt></a>
8031&mdash;&nbsp;the offset to translate the item by
8032
8033</li>
8034
8035</ul>
8036
8037
8038
8039
8040</div>
8041</div>
8042</div>
8043
8044
8045<div id="rotate-angle" class="member">
8046<div class="member-link">
8047<a name="rotate-angle" href="#rotate-angle"><tt><b>rotate</b>(angle[, center])</tt></a>
8048</div>
8049<div class="member-description hidden">
8050<div class="member-text">
8051 <p>Rotates the item by a given angle around the given point.</p>
8052<p>Angles are oriented clockwise and measured in degrees.</p>
8053
8054<ul><b>Parameters:</b>
8055
8056<li>
8057<tt>angle:</tt>
8058<tt>Number</tt>
8059&mdash;&nbsp;the rotation angle
8060
8061</li>
8062
8063<li>
8064<tt>center:</tt>
8065<a href="../classes/Point.html"><tt>Point</tt></a>
8066
8067&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
8068</li>
8069
8070</ul>
8071
8072
8073
8074 <p><b>See also:</b>
8075 <tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
8076 </p>
8077
8078 <p>
8079<b>Example</b> &mdash; Rotating an item:
8080</p>
8081
8082<div class="paperscript split">
8083
8084<div class="buttons">
8085<div class="button run">Run</div>
8086</div>
8087
8088<script type="text/paperscript" canvas="canvas-101">
8089// Create a rectangle shaped path with its top left
8090// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
8091var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
8092path.fillColor = 'black';
8093
8094// Rotate the path by 30 degrees:
8095path.rotate(30);
8096</script>
8097<div class="canvas"><canvas width="516" height="100" id="canvas-101"></canvas></div>
8098</div>
8099
8100
8101<p>
8102<b>Example</b> &mdash; Rotating an item around a specific point:
8103</p>
8104
8105<div class="paperscript split">
8106
8107<div class="buttons">
8108<div class="button run">Run</div>
8109</div>
8110
8111<script type="text/paperscript" canvas="canvas-102">
8112// Create a rectangle shaped path with its top left
8113// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
8114var topLeft = new Point(175, 50);
8115var size = new Size(100, 100);
8116var path = new Path.Rectangle(topLeft, size);
8117path.fillColor = 'black';
8118
8119// Draw a circle shaped path in the center of the view,
8120// to show the rotation point:
8121var circle = new Path.Circle({
8122 center: view.center,
8123 radius: 5,
8124 fillColor: 'white'
8125});
8126
8127// Each frame rotate the path 3 degrees around the center point
8128// of the view:
8129function onFrame(event) {
8130 path.rotate(3, view.center);
8131}
8132</script>
8133<div class="canvas"><canvas width="516" height="200" id="canvas-102"></canvas></div>
8134</div>
8135
8136
8137</div>
8138</div>
8139</div>
8140
8141
8142<div id="shear-point" class="member">
8143<div class="member-link">
8144<a name="shear-point" href="#shear-point"><tt><b>shear</b>(point[, center])</tt></a>
8145</div>
8146<div class="member-description hidden">
8147<div class="member-text">
8148 <p>Shears the item by the given value from its center point, or optionally
8149by a supplied point.</p>
8150
8151<ul><b>Parameters:</b>
8152
8153<li>
8154<tt>point:</tt>
8155<a href="../classes/Point.html"><tt>Point</tt></a>
8156
8157
8158</li>
8159
8160<li>
8161<tt>center:</tt>
8162<a href="../classes/Point.html"><tt>Point</tt></a>
8163
8164&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
8165</li>
8166
8167</ul>
8168
8169
8170
8171 <p><b>See also:</b>
8172 <tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
8173 </p>
8174
8175
8176</div>
8177</div>
8178</div>
8179
8180
8181<div id="shear-hor-ver" class="member">
8182<div class="member-link">
8183<a name="shear-hor-ver" href="#shear-hor-ver"><tt><b>shear</b>(hor, ver[, center])</tt></a>
8184</div>
8185<div class="member-description hidden">
8186<div class="member-text">
8187 <p>Shears the item by the given values from its center point, or optionally
8188by a supplied point.</p>
8189
8190<ul><b>Parameters:</b>
8191
8192<li>
8193<tt>hor:</tt>
8194<tt>Number</tt>
8195&mdash;&nbsp;the horizontal shear factor.
8196
8197</li>
8198
8199<li>
8200<tt>ver:</tt>
8201<tt>Number</tt>
8202&mdash;&nbsp;the vertical shear factor.
8203
8204</li>
8205
8206<li>
8207<tt>center:</tt>
8208<a href="../classes/Point.html"><tt>Point</tt></a>
8209
8210&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
8211</li>
8212
8213</ul>
8214
8215
8216
8217 <p><b>See also:</b>
8218 <tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
8219 </p>
8220
8221
8222</div>
8223</div>
8224</div>
8225
8226
8227<div id="transform-matrix" class="member">
8228<div class="member-link">
8229<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
8230</div>
8231<div class="member-description hidden">
8232<div class="member-text">
8233 <p>Transform the item.</p>
8234
8235<ul><b>Parameters:</b>
8236
8237<li>
8238<tt>matrix:</tt>
8239<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
8240&mdash;&nbsp;the matrix by which the item shall be transformed.
8241
8242</li>
8243
8244</ul>
8245
8246
8247
8248
8249</div>
8250</div>
8251</div>
8252
8253
8254<div id="globaltolocal-point" class="member">
8255<div class="member-link">
8256<a name="globaltolocal-point" href="#globaltolocal-point"><tt><b>globalToLocal</b>(point)</tt></a>
8257</div>
8258<div class="member-description hidden">
8259<div class="member-text">
8260 <p>Converts the specified point from global project coordinates to local
8261coordinates in relation to the the item's own coordinate space.</p>
8262
8263<ul><b>Parameters:</b>
8264
8265<li>
8266<tt>point:</tt>
8267<a href="../classes/Point.html"><tt>Point</tt></a>
8268&mdash;&nbsp;the point to be transformed
8269
8270</li>
8271
8272</ul>
8273
8274
8275 <ul><b>Returns:</b>
8276
8277 <li>
8278<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the transformed point as a new instance
8279</li>
8280
8281 </ul>
8282
8283
8284
8285</div>
8286</div>
8287</div>
8288
8289
8290<div id="localtoglobal-point" class="member">
8291<div class="member-link">
8292<a name="localtoglobal-point" href="#localtoglobal-point"><tt><b>localToGlobal</b>(point)</tt></a>
8293</div>
8294<div class="member-description hidden">
8295<div class="member-text">
8296 <p>Converts the specified point from local coordinates to global coordinates
8297in relation to the the project coordinate space.</p>
8298
8299<ul><b>Parameters:</b>
8300
8301<li>
8302<tt>point:</tt>
8303<a href="../classes/Point.html"><tt>Point</tt></a>
8304&mdash;&nbsp;the point to be transformed
8305
8306</li>
8307
8308</ul>
8309
8310
8311 <ul><b>Returns:</b>
8312
8313 <li>
8314<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the transformed point as a new instance
8315</li>
8316
8317 </ul>
8318
8319
8320
8321</div>
8322</div>
8323</div>
8324
8325
8326<div id="fitbounds-rectangle" class="member">
8327<div class="member-link">
8328<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
8329</div>
8330<div class="member-description hidden">
8331<div class="member-text">
8332 <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
8333rectangle, without changing its aspect ratio.</p>
8334
8335<ul><b>Parameters:</b>
8336
8337<li>
8338<tt>rectangle:</tt>
8339<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
8340
8341
8342</li>
8343
8344<li>
8345<tt>fill:</tt>
8346<tt>Boolean</tt>
8347
8348&mdash;&nbsp;optional, default: <tt>false</tt>
8349</li>
8350
8351</ul>
8352
8353
8354
8355 <p>
8356<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
8357</p>
8358
8359<div class="paperscript split">
8360
8361<div class="buttons">
8362<div class="button run">Run</div>
8363</div>
8364
8365<script type="text/paperscript" canvas="canvas-103">
8366// Create a rectangle shaped path with its top left corner
8367// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
8368var path = new Path.Rectangle({
8369 point: [80, 25],
8370 size: [75, 50],
8371 fillColor: 'black'
8372});
8373
8374// Create a circle shaped path with its center at {x: 80, y: 50}
8375// and a radius of 30.
8376var circlePath = new Path.Circle({
8377 center: [80, 50],
8378 radius: 30,
8379 fillColor: 'red'
8380});
8381
8382// Fit the circlePath to the bounding rectangle of
8383// the rectangular path:
8384circlePath.fitBounds(path.bounds);
8385</script>
8386<div class="canvas"><canvas width="516" height="100" id="canvas-103"></canvas></div>
8387</div>
8388
8389
8390<p>
8391<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
8392</p>
8393
8394<div class="paperscript split">
8395
8396<div class="buttons">
8397<div class="button run">Run</div>
8398</div>
8399
8400<script type="text/paperscript" canvas="canvas-104">
8401// Create a rectangle shaped path with its top left corner
8402// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
8403var path = new Path.Rectangle({
8404 point: [80, 25],
8405 size: [75, 50],
8406 fillColor: 'black'
8407});
8408
8409// Create a circle shaped path with its center at {x: 80, y: 50}
8410// and a radius of 30.
8411var circlePath = new Path.Circle({
8412 center: [80, 50],
8413 radius: 30,
8414 fillColor: 'red'
8415});
8416
8417// Fit the circlePath to the bounding rectangle of
8418// the rectangular path:
8419circlePath.fitBounds(path.bounds, true);
8420</script>
8421<div class="canvas"><canvas width="516" height="100" id="canvas-104"></canvas></div>
8422</div>
8423
8424
8425<p>
8426<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
8427</p>
8428
8429<div class="paperscript split">
8430
8431<div class="buttons">
8432<div class="button run">Run</div>
8433</div>
8434
8435<script type="text/paperscript" canvas="canvas-105">
8436var path = new Path.Circle({
8437 center: [80, 50],
8438 radius: 30,
8439 fillColor: 'red'
8440});
8441
8442// Fit the path to the bounding rectangle of the view:
8443path.fitBounds(view.bounds);
8444</script>
8445<div class="canvas"><canvas width="516" height="200" id="canvas-105"></canvas></div>
8446</div>
8447
8448
8449</div>
8450</div>
8451</div>
8452
8453
8454<h3>Event Handling</h3>
8455
8456<div id="attach-type-function" class="member">
8457<div class="member-link">
8458<a name="attach-type-function" href="#attach-type-function"><tt><b>attach</b>(type, function)</tt></a>
8459</div>
8460<div class="member-description hidden">
8461<div class="member-text">
8462 <p>Attaches an event handler to the item.</p>
8463
8464<ul><b>Parameters:</b>
8465
8466<li>
8467<tt>type:</tt>
8468<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
8469&mdash;&nbsp;the event
8470type
8471
8472</li>
8473
8474<li>
8475<tt>function:</tt>
8476<tt>Function</tt>
8477&mdash;&nbsp;The function to be called when the event
8478occurs
8479
8480</li>
8481
8482</ul>
8483
8484
8485
8486 <p>
8487<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.
8488</p>
8489
8490<div class="paperscript split">
8491
8492<div class="buttons">
8493<div class="button run">Run</div>
8494</div>
8495
8496<script type="text/paperscript" canvas="canvas-106">
8497// Create a circle shaped path at the center of the view:
8498var path = new Path.Circle({
8499 center: view.center,
8500 radius: 25,
8501 fillColor: 'black'
8502});
8503
8504// When the mouse enters the item, set its fill color to red:
8505path.on('mouseenter', function() {
8506 this.fillColor = 'red';
8507});
8508
8509// When the mouse leaves the item, set its fill color to black:
8510path.on('mouseleave', function() {
8511 this.fillColor = 'black';
8512});
8513</script>
8514<div class="canvas"><canvas width="516" height="100" id="canvas-106"></canvas></div>
8515</div>
8516
8517
8518</div>
8519</div>
8520</div>
8521
8522
8523<div id="attach-object" class="member">
8524<div class="member-link">
8525<a name="attach-object" href="#attach-object"><tt><b>attach</b>(object)</tt></a>
8526</div>
8527<div class="member-description hidden">
8528<div class="member-text">
8529 <p>Attaches one or more event handlers to the item.</p>
8530
8531<ul><b>Parameters:</b>
8532
8533<li>
8534<tt>object:</tt>
8535<tt>Object</tt>
8536&mdash;&nbsp;an object literal containing one or more of the
8537following properties: <tt>mousedown, mouseup, mousedrag, click,
8538doubleclick, mousemove, mouseenter, mouseleave</tt>.
8539
8540</li>
8541
8542</ul>
8543
8544
8545
8546 <p>
8547<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.
8548</p>
8549
8550<div class="paperscript split">
8551
8552<div class="buttons">
8553<div class="button run">Run</div>
8554</div>
8555
8556<script type="text/paperscript" canvas="canvas-107">
8557// Create a circle shaped path at the center of the view:
8558var path = new Path.Circle({
8559 center: view.center,
8560 radius: 25
8561});
8562path.fillColor = 'black';
8563
8564// When the mouse enters the item, set its fill color to red:
8565path.on({
8566 mouseenter: function(event) {
8567 this.fillColor = 'red';
8568 },
8569 mouseleave: function(event) {
8570 this.fillColor = 'black';
8571 }
8572});
8573</script>
8574<div class="canvas"><canvas width="516" height="100" id="canvas-107"></canvas></div>
8575</div>
8576
8577
8578<p>
8579<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.
8580</p>
8581
8582<div class="paperscript split">
8583
8584<div class="buttons">
8585<div class="button run">Run</div>
8586</div>
8587
8588<script type="text/paperscript" canvas="canvas-108">
8589var pathHandlers = {
8590 mouseenter: function(event) {
8591 this.fillColor = 'red';
8592 },
8593 mouseleave: function(event) {
8594 this.fillColor = 'black';
8595 }
8596}
8597
8598// When the mouse is pressed:
8599function onMouseDown(event) {
8600 // Create a circle shaped path at the position of the mouse:
8601 var path = new Path.Circle({
8602 center: event.point,
8603 radius: 25,
8604 fillColor: 'black'
8605 });
8606
8607 // Attach the handers inside the object literal to the path:
8608 path.on(pathHandlers);
8609}
8610</script>
8611<div class="canvas"><canvas width="516" height="100" id="canvas-108"></canvas></div>
8612</div>
8613
8614
8615</div>
8616</div>
8617</div>
8618
8619
8620<div id="detach-type-function" class="member">
8621<div class="member-link">
8622<a name="detach-type-function" href="#detach-type-function"><tt><b>detach</b>(type, function)</tt></a>
8623</div>
8624<div class="member-description hidden">
8625<div class="member-text">
8626 <p>Detach an event handler from the item.</p>
8627
8628<ul><b>Parameters:</b>
8629
8630<li>
8631<tt>type:</tt>
8632<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
8633&mdash;&nbsp;the event
8634type
8635
8636</li>
8637
8638<li>
8639<tt>function:</tt>
8640<tt>Function</tt>
8641&mdash;&nbsp;The function to be detached
8642
8643</li>
8644
8645</ul>
8646
8647
8648
8649
8650</div>
8651</div>
8652</div>
8653
8654
8655<div id="detach-object" class="member">
8656<div class="member-link">
8657<a name="detach-object" href="#detach-object"><tt><b>detach</b>(object)</tt></a>
8658</div>
8659<div class="member-description hidden">
8660<div class="member-text">
8661 <p>Detach one or more event handlers to the item.</p>
8662
8663<ul><b>Parameters:</b>
8664
8665<li>
8666<tt>object:</tt>
8667<tt>Object</tt>
8668&mdash;&nbsp;an object literal containing one or more of the
8669following properties: <tt>mousedown, mouseup, mousedrag, click,
8670doubleclick, mousemove, mouseenter, mouseleave</tt>
8671
8672</li>
8673
8674</ul>
8675
8676
8677
8678
8679</div>
8680</div>
8681</div>
8682
8683
8684<div id="fire-type-event" class="member">
8685<div class="member-link">
8686<a name="fire-type-event" href="#fire-type-event"><tt><b>fire</b>(type, event)</tt></a>
8687</div>
8688<div class="member-description hidden">
8689<div class="member-text">
8690 <p>Fire an event on the item.</p>
8691
8692<ul><b>Parameters:</b>
8693
8694<li>
8695<tt>type:</tt>
8696<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
8697&mdash;&nbsp;the event
8698type
8699
8700</li>
8701
8702<li>
8703<tt>event:</tt>
8704<tt>Object</tt>
8705&mdash;&nbsp;an object literal containing properties describing
8706the event.
8707
8708</li>
8709
8710</ul>
8711
8712
8713
8714
8715</div>
8716</div>
8717</div>
8718
8719
8720<div id="responds-type" class="member">
8721<div class="member-link">
8722<a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
8723</div>
8724<div class="member-description hidden">
8725<div class="member-text">
8726 <p>Check if the item has one or more event handlers of the specified type.</p>
8727
8728<ul><b>Parameters:</b>
8729
8730<li>
8731<tt>type:</tt>
8732<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
8733&mdash;&nbsp;the event
8734type
8735
8736</li>
8737
8738</ul>
8739
8740
8741 <ul><b>Returns:</b>
8742
8743 <li>
8744<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has one or more event handlers of
8745the specified type, <tt>false</tt> otherwise
8746</li>
8747
8748 </ul>
8749
8750
8751
8752</div>
8753</div>
8754</div>
8755
8756
8757<h3>Remove On Event</h3>
8758
8759<div id="removeon-object" class="member">
8760<div class="member-link">
8761<a name="removeon-object" href="#removeon-object"><tt><b>removeOn</b>(object)</tt></a>
8762</div>
8763<div class="member-description hidden">
8764<div class="member-text">
8765 <p>Removes the item when the events specified in the passed object literal
8766occur.</p>
8767<p>The object literal can contain the following values:</p>
8768<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
8769fired: <tt>object.move = true</tt></p>
8770<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
8771fired: <tt>object.drag = true</tt></p>
8772<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
8773fired: <tt>object.down = true</tt></p>
8774<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
8775fired: <tt>object.up = true</tt></p>
8776
8777<ul><b>Parameters:</b>
8778
8779<li>
8780<tt>object:</tt>
8781<tt>Object</tt>
8782
8783
8784</li>
8785
8786</ul>
8787
8788
8789
8790 <p>
8791<b>Example</b> &mdash; Click and drag below:
8792</p>
8793
8794<div class="paperscript split">
8795
8796<div class="buttons">
8797<div class="button run">Run</div>
8798</div>
8799
8800<script type="text/paperscript" canvas="canvas-109">
8801function onMouseDrag(event) {
8802 // Create a circle shaped path at the mouse position,
8803 // with a radius of 10:
8804 var path = new Path.Circle({
8805 center: event.point,
8806 radius: 10,
8807 fillColor: 'black'
8808 });
8809
8810 // Remove the path on the next onMouseDrag or onMouseDown event:
8811 path.removeOn({
8812 drag: true,
8813 down: true
8814 });
8815}
8816</script>
8817<div class="canvas"><canvas width="516" height="200" id="canvas-109"></canvas></div>
8818</div>
8819
8820
8821</div>
8822</div>
8823</div>
8824
8825
8826<div id="removeonmove" class="member">
8827<div class="member-link">
8828<a name="removeonmove" href="#removeonmove"><tt><b>removeOnMove</b>()</tt></a>
8829</div>
8830<div class="member-description hidden">
8831<div class="member-text">
8832 <p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
8833
8834
8835
8836 <p>
8837<b>Example</b> &mdash; Move your mouse below:
8838</p>
8839
8840<div class="paperscript split">
8841
8842<div class="buttons">
8843<div class="button run">Run</div>
8844</div>
8845
8846<script type="text/paperscript" canvas="canvas-110">
8847function onMouseMove(event) {
8848 // Create a circle shaped path at the mouse position,
8849 // with a radius of 10:
8850 var path = new Path.Circle({
8851 center: event.point,
8852 radius: 10,
8853 fillColor: 'black'
8854 });
8855
8856 // On the next move event, automatically remove the path:
8857 path.removeOnMove();
8858}
8859</script>
8860<div class="canvas"><canvas width="516" height="200" id="canvas-110"></canvas></div>
8861</div>
8862
8863
8864</div>
8865</div>
8866</div>
8867
8868
8869<div id="removeondown" class="member">
8870<div class="member-link">
8871<a name="removeondown" href="#removeondown"><tt><b>removeOnDown</b>()</tt></a>
8872</div>
8873<div class="member-description hidden">
8874<div class="member-text">
8875 <p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
8876
8877
8878
8879 <p>
8880<b>Example</b> &mdash; Click a few times below:
8881</p>
8882
8883<div class="paperscript split">
8884
8885<div class="buttons">
8886<div class="button run">Run</div>
8887</div>
8888
8889<script type="text/paperscript" canvas="canvas-111">
8890function onMouseDown(event) {
8891 // Create a circle shaped path at the mouse position,
8892 // with a radius of 10:
8893 var path = new Path.Circle({
8894 center: event.point,
8895 radius: 10,
8896 fillColor: 'black'
8897 });
8898
8899 // Remove the path, next time the mouse is pressed:
8900 path.removeOnDown();
8901}
8902</script>
8903<div class="canvas"><canvas width="516" height="200" id="canvas-111"></canvas></div>
8904</div>
8905
8906
8907</div>
8908</div>
8909</div>
8910
8911
8912<div id="removeondrag" class="member">
8913<div class="member-link">
8914<a name="removeondrag" href="#removeondrag"><tt><b>removeOnDrag</b>()</tt></a>
8915</div>
8916<div class="member-description hidden">
8917<div class="member-text">
8918 <p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
8919
8920
8921
8922 <p>
8923<b>Example</b> &mdash; Click and drag below:
8924</p>
8925
8926<div class="paperscript split">
8927
8928<div class="buttons">
8929<div class="button run">Run</div>
8930</div>
8931
8932<script type="text/paperscript" canvas="canvas-112">
8933function onMouseDrag(event) {
8934 // Create a circle shaped path at the mouse position,
8935 // with a radius of 10:
8936 var path = new Path.Circle({
8937 center: event.point,
8938 radius: 10,
8939 fillColor: 'black'
8940 });
8941
8942 // On the next drag event, automatically remove the path:
8943 path.removeOnDrag();
8944}
8945</script>
8946<div class="canvas"><canvas width="516" height="200" id="canvas-112"></canvas></div>
8947</div>
8948
8949
8950</div>
8951</div>
8952</div>
8953
8954
8955<div id="removeonup" class="member">
8956<div class="member-link">
8957<a name="removeonup" href="#removeonup"><tt><b>removeOnUp</b>()</tt></a>
8958</div>
8959<div class="member-description hidden">
8960<div class="member-text">
8961 <p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
8962
8963
8964
8965 <p>
8966<b>Example</b> &mdash; Click a few times below:
8967</p>
8968
8969<div class="paperscript split">
8970
8971<div class="buttons">
8972<div class="button run">Run</div>
8973</div>
8974
8975<script type="text/paperscript" canvas="canvas-113">
8976function onMouseDown(event) {
8977 // Create a circle shaped path at the mouse position,
8978 // with a radius of 10:
8979 var path = new Path.Circle({
8980 center: event.point,
8981 radius: 10,
8982 fillColor: 'black'
8983 });
8984
8985 // Remove the path, when the mouse is released:
8986 path.removeOnUp();
8987}
8988</script>
8989<div class="canvas"><canvas width="516" height="200" id="canvas-113"></canvas></div>
8990</div>
8991
8992
8993</div>
8994</div>
8995</div>
8996
8997</div>
8998
8999
9000
9001<!-- =========================== copyright notice ========================= -->
9002<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>
9003<div class="content-end"></div>
9004
9005</body>
Note: See TracBrowser for help on using the repository browser.