source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/Rectangle.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: 24.8 KB
RevLine 
[28914]1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Rectangle</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>Rectangle</h1>
16
17<p>A Rectangle specifies an area that is enclosed by it's top-left
18point (x, y), its width, and its height. It should not be confused with a
19rectangular path, it is not an item.</p>
20
21</div>
22
23<!-- ============================== constructors ========================= -->
24<div class="reference-members"><h2>Constructors</h2>
25
26
27<div id="rectangle-point-size" class="member">
28<div class="member-link">
29<a name="rectangle-point-size" href="#rectangle-point-size"><tt><b>Rectangle</b>(point, size)</tt></a>
30</div>
31<div class="member-description hidden">
32<div class="member-text">
33<p>Creates a Rectangle object.</p>
34
35<ul><b>Parameters:</b>
36
37<li>
38<tt>point:</tt>
39<a href="../classes/Point.html"><tt>Point</tt></a>
40&mdash;&nbsp;the top-left point of the rectangle
41
42</li>
43
44<li>
45<tt>size:</tt>
46<a href="../classes/Size.html"><tt>Size</tt></a>
47&mdash;&nbsp;the size of the rectangle
48
49</li>
50
51</ul>
52
53
54
55
56</div>
57</div>
58</div>
59
60
61<div id="rectangle-object" class="member">
62<div class="member-link">
63<a name="rectangle-object" href="#rectangle-object"><tt><b>Rectangle</b>(object)</tt></a>
64</div>
65<div class="member-description hidden">
66<div class="member-text">
67<p>Creates a Rectangle object.</p>
68
69<ul><b>Parameters:</b>
70
71<li>
72<tt>object:</tt>
73<tt>Object</tt>
74&mdash;&nbsp;an object containing properties to be set on the
75 rectangle.
76
77</li>
78
79</ul>
80
81
82<p>
83<b>Example</b> &mdash; Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
84</p>
85
86
87<pre class="code">var rectangle = new Rectangle({
88 point: [20, 20],
89 size: [60, 60]
90});</pre>
91
92<p>
93<b>Example</b> &mdash; Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
94</p>
95
96
97<pre class="code">var rectangle = new Rectangle({
98 from: [20, 20],
99 to: [80, 80]
100});</pre>
101
102
103</div>
104</div>
105</div>
106
107
108<div id="rectangle-x-y-width-height" class="member">
109<div class="member-link">
110<a name="rectangle-x-y-width-height" href="#rectangle-x-y-width-height"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
111</div>
112<div class="member-description hidden">
113<div class="member-text">
114<p>Creates a rectangle object.</p>
115
116<ul><b>Parameters:</b>
117
118<li>
119<tt>x:</tt>
120<tt>Number</tt>
121&mdash;&nbsp;the left coordinate
122
123</li>
124
125<li>
126<tt>y:</tt>
127<tt>Number</tt>
128&mdash;&nbsp;the top coordinate
129
130</li>
131
132<li>
133<tt>width:</tt>
134<tt>Number</tt>
135
136
137</li>
138
139<li>
140<tt>height:</tt>
141<tt>Number</tt>
142
143
144</li>
145
146</ul>
147
148
149
150
151</div>
152</div>
153</div>
154
155
156<div id="rectangle-from-to" class="member">
157<div class="member-link">
158<a name="rectangle-from-to" href="#rectangle-from-to"><tt><b>Rectangle</b>(from, to)</tt></a>
159</div>
160<div class="member-description hidden">
161<div class="member-text">
162<p>Creates a rectangle object from the passed points. These do not
163necessarily need to be the top left and bottom right corners, the
164constructor figures out how to fit a rectangle between them.</p>
165
166<ul><b>Parameters:</b>
167
168<li>
169<tt>from:</tt>
170<a href="../classes/Point.html"><tt>Point</tt></a>
171&mdash;&nbsp;The first point defining the rectangle
172
173</li>
174
175<li>
176<tt>to:</tt>
177<a href="../classes/Point.html"><tt>Point</tt></a>
178&mdash;&nbsp;The second point defining the rectangle
179
180</li>
181
182</ul>
183
184
185
186
187</div>
188</div>
189</div>
190
191
192<div id="rectangle-rt" class="member">
193<div class="member-link">
194<a name="rectangle-rt" href="#rectangle-rt"><tt><b>Rectangle</b>(rt)</tt></a>
195</div>
196<div class="member-description hidden">
197<div class="member-text">
198<p>Creates a new rectangle object from the passed rectangle object.</p>
199
200<ul><b>Parameters:</b>
201
202<li>
203<tt>rt:</tt>
204<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
205
206
207</li>
208
209</ul>
210
211
212
213
214</div>
215</div>
216</div>
217
218</div>
219
220
221
222
223
224 <div class="reference-members"><h2>Properties</h2>
225
226
227<div id="x" class="member">
228<div class="member-link">
229<a name="x" href="#x"><tt><b>x</b></tt></a>
230</div>
231<div class="member-description hidden">
232
233<div class="member-text">
234 <p>The x position of the rectangle.</p>
235
236
237 <ul><b>Type:</b>
238 <li>
239 <tt>Number</tt>
240 </li>
241 </ul>
242
243
244</div>
245
246</div>
247</div>
248
249
250<div id="y" class="member">
251<div class="member-link">
252<a name="y" href="#y"><tt><b>y</b></tt></a>
253</div>
254<div class="member-description hidden">
255
256<div class="member-text">
257 <p>The y position of the rectangle.</p>
258
259
260 <ul><b>Type:</b>
261 <li>
262 <tt>Number</tt>
263 </li>
264 </ul>
265
266
267</div>
268
269</div>
270</div>
271
272
273<div id="width" class="member">
274<div class="member-link">
275<a name="width" href="#width"><tt><b>width</b></tt></a>
276</div>
277<div class="member-description hidden">
278
279<div class="member-text">
280 <p>The width of the rectangle.</p>
281
282
283 <ul><b>Type:</b>
284 <li>
285 <tt>Number</tt>
286 </li>
287 </ul>
288
289
290</div>
291
292</div>
293</div>
294
295
296<div id="height" class="member">
297<div class="member-link">
298<a name="height" href="#height"><tt><b>height</b></tt></a>
299</div>
300<div class="member-description hidden">
301
302<div class="member-text">
303 <p>The height of the rectangle.</p>
304
305
306 <ul><b>Type:</b>
307 <li>
308 <tt>Number</tt>
309 </li>
310 </ul>
311
312
313</div>
314
315</div>
316</div>
317
318
319<div id="point" class="member">
320<div class="member-link">
321<a name="point" href="#point"><tt><b>point</b></tt></a>
322</div>
323<div class="member-description hidden">
324
325<div class="member-text">
326 <p>The top-left point of the rectangle</p>
327
328
329 <ul><b>Type:</b>
330 <li>
331 <a href="../classes/Point.html"><tt>Point</tt></a>
332 </li>
333 </ul>
334
335
336</div>
337
338</div>
339</div>
340
341
342<div id="size" class="member">
343<div class="member-link">
344<a name="size" href="#size"><tt><b>size</b></tt></a>
345</div>
346<div class="member-description hidden">
347
348<div class="member-text">
349 <p>The size of the rectangle</p>
350
351
352 <ul><b>Type:</b>
353 <li>
354 <a href="../classes/Size.html"><tt>Size</tt></a>
355 </li>
356 </ul>
357
358
359</div>
360
361</div>
362</div>
363
364
365 <h3>Side Positions</h3>
366
367<div id="left" class="member">
368<div class="member-link">
369<a name="left" href="#left"><tt><b>left</b></tt></a>
370</div>
371<div class="member-description hidden">
372
373<div class="member-text">
374 <p>The position of the left hand side of the rectangle. Note that this
375doesn't move the whole rectangle; the right hand side stays where it was.</p>
376
377
378 <ul><b>Type:</b>
379 <li>
380 <tt>Number</tt>
381 </li>
382 </ul>
383
384
385</div>
386
387</div>
388</div>
389
390
391<div id="top" class="member">
392<div class="member-link">
393<a name="top" href="#top"><tt><b>top</b></tt></a>
394</div>
395<div class="member-description hidden">
396
397<div class="member-text">
398 <p>The top coordinate of the rectangle. Note that this doesn't move the
399whole rectangle: the bottom won't move.</p>
400
401
402 <ul><b>Type:</b>
403 <li>
404 <tt>Number</tt>
405 </li>
406 </ul>
407
408
409</div>
410
411</div>
412</div>
413
414
415<div id="right" class="member">
416<div class="member-link">
417<a name="right" href="#right"><tt><b>right</b></tt></a>
418</div>
419<div class="member-description hidden">
420
421<div class="member-text">
422 <p>The position of the right hand side of the rectangle. Note that this
423doesn't move the whole rectangle; the left hand side stays where it was.</p>
424
425
426 <ul><b>Type:</b>
427 <li>
428 <tt>Number</tt>
429 </li>
430 </ul>
431
432
433</div>
434
435</div>
436</div>
437
438
439<div id="bottom" class="member">
440<div class="member-link">
441<a name="bottom" href="#bottom"><tt><b>bottom</b></tt></a>
442</div>
443<div class="member-description hidden">
444
445<div class="member-text">
446 <p>The bottom coordinate of the rectangle. Note that this doesn't move the
447whole rectangle: the top won't move.</p>
448
449
450 <ul><b>Type:</b>
451 <li>
452 <tt>Number</tt>
453 </li>
454 </ul>
455
456
457</div>
458
459</div>
460</div>
461
462
463 <h3>Corner and Center Point Positions</h3>
464
465<div id="center" class="member">
466<div class="member-link">
467<a name="center" href="#center"><tt><b>center</b></tt></a>
468</div>
469<div class="member-description hidden">
470
471<div class="member-text">
472 <p>The center point of the rectangle.</p>
473
474
475 <ul><b>Type:</b>
476 <li>
477 <a href="../classes/Point.html"><tt>Point</tt></a>
478 </li>
479 </ul>
480
481
482</div>
483
484</div>
485</div>
486
487
488<div id="topleft" class="member">
489<div class="member-link">
490<a name="topleft" href="#topleft"><tt><b>topLeft</b></tt></a>
491</div>
492<div class="member-description hidden">
493
494<div class="member-text">
495 <p>The top-left point of the rectangle.</p>
496
497
498 <ul><b>Type:</b>
499 <li>
500 <a href="../classes/Point.html"><tt>Point</tt></a>
501 </li>
502 </ul>
503
504
505</div>
506
507</div>
508</div>
509
510
511<div id="topright" class="member">
512<div class="member-link">
513<a name="topright" href="#topright"><tt><b>topRight</b></tt></a>
514</div>
515<div class="member-description hidden">
516
517<div class="member-text">
518 <p>The top-right point of the rectangle.</p>
519
520
521 <ul><b>Type:</b>
522 <li>
523 <a href="../classes/Point.html"><tt>Point</tt></a>
524 </li>
525 </ul>
526
527
528</div>
529
530</div>
531</div>
532
533
534<div id="bottomleft" class="member">
535<div class="member-link">
536<a name="bottomleft" href="#bottomleft"><tt><b>bottomLeft</b></tt></a>
537</div>
538<div class="member-description hidden">
539
540<div class="member-text">
541 <p>The bottom-left point of the rectangle.</p>
542
543
544 <ul><b>Type:</b>
545 <li>
546 <a href="../classes/Point.html"><tt>Point</tt></a>
547 </li>
548 </ul>
549
550
551</div>
552
553</div>
554</div>
555
556
557<div id="bottomright" class="member">
558<div class="member-link">
559<a name="bottomright" href="#bottomright"><tt><b>bottomRight</b></tt></a>
560</div>
561<div class="member-description hidden">
562
563<div class="member-text">
564 <p>The bottom-right point of the rectangle.</p>
565
566
567 <ul><b>Type:</b>
568 <li>
569 <a href="../classes/Point.html"><tt>Point</tt></a>
570 </li>
571 </ul>
572
573
574</div>
575
576</div>
577</div>
578
579
580<div id="leftcenter" class="member">
581<div class="member-link">
582<a name="leftcenter" href="#leftcenter"><tt><b>leftCenter</b></tt></a>
583</div>
584<div class="member-description hidden">
585
586<div class="member-text">
587 <p>The left-center point of the rectangle.</p>
588
589
590 <ul><b>Type:</b>
591 <li>
592 <a href="../classes/Point.html"><tt>Point</tt></a>
593 </li>
594 </ul>
595
596
597</div>
598
599</div>
600</div>
601
602
603<div id="topcenter" class="member">
604<div class="member-link">
605<a name="topcenter" href="#topcenter"><tt><b>topCenter</b></tt></a>
606</div>
607<div class="member-description hidden">
608
609<div class="member-text">
610 <p>The top-center point of the rectangle.</p>
611
612
613 <ul><b>Type:</b>
614 <li>
615 <a href="../classes/Point.html"><tt>Point</tt></a>
616 </li>
617 </ul>
618
619
620</div>
621
622</div>
623</div>
624
625
626<div id="rightcenter" class="member">
627<div class="member-link">
628<a name="rightcenter" href="#rightcenter"><tt><b>rightCenter</b></tt></a>
629</div>
630<div class="member-description hidden">
631
632<div class="member-text">
633 <p>The right-center point of the rectangle.</p>
634
635
636 <ul><b>Type:</b>
637 <li>
638 <a href="../classes/Point.html"><tt>Point</tt></a>
639 </li>
640 </ul>
641
642
643</div>
644
645</div>
646</div>
647
648
649<div id="bottomcenter" class="member">
650<div class="member-link">
651<a name="bottomcenter" href="#bottomcenter"><tt><b>bottomCenter</b></tt></a>
652</div>
653<div class="member-description hidden">
654
655<div class="member-text">
656 <p>The bottom-center point of the rectangle.</p>
657
658
659 <ul><b>Type:</b>
660 <li>
661 <a href="../classes/Point.html"><tt>Point</tt></a>
662 </li>
663 </ul>
664
665
666</div>
667
668</div>
669</div>
670
671
672 <h3>Item Bounds</h3>
673
674<div id="selected" class="member">
675<div class="member-link">
676<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
677</div>
678<div class="member-description hidden">
679
680<div class="member-text">
681 <p>Specifies whether an item's bounds are selected and will also
682mark the item as selected.</p>
683<p>Paper.js draws the visual bounds of selected items on top of your
684project. This can be useful for debugging.</p>
685
686
687 <ul><b>Type:</b>
688 <li>
689 <tt>Boolean</tt>
690 </li>
691 </ul>
692
693
694</div>
695
696</div>
697</div>
698
699 </div>
700
701
702
703<!-- ============================== methods ================================ -->
704 <div class="reference-members"><h2>Methods</h2>
705
706
707<div id="clone" class="member">
708<div class="member-link">
709<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
710</div>
711<div class="member-description hidden">
712<div class="member-text">
713 <p>Returns a copy of the rectangle.</p>
714
715
716
717
718</div>
719</div>
720</div>
721
722
723<div id="equals-rect" class="member">
724<div class="member-link">
725<a name="equals-rect" href="#equals-rect"><tt><b>equals</b>(rect)</tt></a>
726</div>
727<div class="member-description hidden">
728<div class="member-text">
729 <p>Checks whether the coordinates and size of the rectangle are equal to
730that of the supplied rectangle.</p>
731
732<ul><b>Parameters:</b>
733
734<li>
735<tt>rect:</tt>
736<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
737
738
739</li>
740
741</ul>
742
743
744 <ul><b>Returns:</b>
745
746 <li>
747<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangles are equal, <tt>false</tt> otherwise
748</li>
749
750 </ul>
751
752
753
754</div>
755</div>
756</div>
757
758
759<div id="tostring" class="member">
760<div class="member-link">
761<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
762</div>
763<div class="member-description hidden">
764<div class="member-text">
765
766
767
768 <ul><b>Returns:</b>
769
770 <li>
771<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of this rectangle
772</li>
773
774 </ul>
775
776
777
778</div>
779</div>
780</div>
781
782
783<div id="isempty" class="member">
784<div class="member-link">
785<a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
786</div>
787<div class="member-description hidden">
788<div class="member-text">
789
790
791
792 <ul><b>Returns:</b>
793
794 <li>
795<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the rectangle is empty, <tt>false</tt> otherwise
796</li>
797
798 </ul>
799
800
801
802</div>
803</div>
804</div>
805
806
807<h3>Geometric Tests</h3>
808
809<div id="contains-point" class="member">
810<div class="member-link">
811<a name="contains-point" href="#contains-point"><tt><b>contains</b>(point)</tt></a>
812</div>
813<div class="member-description hidden">
814<div class="member-text">
815 <p>Tests if the specified point is inside the boundary of the rectangle.</p>
816
817<ul><b>Parameters:</b>
818
819<li>
820<tt>point:</tt>
821<a href="../classes/Point.html"><tt>Point</tt></a>
822&mdash;&nbsp;the specified point
823
824</li>
825
826</ul>
827
828
829 <ul><b>Returns:</b>
830
831 <li>
832<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle's boundary, <tt>false</tt> otherwise
833</li>
834
835 </ul>
836
837
838 <p>
839<b>Example</b> &mdash; Checking whether the mouse position falls within the bounding rectangle of an item:
840</p>
841
842<div class="paperscript split">
843
844<div class="buttons">
845<div class="button run">Run</div>
846</div>
847
848<script type="text/paperscript" canvas="canvas-0">
849// Create a circle shaped path at {x: 80, y: 50}
850// with a radius of 30.
851var circle = new Path.Circle(new Point(80, 50), 30);
852circle.fillColor = 'red';
853
854function onMouseMove(event) {
855 // Check whether the mouse position intersects with the
856 // bounding box of the item:
857 if (circle.bounds.contains(event.point)) {
858 // If it intersects, fill it with green:
859 circle.fillColor = 'green';
860 } else {
861 // If it doesn't intersect, fill it with red:
862 circle.fillColor = 'red';
863 }
864}
865</script>
866<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
867</div>
868
869
870</div>
871</div>
872</div>
873
874
875<div id="contains-rect" class="member">
876<div class="member-link">
877<a name="contains-rect" href="#contains-rect"><tt><b>contains</b>(rect)</tt></a>
878</div>
879<div class="member-description hidden">
880<div class="member-text">
881 <p>Tests if the interior of the rectangle entirely contains the specified
882rectangle.</p>
883
884<ul><b>Parameters:</b>
885
886<li>
887<tt>rect:</tt>
888<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
889&mdash;&nbsp;The specified rectangle
890
891</li>
892
893</ul>
894
895
896 <ul><b>Returns:</b>
897
898 <li>
899<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle entirely contains the specified
900 rectangle, <tt>false</tt> otherwise
901</li>
902
903 </ul>
904
905
906 <p>
907<b>Example</b> &mdash; Checking whether the bounding box of one item is contained within that of another item:
908</p>
909
910<div class="paperscript split">
911
912<div class="buttons">
913<div class="button run">Run</div>
914</div>
915
916<script type="text/paperscript" canvas="canvas-1">
917// All newly created paths will inherit these styles:
918project.currentStyle = {
919 fillColor: 'green',
920 strokeColor: 'black'
921};
922
923// Create a circle shaped path at {x: 80, y: 50}
924// with a radius of 45.
925var largeCircle = new Path.Circle(new Point(80, 50), 45);
926
927// Create a smaller circle shaped path in the same position
928// with a radius of 30.
929var circle = new Path.Circle(new Point(80, 50), 30);
930
931function onMouseMove(event) {
932 // Move the circle to the position of the mouse:
933 circle.position = event.point;
934
935 // Check whether the bounding box of the smaller circle
936 // is contained within the bounding box of the larger item:
937 if (largeCircle.bounds.contains(circle.bounds)) {
938 // If it does, fill it with green:
939 circle.fillColor = 'green';
940 largeCircle.fillColor = 'green';
941 } else {
942 // If doesn't, fill it with red:
943 circle.fillColor = 'red';
944 largeCircle.fillColor = 'red';
945 }
946}
947</script>
948<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
949</div>
950
951
952</div>
953</div>
954</div>
955
956
957<div id="intersects-rect" class="member">
958<div class="member-link">
959<a name="intersects-rect" href="#intersects-rect"><tt><b>intersects</b>(rect)</tt></a>
960</div>
961<div class="member-description hidden">
962<div class="member-text">
963 <p>Tests if the interior of this rectangle intersects the interior of
964another rectangle. Rectangles just touching each other are considered
965as non-intersecting.</p>
966
967<ul><b>Parameters:</b>
968
969<li>
970<tt>rect:</tt>
971<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
972&mdash;&nbsp;the specified rectangle
973
974</li>
975
976</ul>
977
978
979 <ul><b>Returns:</b>
980
981 <li>
982<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle and the specified rectangle
983 intersect each other, <tt>false</tt> otherwise
984</li>
985
986 </ul>
987
988
989 <p>
990<b>Example</b> &mdash; Checking whether the bounding box of one item intersects with that of another item:
991</p>
992
993<div class="paperscript split">
994
995<div class="buttons">
996<div class="button run">Run</div>
997</div>
998
999<script type="text/paperscript" canvas="canvas-2">
1000// All newly created paths will inherit these styles:
1001project.currentStyle = {
1002 fillColor: 'green',
1003 strokeColor: 'black'
1004};
1005
1006// Create a circle shaped path at {x: 80, y: 50}
1007// with a radius of 45.
1008var largeCircle = new Path.Circle(new Point(80, 50), 45);
1009
1010// Create a smaller circle shaped path in the same position
1011// with a radius of 30.
1012var circle = new Path.Circle(new Point(80, 50), 30);
1013
1014function onMouseMove(event) {
1015 // Move the circle to the position of the mouse:
1016 circle.position = event.point;
1017
1018 // Check whether the bounding box of the two circle
1019 // shaped paths intersect:
1020 if (largeCircle.bounds.intersects(circle.bounds)) {
1021 // If it does, fill it with green:
1022 circle.fillColor = 'green';
1023 largeCircle.fillColor = 'green';
1024 } else {
1025 // If doesn't, fill it with red:
1026 circle.fillColor = 'red';
1027 largeCircle.fillColor = 'red';
1028 }
1029}
1030</script>
1031<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
1032</div>
1033
1034
1035</div>
1036</div>
1037</div>
1038
1039
1040<h3>Boolean Operations</h3>
1041
1042<div id="intersect-rect" class="member">
1043<div class="member-link">
1044<a name="intersect-rect" href="#intersect-rect"><tt><b>intersect</b>(rect)</tt></a>
1045</div>
1046<div class="member-description hidden">
1047<div class="member-text">
1048 <p>Returns a new rectangle representing the intersection of this rectangle
1049with the specified rectangle.</p>
1050
1051<ul><b>Parameters:</b>
1052
1053<li>
1054<tt>rect:</tt>
1055<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1056&mdash;&nbsp;The rectangle to be intersected with this
1057 rectangle
1058
1059</li>
1060
1061</ul>
1062
1063
1064 <ul><b>Returns:</b>
1065
1066 <li>
1067<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the largest rectangle contained in both the specified
1068 rectangle and in this rectangle
1069</li>
1070
1071 </ul>
1072
1073
1074 <p>
1075<b>Example</b> &mdash; Intersecting two rectangles and visualizing the result using rectangle shaped paths:
1076</p>
1077
1078<div class="paperscript split">
1079
1080<div class="buttons">
1081<div class="button run">Run</div>
1082</div>
1083
1084<script type="text/paperscript" canvas="canvas-3">
1085// Create two rectangles that overlap each other
1086var size = new Size(50, 50);
1087var rectangle1 = new Rectangle(new Point(25, 15), size);
1088var rectangle2 = new Rectangle(new Point(50, 40), size);
1089
1090// The rectangle that represents the intersection of the
1091// two rectangles:
1092var intersected = rectangle1.intersect(rectangle2);
1093
1094// To visualize the intersecting of the rectangles, we will
1095// create rectangle shaped paths using the Path.Rectangle
1096// constructor.
1097
1098// Have all newly created paths inherit a black stroke:
1099project.currentStyle.strokeColor = 'black';
1100
1101// Create two rectangle shaped paths using the abstract rectangles
1102// we created before:
1103new Path.Rectangle(rectangle1);
1104new Path.Rectangle(rectangle2);
1105
1106// Create a path that represents the intersected rectangle,
1107// and fill it with red:
1108var intersectionPath = new Path.Rectangle(intersected);
1109intersectionPath.fillColor = 'red';
1110</script>
1111<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
1112</div>
1113
1114
1115</div>
1116</div>
1117</div>
1118
1119
1120<div id="unite-rect" class="member">
1121<div class="member-link">
1122<a name="unite-rect" href="#unite-rect"><tt><b>unite</b>(rect)</tt></a>
1123</div>
1124<div class="member-description hidden">
1125<div class="member-text">
1126 <p>Returns a new rectangle representing the union of this rectangle with the
1127specified rectangle.</p>
1128
1129<ul><b>Parameters:</b>
1130
1131<li>
1132<tt>rect:</tt>
1133<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1134&mdash;&nbsp;the rectangle to be combined with this rectangle
1135
1136</li>
1137
1138</ul>
1139
1140
1141 <ul><b>Returns:</b>
1142
1143 <li>
1144<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the smallest rectangle containing both the specified
1145 rectangle and this rectangle.
1146</li>
1147
1148 </ul>
1149
1150
1151
1152</div>
1153</div>
1154</div>
1155
1156
1157<div id="include-point" class="member">
1158<div class="member-link">
1159<a name="include-point" href="#include-point"><tt><b>include</b>(point)</tt></a>
1160</div>
1161<div class="member-description hidden">
1162<div class="member-text">
1163 <p>Adds a point to this rectangle. The resulting rectangle is the
1164smallest rectangle that contains both the original rectangle and the
1165specified point.</p>
1166<p>After adding a point, a call to <a href="../classes/Rectangle.html#contains-point" onclick="return toggleMember('contains-point', true);"><tt>contains(point)</tt></a> with the added
1167point as an argument does not necessarily return <tt>true</tt>.</p>
1168<p>The <a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> method does not return <tt>true</tt>
1169for points on the right or bottom edges of a rectangle. Therefore, if the
1170added point falls on the left or bottom edge of the enlarged rectangle,
1171<a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> returns <tt>false</tt> for that point.</p>
1172
1173<ul><b>Parameters:</b>
1174
1175<li>
1176<tt>point:</tt>
1177<a href="../classes/Point.html"><tt>Point</tt></a>
1178
1179
1180</li>
1181
1182</ul>
1183
1184
1185
1186
1187</div>
1188</div>
1189</div>
1190
1191
1192<div id="expand-amount" class="member">
1193<div class="member-link">
1194<a name="expand-amount" href="#expand-amount"><tt><b>expand</b>(amount)</tt></a>
1195</div>
1196<div class="member-description hidden">
1197<div class="member-text">
1198 <p>Expands the rectangle by the specified amount in both horizontal and
1199vertical directions.</p>
1200
1201<ul><b>Parameters:</b>
1202
1203<li>
1204<tt>amount:</tt>
1205<tt>Number</tt>
1206
1207
1208</li>
1209
1210</ul>
1211
1212
1213
1214
1215</div>
1216</div>
1217</div>
1218
1219
1220<div id="expand-hor-ver" class="member">
1221<div class="member-link">
1222<a name="expand-hor-ver" href="#expand-hor-ver"><tt><b>expand</b>(hor, ver)</tt></a>
1223</div>
1224<div class="member-description hidden">
1225<div class="member-text">
1226 <p>Expands the rectangle in horizontal direction by the specified
1227<tt>hor</tt> amount and in vertical direction by the specified <tt>ver</tt>
1228amount.</p>
1229
1230<ul><b>Parameters:</b>
1231
1232<li>
1233<tt>hor:</tt>
1234<tt>Number</tt>
1235
1236
1237</li>
1238
1239<li>
1240<tt>ver:</tt>
1241<tt>Number</tt>
1242
1243
1244</li>
1245
1246</ul>
1247
1248
1249
1250
1251</div>
1252</div>
1253</div>
1254
1255
1256<div id="scale-amount" class="member">
1257<div class="member-link">
1258<a name="scale-amount" href="#scale-amount"><tt><b>scale</b>(amount)</tt></a>
1259</div>
1260<div class="member-description hidden">
1261<div class="member-text">
1262 <p>Scales the rectangle by the specified amount from its center.</p>
1263
1264<ul><b>Parameters:</b>
1265
1266<li>
1267<tt>amount:</tt>
1268<tt>Number</tt>
1269
1270
1271</li>
1272
1273</ul>
1274
1275
1276
1277
1278</div>
1279</div>
1280</div>
1281
1282
1283<div id="scale-hor-ver" class="member">
1284<div class="member-link">
1285<a name="scale-hor-ver" href="#scale-hor-ver"><tt><b>scale</b>(hor, ver)</tt></a>
1286</div>
1287<div class="member-description hidden">
1288<div class="member-text">
1289 <p>Scales the rectangle in horizontal direction by the specified
1290<tt>hor</tt> amount and in vertical direction by the specified <tt>ver</tt>
1291amount from its center.</p>
1292
1293<ul><b>Parameters:</b>
1294
1295<li>
1296<tt>hor:</tt>
1297<tt>Number</tt>
1298
1299
1300</li>
1301
1302<li>
1303<tt>ver:</tt>
1304<tt>Number</tt>
1305
1306
1307</li>
1308
1309</ul>
1310
1311
1312
1313
1314</div>
1315</div>
1316</div>
1317
1318 </div>
1319
1320
1321
1322
1323<!-- =========================== copyright notice ========================= -->
1324<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>
1325<div class="content-end"></div>
1326
1327</body>
Note: See TracBrowser for help on using the repository browser.