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