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