1 | <!DOCTYPE html>
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>Point</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>Point</h1>
|
---|
16 |
|
---|
17 | <p>The Point object represents a point in the two dimensional space
|
---|
18 | of the Paper.js project. It is also used to represent two dimensional
|
---|
19 | vector objects.</p>
|
---|
20 | <p>
|
---|
21 | <b>Example</b> — Create a point at x: 10, y: 5
|
---|
22 | </p>
|
---|
23 |
|
---|
24 |
|
---|
25 | <pre class="code">var point = new Point(10, 5);
|
---|
26 | console.log(point.x); // 10
|
---|
27 | console.log(point.y); // 5</pre>
|
---|
28 |
|
---|
29 | </div>
|
---|
30 |
|
---|
31 | <!-- ============================== constructors ========================= -->
|
---|
32 | <div class="reference-members"><h2>Constructors</h2>
|
---|
33 |
|
---|
34 |
|
---|
35 | <div id="point-x-y" class="member">
|
---|
36 | <div class="member-link">
|
---|
37 | <a name="point-x-y" href="#point-x-y"><tt><b>Point</b>(x, y)</tt></a>
|
---|
38 | </div>
|
---|
39 | <div class="member-description hidden">
|
---|
40 | <div class="member-text">
|
---|
41 | <p>Creates a Point object with the given x and y coordinates.</p>
|
---|
42 |
|
---|
43 | <ul><b>Parameters:</b>
|
---|
44 |
|
---|
45 | <li>
|
---|
46 | <tt>x:</tt>
|
---|
47 | <tt>Number</tt>
|
---|
48 | — the x coordinate
|
---|
49 |
|
---|
50 | </li>
|
---|
51 |
|
---|
52 | <li>
|
---|
53 | <tt>y:</tt>
|
---|
54 | <tt>Number</tt>
|
---|
55 | — the y coordinate
|
---|
56 |
|
---|
57 | </li>
|
---|
58 |
|
---|
59 | </ul>
|
---|
60 |
|
---|
61 |
|
---|
62 | <p>
|
---|
63 | <b>Example</b> — Create a point at x: 10, y: 5
|
---|
64 | </p>
|
---|
65 |
|
---|
66 |
|
---|
67 | <pre class="code">var point = new Point(10, 5);
|
---|
68 | console.log(point.x); // 10
|
---|
69 | console.log(point.y); // 5</pre>
|
---|
70 |
|
---|
71 |
|
---|
72 | </div>
|
---|
73 | </div>
|
---|
74 | </div>
|
---|
75 |
|
---|
76 |
|
---|
77 | <div id="point-array" class="member">
|
---|
78 | <div class="member-link">
|
---|
79 | <a name="point-array" href="#point-array"><tt><b>Point</b>(array)</tt></a>
|
---|
80 | </div>
|
---|
81 | <div class="member-description hidden">
|
---|
82 | <div class="member-text">
|
---|
83 | <p>Creates a Point object using the numbers in the given array as
|
---|
84 | coordinates.</p>
|
---|
85 |
|
---|
86 | <ul><b>Parameters:</b>
|
---|
87 |
|
---|
88 | <li>
|
---|
89 | <tt>array:</tt>
|
---|
90 | <tt>array</tt>
|
---|
91 |
|
---|
92 |
|
---|
93 | </li>
|
---|
94 |
|
---|
95 | </ul>
|
---|
96 |
|
---|
97 |
|
---|
98 | <p>
|
---|
99 | <b>Example</b> — Creating a point at x: 10, y: 5 using an array of numbers:
|
---|
100 | </p>
|
---|
101 |
|
---|
102 |
|
---|
103 | <pre class="code">var array = [10, 5];
|
---|
104 | var point = new Point(array);
|
---|
105 | console.log(point.x); // 10
|
---|
106 | console.log(point.y); // 5</pre>
|
---|
107 |
|
---|
108 | <p>
|
---|
109 | <b>Example</b> — Passing an array to a functionality that expects a point:
|
---|
110 | </p>
|
---|
111 |
|
---|
112 |
|
---|
113 | <pre class="code">// Create a circle shaped path at x: 50, y: 50
|
---|
114 | // with a radius of 30:
|
---|
115 | var path = new Path.Circle([50, 50], 30);
|
---|
116 | path.fillColor = 'red';
|
---|
117 |
|
---|
118 | // Which is the same as doing:
|
---|
119 | var path = new Path.Circle(new Point(50, 50), 30);
|
---|
120 | path.fillColor = 'red';</pre>
|
---|
121 |
|
---|
122 |
|
---|
123 | </div>
|
---|
124 | </div>
|
---|
125 | </div>
|
---|
126 |
|
---|
127 |
|
---|
128 | <div id="point-object" class="member">
|
---|
129 | <div class="member-link">
|
---|
130 | <a name="point-object" href="#point-object"><tt><b>Point</b>(object)</tt></a>
|
---|
131 | </div>
|
---|
132 | <div class="member-description hidden">
|
---|
133 | <div class="member-text">
|
---|
134 | <p>Creates a Point object using the properties in the given object.</p>
|
---|
135 |
|
---|
136 | <ul><b>Parameters:</b>
|
---|
137 |
|
---|
138 | <li>
|
---|
139 | <tt>object:</tt>
|
---|
140 | <tt>Object</tt>
|
---|
141 | — the object describing the point's properties
|
---|
142 |
|
---|
143 | </li>
|
---|
144 |
|
---|
145 | </ul>
|
---|
146 |
|
---|
147 |
|
---|
148 | <p>
|
---|
149 | <b>Example</b> — Creating a point using an object literal with length and angle properties:
|
---|
150 | </p>
|
---|
151 |
|
---|
152 |
|
---|
153 | <pre class="code">var point = new Point({
|
---|
154 | length: 10,
|
---|
155 | angle: 90
|
---|
156 | });
|
---|
157 | console.log(point.length); // 10
|
---|
158 | console.log(point.angle); // 90</pre>
|
---|
159 |
|
---|
160 | <p>
|
---|
161 | <b>Example</b> — Creating a point at x: 10, y: 20 using an object literal:
|
---|
162 | </p>
|
---|
163 |
|
---|
164 |
|
---|
165 | <pre class="code">var point = new Point({
|
---|
166 | x: 10,
|
---|
167 | y: 20
|
---|
168 | });
|
---|
169 | console.log(point.x); // 10
|
---|
170 | console.log(point.y); // 20</pre>
|
---|
171 |
|
---|
172 | <p>
|
---|
173 | <b>Example</b> — Passing an object to a functionality that expects a point:
|
---|
174 | </p>
|
---|
175 |
|
---|
176 |
|
---|
177 | <pre class="code">var center = {
|
---|
178 | x: 50,
|
---|
179 | y: 50
|
---|
180 | };
|
---|
181 |
|
---|
182 | // Creates a circle shaped path at x: 50, y: 50
|
---|
183 | // with a radius of 30:
|
---|
184 | var path = new Path.Circle(center, 30);
|
---|
185 | path.fillColor = 'red';</pre>
|
---|
186 |
|
---|
187 |
|
---|
188 | </div>
|
---|
189 | </div>
|
---|
190 | </div>
|
---|
191 |
|
---|
192 |
|
---|
193 | <div id="point-size" class="member">
|
---|
194 | <div class="member-link">
|
---|
195 | <a name="point-size" href="#point-size"><tt><b>Point</b>(size)</tt></a>
|
---|
196 | </div>
|
---|
197 | <div class="member-description hidden">
|
---|
198 | <div class="member-text">
|
---|
199 | <p>Creates a Point object using the width and height values of the given
|
---|
200 | Size object.</p>
|
---|
201 |
|
---|
202 | <ul><b>Parameters:</b>
|
---|
203 |
|
---|
204 | <li>
|
---|
205 | <tt>size:</tt>
|
---|
206 | <a href="../classes/Size.html"><tt>Size</tt></a>
|
---|
207 |
|
---|
208 |
|
---|
209 | </li>
|
---|
210 |
|
---|
211 | </ul>
|
---|
212 |
|
---|
213 |
|
---|
214 | <p>
|
---|
215 | <b>Example</b> — Creating a point using a size object.
|
---|
216 | </p>
|
---|
217 |
|
---|
218 |
|
---|
219 | <pre class="code">// Create a Size with a width of 100pt and a height of 50pt
|
---|
220 | var size = new Size(100, 50);
|
---|
221 | console.log(size); // { width: 100, height: 50 }
|
---|
222 | var point = new Point(size);
|
---|
223 | console.log(point); // { x: 100, y: 50 }</pre>
|
---|
224 |
|
---|
225 |
|
---|
226 | </div>
|
---|
227 | </div>
|
---|
228 | </div>
|
---|
229 |
|
---|
230 |
|
---|
231 | <div id="point-point" class="member">
|
---|
232 | <div class="member-link">
|
---|
233 | <a name="point-point" href="#point-point"><tt><b>Point</b>(point)</tt></a>
|
---|
234 | </div>
|
---|
235 | <div class="member-description hidden">
|
---|
236 | <div class="member-text">
|
---|
237 | <p>Creates a Point object using the coordinates of the given Point object.</p>
|
---|
238 |
|
---|
239 | <ul><b>Parameters:</b>
|
---|
240 |
|
---|
241 | <li>
|
---|
242 | <tt>point:</tt>
|
---|
243 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
244 |
|
---|
245 |
|
---|
246 | </li>
|
---|
247 |
|
---|
248 | </ul>
|
---|
249 |
|
---|
250 |
|
---|
251 |
|
---|
252 |
|
---|
253 | </div>
|
---|
254 | </div>
|
---|
255 | </div>
|
---|
256 |
|
---|
257 | </div>
|
---|
258 |
|
---|
259 |
|
---|
260 |
|
---|
261 | <!-- ============================== properties ========================= -->
|
---|
262 | <div class="reference-members"><h2>Operators</h2>
|
---|
263 |
|
---|
264 | <div id="add" class="member">
|
---|
265 | <div class="member-link">
|
---|
266 | <a name="add" href="#add"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Point</tt></tt></a>
|
---|
267 | </div>
|
---|
268 | <div class="member-description hidden">
|
---|
269 |
|
---|
270 |
|
---|
271 | <div class="member-text">
|
---|
272 | <p>Returns the addition of the supplied value to both coordinates of
|
---|
273 | the point as a new point.</p>
|
---|
274 | <p>The object itself is not modified!</p>
|
---|
275 |
|
---|
276 | <ul><b>Returns:</b>
|
---|
277 |
|
---|
278 | <li>
|
---|
279 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the addition of the point and the value as a new point
|
---|
280 | </li>
|
---|
281 |
|
---|
282 | </ul>
|
---|
283 |
|
---|
284 |
|
---|
285 | <p>
|
---|
286 | <b>Example</b>
|
---|
287 | </p>
|
---|
288 |
|
---|
289 |
|
---|
290 | <pre class="code">var point = new Point(5, 10);
|
---|
291 | var result = point + 20;
|
---|
292 | console.log(result); // {x: 25, y: 30}</pre>
|
---|
293 |
|
---|
294 | </div>
|
---|
295 |
|
---|
296 |
|
---|
297 |
|
---|
298 | <div class="member-text">
|
---|
299 | <p>Returns the addition of the supplied point to the point as a new
|
---|
300 | point.</p>
|
---|
301 | <p>The object itself is not modified!</p>
|
---|
302 |
|
---|
303 | <ul><b>Returns:</b>
|
---|
304 |
|
---|
305 | <li>
|
---|
306 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the addition of the two points as a new point
|
---|
307 | </li>
|
---|
308 |
|
---|
309 | </ul>
|
---|
310 |
|
---|
311 |
|
---|
312 | <p>
|
---|
313 | <b>Example</b>
|
---|
314 | </p>
|
---|
315 |
|
---|
316 |
|
---|
317 | <pre class="code">var point1 = new Point(5, 10);
|
---|
318 | var point2 = new Point(10, 20);
|
---|
319 | var result = point1 + point2;
|
---|
320 | console.log(result); // {x: 15, y: 30}</pre>
|
---|
321 |
|
---|
322 | </div>
|
---|
323 |
|
---|
324 |
|
---|
325 | </div>
|
---|
326 | </div>
|
---|
327 |
|
---|
328 |
|
---|
329 | <div id="subtract" class="member">
|
---|
330 | <div class="member-link">
|
---|
331 | <a name="subtract" href="#subtract"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Point</tt></tt></a>
|
---|
332 | </div>
|
---|
333 | <div class="member-description hidden">
|
---|
334 |
|
---|
335 |
|
---|
336 | <div class="member-text">
|
---|
337 | <p>Returns the subtraction of the supplied value to both coordinates of
|
---|
338 | the point as a new point.</p>
|
---|
339 | <p>The object itself is not modified!</p>
|
---|
340 |
|
---|
341 | <ul><b>Returns:</b>
|
---|
342 |
|
---|
343 | <li>
|
---|
344 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the subtraction of the point and the value as a new point
|
---|
345 | </li>
|
---|
346 |
|
---|
347 | </ul>
|
---|
348 |
|
---|
349 |
|
---|
350 | <p>
|
---|
351 | <b>Example</b>
|
---|
352 | </p>
|
---|
353 |
|
---|
354 |
|
---|
355 | <pre class="code">var point = new Point(10, 20);
|
---|
356 | var result = point - 5;
|
---|
357 | console.log(result); // {x: 5, y: 15}</pre>
|
---|
358 |
|
---|
359 | </div>
|
---|
360 |
|
---|
361 |
|
---|
362 |
|
---|
363 | <div class="member-text">
|
---|
364 | <p>Returns the subtraction of the supplied point to the point as a new
|
---|
365 | point.</p>
|
---|
366 | <p>The object itself is not modified!</p>
|
---|
367 |
|
---|
368 | <ul><b>Returns:</b>
|
---|
369 |
|
---|
370 | <li>
|
---|
371 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the subtraction of the two points as a new point
|
---|
372 | </li>
|
---|
373 |
|
---|
374 | </ul>
|
---|
375 |
|
---|
376 |
|
---|
377 | <p>
|
---|
378 | <b>Example</b>
|
---|
379 | </p>
|
---|
380 |
|
---|
381 |
|
---|
382 | <pre class="code">var firstPoint = new Point(10, 20);
|
---|
383 | var secondPoint = new Point(5, 5);
|
---|
384 | var result = firstPoint - secondPoint;
|
---|
385 | console.log(result); // {x: 5, y: 15}</pre>
|
---|
386 |
|
---|
387 | </div>
|
---|
388 |
|
---|
389 |
|
---|
390 | </div>
|
---|
391 | </div>
|
---|
392 |
|
---|
393 |
|
---|
394 | <div id="multiply" class="member">
|
---|
395 | <div class="member-link">
|
---|
396 | <a name="multiply" href="#multiply"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Point</tt></tt></a>
|
---|
397 | </div>
|
---|
398 | <div class="member-description hidden">
|
---|
399 |
|
---|
400 |
|
---|
401 | <div class="member-text">
|
---|
402 | <p>Returns the multiplication of the supplied value to both coordinates of
|
---|
403 | the point as a new point.</p>
|
---|
404 | <p>The object itself is not modified!</p>
|
---|
405 |
|
---|
406 | <ul><b>Returns:</b>
|
---|
407 |
|
---|
408 | <li>
|
---|
409 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the multiplication of the point and the value as a new point
|
---|
410 | </li>
|
---|
411 |
|
---|
412 | </ul>
|
---|
413 |
|
---|
414 |
|
---|
415 | <p>
|
---|
416 | <b>Example</b>
|
---|
417 | </p>
|
---|
418 |
|
---|
419 |
|
---|
420 | <pre class="code">var point = new Point(10, 20);
|
---|
421 | var result = point * 2;
|
---|
422 | console.log(result); // {x: 20, y: 40}</pre>
|
---|
423 |
|
---|
424 | </div>
|
---|
425 |
|
---|
426 |
|
---|
427 |
|
---|
428 | <div class="member-text">
|
---|
429 | <p>Returns the multiplication of the supplied point to the point as a new
|
---|
430 | point.</p>
|
---|
431 | <p>The object itself is not modified!</p>
|
---|
432 |
|
---|
433 | <ul><b>Returns:</b>
|
---|
434 |
|
---|
435 | <li>
|
---|
436 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the multiplication of the two points as a new point
|
---|
437 | </li>
|
---|
438 |
|
---|
439 | </ul>
|
---|
440 |
|
---|
441 |
|
---|
442 | <p>
|
---|
443 | <b>Example</b>
|
---|
444 | </p>
|
---|
445 |
|
---|
446 |
|
---|
447 | <pre class="code">var firstPoint = new Point(5, 10);
|
---|
448 | var secondPoint = new Point(4, 2);
|
---|
449 | var result = firstPoint * secondPoint;
|
---|
450 | console.log(result); // {x: 20, y: 20}</pre>
|
---|
451 |
|
---|
452 | </div>
|
---|
453 |
|
---|
454 |
|
---|
455 | </div>
|
---|
456 | </div>
|
---|
457 |
|
---|
458 |
|
---|
459 | <div id="divide" class="member">
|
---|
460 | <div class="member-link">
|
---|
461 | <a name="divide" href="#divide"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Point</tt></tt></a>
|
---|
462 | </div>
|
---|
463 | <div class="member-description hidden">
|
---|
464 |
|
---|
465 |
|
---|
466 | <div class="member-text">
|
---|
467 | <p>Returns the division of the supplied value to both coordinates of
|
---|
468 | the point as a new point.</p>
|
---|
469 | <p>The object itself is not modified!</p>
|
---|
470 |
|
---|
471 | <ul><b>Returns:</b>
|
---|
472 |
|
---|
473 | <li>
|
---|
474 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the division of the point and the value as a new point
|
---|
475 | </li>
|
---|
476 |
|
---|
477 | </ul>
|
---|
478 |
|
---|
479 |
|
---|
480 | <p>
|
---|
481 | <b>Example</b>
|
---|
482 | </p>
|
---|
483 |
|
---|
484 |
|
---|
485 | <pre class="code">var point = new Point(10, 20);
|
---|
486 | var result = point / 2;
|
---|
487 | console.log(result); // {x: 5, y: 10}</pre>
|
---|
488 |
|
---|
489 | </div>
|
---|
490 |
|
---|
491 |
|
---|
492 |
|
---|
493 | <div class="member-text">
|
---|
494 | <p>Returns the division of the supplied point to the point as a new
|
---|
495 | point.</p>
|
---|
496 | <p>The object itself is not modified!</p>
|
---|
497 |
|
---|
498 | <ul><b>Returns:</b>
|
---|
499 |
|
---|
500 | <li>
|
---|
501 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the division of the two points as a new point
|
---|
502 | </li>
|
---|
503 |
|
---|
504 | </ul>
|
---|
505 |
|
---|
506 |
|
---|
507 | <p>
|
---|
508 | <b>Example</b>
|
---|
509 | </p>
|
---|
510 |
|
---|
511 |
|
---|
512 | <pre class="code">var firstPoint = new Point(8, 10);
|
---|
513 | var secondPoint = new Point(2, 5);
|
---|
514 | var result = firstPoint / secondPoint;
|
---|
515 | console.log(result); // {x: 4, y: 2}</pre>
|
---|
516 |
|
---|
517 | </div>
|
---|
518 |
|
---|
519 |
|
---|
520 | </div>
|
---|
521 | </div>
|
---|
522 |
|
---|
523 |
|
---|
524 | <div id="modulo" class="member">
|
---|
525 | <div class="member-link">
|
---|
526 | <a name="modulo" href="#modulo"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Point</tt></tt></a>
|
---|
527 | </div>
|
---|
528 | <div class="member-description hidden">
|
---|
529 |
|
---|
530 |
|
---|
531 | <div class="member-text">
|
---|
532 | <p>The modulo operator returns the integer remainders of dividing the point
|
---|
533 | by the supplied value as a new point.</p>
|
---|
534 |
|
---|
535 | <ul><b>Returns:</b>
|
---|
536 |
|
---|
537 | <li>
|
---|
538 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the integer remainders of dividing the point by the value
|
---|
539 | as a new point
|
---|
540 | </li>
|
---|
541 |
|
---|
542 | </ul>
|
---|
543 |
|
---|
544 |
|
---|
545 | <p>
|
---|
546 | <b>Example</b>
|
---|
547 | </p>
|
---|
548 |
|
---|
549 |
|
---|
550 | <pre class="code">var point = new Point(12, 6);
|
---|
551 | console.log(point % 5); // {x: 2, y: 1}</pre>
|
---|
552 |
|
---|
553 | </div>
|
---|
554 |
|
---|
555 |
|
---|
556 |
|
---|
557 | <div class="member-text">
|
---|
558 | <p>The modulo operator returns the integer remainders of dividing the point
|
---|
559 | by the supplied value as a new point.</p>
|
---|
560 |
|
---|
561 | <ul><b>Returns:</b>
|
---|
562 |
|
---|
563 | <li>
|
---|
564 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the integer remainders of dividing the points by each
|
---|
565 | other as a new point
|
---|
566 | </li>
|
---|
567 |
|
---|
568 | </ul>
|
---|
569 |
|
---|
570 |
|
---|
571 | <p>
|
---|
572 | <b>Example</b>
|
---|
573 | </p>
|
---|
574 |
|
---|
575 |
|
---|
576 | <pre class="code">var point = new Point(12, 6);
|
---|
577 | console.log(point % new Point(5, 2)); // {x: 2, y: 0}</pre>
|
---|
578 |
|
---|
579 | </div>
|
---|
580 |
|
---|
581 |
|
---|
582 | </div>
|
---|
583 | </div>
|
---|
584 |
|
---|
585 |
|
---|
586 | </div>
|
---|
587 |
|
---|
588 |
|
---|
589 |
|
---|
590 | <div class="reference-members"><h2>Properties</h2>
|
---|
591 |
|
---|
592 |
|
---|
593 | <div id="x" class="member">
|
---|
594 | <div class="member-link">
|
---|
595 | <a name="x" href="#x"><tt><b>x</b></tt></a>
|
---|
596 | </div>
|
---|
597 | <div class="member-description hidden">
|
---|
598 |
|
---|
599 | <div class="member-text">
|
---|
600 | <p>The x coordinate of the point</p>
|
---|
601 |
|
---|
602 |
|
---|
603 | <ul><b>Type:</b>
|
---|
604 | <li>
|
---|
605 | <tt>Number</tt>
|
---|
606 | </li>
|
---|
607 | </ul>
|
---|
608 |
|
---|
609 |
|
---|
610 | </div>
|
---|
611 |
|
---|
612 | </div>
|
---|
613 | </div>
|
---|
614 |
|
---|
615 |
|
---|
616 | <div id="y" class="member">
|
---|
617 | <div class="member-link">
|
---|
618 | <a name="y" href="#y"><tt><b>y</b></tt></a>
|
---|
619 | </div>
|
---|
620 | <div class="member-description hidden">
|
---|
621 |
|
---|
622 | <div class="member-text">
|
---|
623 | <p>The y coordinate of the point</p>
|
---|
624 |
|
---|
625 |
|
---|
626 | <ul><b>Type:</b>
|
---|
627 | <li>
|
---|
628 | <tt>Number</tt>
|
---|
629 | </li>
|
---|
630 | </ul>
|
---|
631 |
|
---|
632 |
|
---|
633 | </div>
|
---|
634 |
|
---|
635 | </div>
|
---|
636 | </div>
|
---|
637 |
|
---|
638 |
|
---|
639 | <div id="length" class="member">
|
---|
640 | <div class="member-link">
|
---|
641 | <a name="length" href="#length"><tt><b>length</b></tt></a>
|
---|
642 | </div>
|
---|
643 | <div class="member-description hidden">
|
---|
644 |
|
---|
645 | <div class="member-text">
|
---|
646 | <p>The length of the vector that is represented by this point's coordinates.</p>
|
---|
647 | <p>Each point can be interpreted as a vector that points from the origin
|
---|
648 | (<tt>x = 0</tt>, <tt>y = 0</tt>) to the point's location.</p>
|
---|
649 | <p>Setting the length changes the location but keeps the vector's angle.</p>
|
---|
650 |
|
---|
651 |
|
---|
652 | <ul><b>Type:</b>
|
---|
653 | <li>
|
---|
654 | <tt>Number</tt>
|
---|
655 | </li>
|
---|
656 | </ul>
|
---|
657 |
|
---|
658 |
|
---|
659 | </div>
|
---|
660 |
|
---|
661 | </div>
|
---|
662 | </div>
|
---|
663 |
|
---|
664 |
|
---|
665 | <div id="angle" class="member">
|
---|
666 | <div class="member-link">
|
---|
667 | <a name="angle" href="#angle"><tt><b>angle</b></tt></a>
|
---|
668 | </div>
|
---|
669 | <div class="member-description hidden">
|
---|
670 |
|
---|
671 | <div class="member-text">
|
---|
672 | <p>The vector's angle in degrees, measured from the x-axis to the vector.</p>
|
---|
673 |
|
---|
674 |
|
---|
675 | <ul><b>Type:</b>
|
---|
676 | <li>
|
---|
677 | <tt>Number</tt>
|
---|
678 | </li>
|
---|
679 | </ul>
|
---|
680 |
|
---|
681 |
|
---|
682 | </div>
|
---|
683 |
|
---|
684 | </div>
|
---|
685 | </div>
|
---|
686 |
|
---|
687 |
|
---|
688 | <div id="angleinradians" class="member">
|
---|
689 | <div class="member-link">
|
---|
690 | <a name="angleinradians" href="#angleinradians"><tt><b>angleInRadians</b></tt></a>
|
---|
691 | </div>
|
---|
692 | <div class="member-description hidden">
|
---|
693 |
|
---|
694 | <div class="member-text">
|
---|
695 | <p>The vector's angle in radians, measured from the x-axis to the vector.</p>
|
---|
696 |
|
---|
697 | <p>Read only.</p>
|
---|
698 |
|
---|
699 |
|
---|
700 | <ul><b>Type:</b>
|
---|
701 | <li>
|
---|
702 | <tt>Number</tt>
|
---|
703 | </li>
|
---|
704 | </ul>
|
---|
705 |
|
---|
706 |
|
---|
707 | </div>
|
---|
708 |
|
---|
709 | </div>
|
---|
710 | </div>
|
---|
711 |
|
---|
712 |
|
---|
713 | <div id="quadrant" class="member">
|
---|
714 | <div class="member-link">
|
---|
715 | <a name="quadrant" href="#quadrant"><tt><b>quadrant</b></tt></a>
|
---|
716 | </div>
|
---|
717 | <div class="member-description hidden">
|
---|
718 |
|
---|
719 | <div class="member-text">
|
---|
720 | <p>The quadrant of the <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> of the point.</p>
|
---|
721 | <p>Angles between 0 and 90 degrees are in quadrant <tt>1</tt>. Angles between
|
---|
722 | 90 and 180 degrees are in quadrant <tt>2</tt>, angles between 180 and 270
|
---|
723 | degrees are in quadrant <tt>3</tt> and angles between 270 and 360 degrees
|
---|
724 | are in quadrant <tt>4</tt>.</p>
|
---|
725 |
|
---|
726 | <p>Read only.</p>
|
---|
727 |
|
---|
728 |
|
---|
729 | <ul><b>Type:</b>
|
---|
730 | <li>
|
---|
731 | <tt>Number</tt>
|
---|
732 | </li>
|
---|
733 | </ul>
|
---|
734 |
|
---|
735 | <p>
|
---|
736 | <b>Example</b>
|
---|
737 | </p>
|
---|
738 |
|
---|
739 |
|
---|
740 | <pre class="code">var point = new Point({
|
---|
741 | angle: 10,
|
---|
742 | length: 20
|
---|
743 | });
|
---|
744 | console.log(point.quadrant); // 1
|
---|
745 |
|
---|
746 | point.angle = 100;
|
---|
747 | console.log(point.quadrant); // 2
|
---|
748 |
|
---|
749 | point.angle = 190;
|
---|
750 | console.log(point.quadrant); // 3
|
---|
751 |
|
---|
752 | point.angle = 280;
|
---|
753 | console.log(point.quadrant); // 4</pre>
|
---|
754 |
|
---|
755 | </div>
|
---|
756 |
|
---|
757 | </div>
|
---|
758 | </div>
|
---|
759 |
|
---|
760 |
|
---|
761 | <div id="selected" class="member">
|
---|
762 | <div class="member-link">
|
---|
763 | <a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
---|
764 | </div>
|
---|
765 | <div class="member-description hidden">
|
---|
766 |
|
---|
767 | <div class="member-text">
|
---|
768 | <p>This property is only present if the point is an anchor or control point
|
---|
769 | of a <a href="../classes/Segment.html"><tt>Segment</tt></a> or a <a href="../classes/Curve.html"><tt>Curve</tt></a>. In this case, it returns
|
---|
770 | <tt>true</tt> it is selected, <tt>false</tt> otherwise</p>
|
---|
771 |
|
---|
772 |
|
---|
773 | <ul><b>Type:</b>
|
---|
774 | <li>
|
---|
775 | <tt>Boolean</tt>
|
---|
776 | </li>
|
---|
777 | </ul>
|
---|
778 |
|
---|
779 |
|
---|
780 | </div>
|
---|
781 |
|
---|
782 | </div>
|
---|
783 | </div>
|
---|
784 |
|
---|
785 | </div>
|
---|
786 |
|
---|
787 |
|
---|
788 |
|
---|
789 | <!-- ============================== methods ================================ -->
|
---|
790 | <div class="reference-members"><h2>Methods</h2>
|
---|
791 |
|
---|
792 |
|
---|
793 | <div id="equals-point" class="member">
|
---|
794 | <div class="member-link">
|
---|
795 | <a name="equals-point" href="#equals-point"><tt><b>equals</b>(point)</tt></a>
|
---|
796 | </div>
|
---|
797 | <div class="member-description hidden">
|
---|
798 | <div class="member-text">
|
---|
799 | <p>Checks whether the coordinates of the point are equal to that of the
|
---|
800 | supplied point.</p>
|
---|
801 |
|
---|
802 | <ul><b>Parameters:</b>
|
---|
803 |
|
---|
804 | <li>
|
---|
805 | <tt>point:</tt>
|
---|
806 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
807 |
|
---|
808 |
|
---|
809 | </li>
|
---|
810 |
|
---|
811 | </ul>
|
---|
812 |
|
---|
813 |
|
---|
814 | <ul><b>Returns:</b>
|
---|
815 |
|
---|
816 | <li>
|
---|
817 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> if the points are equal, <tt>false</tt> otherwise
|
---|
818 | </li>
|
---|
819 |
|
---|
820 | </ul>
|
---|
821 |
|
---|
822 |
|
---|
823 | <p>
|
---|
824 | <b>Example</b>
|
---|
825 | </p>
|
---|
826 |
|
---|
827 |
|
---|
828 | <pre class="code">var point = new Point(5, 10);
|
---|
829 | console.log(point == new Point(5, 10)); // true
|
---|
830 | console.log(point == new Point(1, 1)); // false
|
---|
831 | console.log(point != new Point(1, 1)); // true</pre>
|
---|
832 |
|
---|
833 | </div>
|
---|
834 | </div>
|
---|
835 | </div>
|
---|
836 |
|
---|
837 |
|
---|
838 | <div id="clone" class="member">
|
---|
839 | <div class="member-link">
|
---|
840 | <a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
---|
841 | </div>
|
---|
842 | <div class="member-description hidden">
|
---|
843 | <div class="member-text">
|
---|
844 | <p>Returns a copy of the point.</p>
|
---|
845 |
|
---|
846 |
|
---|
847 | <ul><b>Returns:</b>
|
---|
848 |
|
---|
849 | <li>
|
---|
850 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the cloned point
|
---|
851 | </li>
|
---|
852 |
|
---|
853 | </ul>
|
---|
854 |
|
---|
855 |
|
---|
856 | <p>
|
---|
857 | <b>Example</b>
|
---|
858 | </p>
|
---|
859 |
|
---|
860 |
|
---|
861 | <pre class="code">var point1 = new Point();
|
---|
862 | var point2 = point1;
|
---|
863 | point2.x = 1; // also changes point1.x
|
---|
864 |
|
---|
865 | var point2 = point1.clone();
|
---|
866 | point2.x = 1; // doesn't change point1.x</pre>
|
---|
867 |
|
---|
868 | </div>
|
---|
869 | </div>
|
---|
870 | </div>
|
---|
871 |
|
---|
872 |
|
---|
873 | <div id="tostring" class="member">
|
---|
874 | <div class="member-link">
|
---|
875 | <a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
---|
876 | </div>
|
---|
877 | <div class="member-description hidden">
|
---|
878 | <div class="member-text">
|
---|
879 |
|
---|
880 |
|
---|
881 |
|
---|
882 | <ul><b>Returns:</b>
|
---|
883 |
|
---|
884 | <li>
|
---|
885 | <tt><tt>String</tt></tt> — a string representation of the point
|
---|
886 | </li>
|
---|
887 |
|
---|
888 | </ul>
|
---|
889 |
|
---|
890 |
|
---|
891 |
|
---|
892 | </div>
|
---|
893 | </div>
|
---|
894 | </div>
|
---|
895 |
|
---|
896 |
|
---|
897 | <div id="transform-matrix" class="member">
|
---|
898 | <div class="member-link">
|
---|
899 | <a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
|
---|
900 | </div>
|
---|
901 | <div class="member-description hidden">
|
---|
902 | <div class="member-text">
|
---|
903 | <p>Transforms the point by the matrix as a new point. The object itself
|
---|
904 | is not modified!</p>
|
---|
905 |
|
---|
906 | <ul><b>Parameters:</b>
|
---|
907 |
|
---|
908 | <li>
|
---|
909 | <tt>matrix:</tt>
|
---|
910 | <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
---|
911 |
|
---|
912 |
|
---|
913 | </li>
|
---|
914 |
|
---|
915 | </ul>
|
---|
916 |
|
---|
917 |
|
---|
918 | <ul><b>Returns:</b>
|
---|
919 |
|
---|
920 | <li>
|
---|
921 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the transformed point
|
---|
922 | </li>
|
---|
923 |
|
---|
924 | </ul>
|
---|
925 |
|
---|
926 |
|
---|
927 |
|
---|
928 | </div>
|
---|
929 | </div>
|
---|
930 | </div>
|
---|
931 |
|
---|
932 |
|
---|
933 | <h3>Distance & Length</h3>
|
---|
934 |
|
---|
935 | <div id="getdistance-point" class="member">
|
---|
936 | <div class="member-link">
|
---|
937 | <a name="getdistance-point" href="#getdistance-point"><tt><b>getDistance</b>(point[, squared])</tt></a>
|
---|
938 | </div>
|
---|
939 | <div class="member-description hidden">
|
---|
940 | <div class="member-text">
|
---|
941 | <p>Returns the distance between the point and another point.</p>
|
---|
942 |
|
---|
943 | <ul><b>Parameters:</b>
|
---|
944 |
|
---|
945 | <li>
|
---|
946 | <tt>point:</tt>
|
---|
947 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
948 |
|
---|
949 |
|
---|
950 | </li>
|
---|
951 |
|
---|
952 | <li>
|
---|
953 | <tt>squared:</tt>
|
---|
954 | <tt>Boolean</tt>
|
---|
955 | — Controls whether the distance should
|
---|
956 | remain squared, or its square root should be calculated.
|
---|
957 | — optional, default: <tt>false</tt>
|
---|
958 | </li>
|
---|
959 |
|
---|
960 | </ul>
|
---|
961 |
|
---|
962 |
|
---|
963 | <ul><b>Returns:</b>
|
---|
964 |
|
---|
965 | <li>
|
---|
966 | <tt><tt>Number</tt></tt>
|
---|
967 | </li>
|
---|
968 |
|
---|
969 | </ul>
|
---|
970 |
|
---|
971 |
|
---|
972 |
|
---|
973 | </div>
|
---|
974 | </div>
|
---|
975 | </div>
|
---|
976 |
|
---|
977 |
|
---|
978 | <div id="normalize" class="member">
|
---|
979 | <div class="member-link">
|
---|
980 | <a name="normalize" href="#normalize"><tt><b>normalize</b>([length])</tt></a>
|
---|
981 | </div>
|
---|
982 | <div class="member-description hidden">
|
---|
983 | <div class="member-text">
|
---|
984 | <p>Normalize modifies the <a href="../classes/Point.html#length" onclick="return toggleMember('length', true);"><tt>length</tt></a> of the vector to <tt>1</tt> without
|
---|
985 | changing its angle and returns it as a new point. The optional
|
---|
986 | <tt>length</tt> parameter defines the length to normalize to.</p>
|
---|
987 | <p>The object itself is not modified!</p>
|
---|
988 |
|
---|
989 | <ul><b>Parameters:</b>
|
---|
990 |
|
---|
991 | <li>
|
---|
992 | <tt>length:</tt>
|
---|
993 | <tt>Number</tt>
|
---|
994 | — The length of the normalized vector
|
---|
995 | — optional, default: <tt>1</tt>
|
---|
996 | </li>
|
---|
997 |
|
---|
998 | </ul>
|
---|
999 |
|
---|
1000 |
|
---|
1001 | <ul><b>Returns:</b>
|
---|
1002 |
|
---|
1003 | <li>
|
---|
1004 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the normalized vector of the vector that is represented
|
---|
1005 | by this point's coordinates
|
---|
1006 | </li>
|
---|
1007 |
|
---|
1008 | </ul>
|
---|
1009 |
|
---|
1010 |
|
---|
1011 |
|
---|
1012 | </div>
|
---|
1013 | </div>
|
---|
1014 | </div>
|
---|
1015 |
|
---|
1016 |
|
---|
1017 | <h3>Angle & Rotation</h3>
|
---|
1018 |
|
---|
1019 | <div id="getangle-point" class="member">
|
---|
1020 | <div class="member-link">
|
---|
1021 | <a name="getangle-point" href="#getangle-point"><tt><b>getAngle</b>(point)</tt></a>
|
---|
1022 | </div>
|
---|
1023 | <div class="member-description hidden">
|
---|
1024 | <div class="member-text">
|
---|
1025 | <p>Returns the smaller angle between two vectors. The angle is unsigned, no
|
---|
1026 | information about rotational direction is given.</p>
|
---|
1027 |
|
---|
1028 | <ul><b>Parameters:</b>
|
---|
1029 |
|
---|
1030 | <li>
|
---|
1031 | <tt>point:</tt>
|
---|
1032 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1033 |
|
---|
1034 |
|
---|
1035 | </li>
|
---|
1036 |
|
---|
1037 | </ul>
|
---|
1038 |
|
---|
1039 |
|
---|
1040 | <ul><b>Returns:</b>
|
---|
1041 |
|
---|
1042 | <li>
|
---|
1043 | <tt><tt>Number</tt></tt> — the angle in degrees
|
---|
1044 | </li>
|
---|
1045 |
|
---|
1046 | </ul>
|
---|
1047 |
|
---|
1048 |
|
---|
1049 |
|
---|
1050 | </div>
|
---|
1051 | </div>
|
---|
1052 | </div>
|
---|
1053 |
|
---|
1054 |
|
---|
1055 | <div id="getangleinradians-point" class="member">
|
---|
1056 | <div class="member-link">
|
---|
1057 | <a name="getangleinradians-point" href="#getangleinradians-point"><tt><b>getAngleInRadians</b>(point)</tt></a>
|
---|
1058 | </div>
|
---|
1059 | <div class="member-description hidden">
|
---|
1060 | <div class="member-text">
|
---|
1061 | <p>Returns the smaller angle between two vectors in radians. The angle is
|
---|
1062 | unsigned, no information about rotational direction is given.</p>
|
---|
1063 |
|
---|
1064 | <ul><b>Parameters:</b>
|
---|
1065 |
|
---|
1066 | <li>
|
---|
1067 | <tt>point:</tt>
|
---|
1068 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1069 |
|
---|
1070 |
|
---|
1071 | </li>
|
---|
1072 |
|
---|
1073 | </ul>
|
---|
1074 |
|
---|
1075 |
|
---|
1076 | <ul><b>Returns:</b>
|
---|
1077 |
|
---|
1078 | <li>
|
---|
1079 | <tt><tt>Number</tt></tt> — the angle in radians
|
---|
1080 | </li>
|
---|
1081 |
|
---|
1082 | </ul>
|
---|
1083 |
|
---|
1084 |
|
---|
1085 |
|
---|
1086 | </div>
|
---|
1087 | </div>
|
---|
1088 | </div>
|
---|
1089 |
|
---|
1090 |
|
---|
1091 | <div id="getdirectedangle-point" class="member">
|
---|
1092 | <div class="member-link">
|
---|
1093 | <a name="getdirectedangle-point" href="#getdirectedangle-point"><tt><b>getDirectedAngle</b>(point)</tt></a>
|
---|
1094 | </div>
|
---|
1095 | <div class="member-description hidden">
|
---|
1096 | <div class="member-text">
|
---|
1097 | <p>Returns the angle between two vectors. The angle is directional and
|
---|
1098 | signed, giving information about the rotational direction.</p>
|
---|
1099 | <p>Read more about angle units and orientation in the description of the
|
---|
1100 | <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
|
---|
1101 |
|
---|
1102 | <ul><b>Parameters:</b>
|
---|
1103 |
|
---|
1104 | <li>
|
---|
1105 | <tt>point:</tt>
|
---|
1106 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1107 |
|
---|
1108 |
|
---|
1109 | </li>
|
---|
1110 |
|
---|
1111 | </ul>
|
---|
1112 |
|
---|
1113 |
|
---|
1114 | <ul><b>Returns:</b>
|
---|
1115 |
|
---|
1116 | <li>
|
---|
1117 | <tt><tt>Number</tt></tt> — the angle between the two vectors
|
---|
1118 | </li>
|
---|
1119 |
|
---|
1120 | </ul>
|
---|
1121 |
|
---|
1122 |
|
---|
1123 |
|
---|
1124 | </div>
|
---|
1125 | </div>
|
---|
1126 | </div>
|
---|
1127 |
|
---|
1128 |
|
---|
1129 | <div id="rotate-angle-center" class="member">
|
---|
1130 | <div class="member-link">
|
---|
1131 | <a name="rotate-angle-center" href="#rotate-angle-center"><tt><b>rotate</b>(angle, center)</tt></a>
|
---|
1132 | </div>
|
---|
1133 | <div class="member-description hidden">
|
---|
1134 | <div class="member-text">
|
---|
1135 | <p>Rotates the point by the given angle around an optional center point.</p>
|
---|
1136 | <p>The object itself is not modified.</p>
|
---|
1137 | <p>Read more about angle units and orientation in the description of the
|
---|
1138 | <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
|
---|
1139 |
|
---|
1140 | <ul><b>Parameters:</b>
|
---|
1141 |
|
---|
1142 | <li>
|
---|
1143 | <tt>angle:</tt>
|
---|
1144 | <tt>Number</tt>
|
---|
1145 | — the rotation angle
|
---|
1146 |
|
---|
1147 | </li>
|
---|
1148 |
|
---|
1149 | <li>
|
---|
1150 | <tt>center:</tt>
|
---|
1151 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1152 | — the center point of the rotation
|
---|
1153 |
|
---|
1154 | </li>
|
---|
1155 |
|
---|
1156 | </ul>
|
---|
1157 |
|
---|
1158 |
|
---|
1159 | <ul><b>Returns:</b>
|
---|
1160 |
|
---|
1161 | <li>
|
---|
1162 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the rotated point
|
---|
1163 | </li>
|
---|
1164 |
|
---|
1165 | </ul>
|
---|
1166 |
|
---|
1167 |
|
---|
1168 |
|
---|
1169 | </div>
|
---|
1170 | </div>
|
---|
1171 | </div>
|
---|
1172 |
|
---|
1173 |
|
---|
1174 | <h3>Tests</h3>
|
---|
1175 |
|
---|
1176 | <div id="isinside-rect" class="member">
|
---|
1177 | <div class="member-link">
|
---|
1178 | <a name="isinside-rect" href="#isinside-rect"><tt><b>isInside</b>(rect)</tt></a>
|
---|
1179 | </div>
|
---|
1180 | <div class="member-description hidden">
|
---|
1181 | <div class="member-text">
|
---|
1182 | <p>Checks whether the point is inside the boundaries of the rectangle.</p>
|
---|
1183 |
|
---|
1184 | <ul><b>Parameters:</b>
|
---|
1185 |
|
---|
1186 | <li>
|
---|
1187 | <tt>rect:</tt>
|
---|
1188 | <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
---|
1189 | — the rectangle to check against
|
---|
1190 |
|
---|
1191 | </li>
|
---|
1192 |
|
---|
1193 | </ul>
|
---|
1194 |
|
---|
1195 |
|
---|
1196 | <ul><b>Returns:</b>
|
---|
1197 |
|
---|
1198 | <li>
|
---|
1199 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> if the point is inside the rectangle, <tt>false</tt> otherwise
|
---|
1200 | </li>
|
---|
1201 |
|
---|
1202 | </ul>
|
---|
1203 |
|
---|
1204 |
|
---|
1205 |
|
---|
1206 | </div>
|
---|
1207 | </div>
|
---|
1208 | </div>
|
---|
1209 |
|
---|
1210 |
|
---|
1211 | <div id="isclose-point-tolerance" class="member">
|
---|
1212 | <div class="member-link">
|
---|
1213 | <a name="isclose-point-tolerance" href="#isclose-point-tolerance"><tt><b>isClose</b>(point, tolerance)</tt></a>
|
---|
1214 | </div>
|
---|
1215 | <div class="member-description hidden">
|
---|
1216 | <div class="member-text">
|
---|
1217 | <p>Checks if the point is within a given distance of another point.</p>
|
---|
1218 |
|
---|
1219 | <ul><b>Parameters:</b>
|
---|
1220 |
|
---|
1221 | <li>
|
---|
1222 | <tt>point:</tt>
|
---|
1223 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1224 | — the point to check against
|
---|
1225 |
|
---|
1226 | </li>
|
---|
1227 |
|
---|
1228 | <li>
|
---|
1229 | <tt>tolerance:</tt>
|
---|
1230 | <tt>Number</tt>
|
---|
1231 | — the maximum distance allowed
|
---|
1232 |
|
---|
1233 | </li>
|
---|
1234 |
|
---|
1235 | </ul>
|
---|
1236 |
|
---|
1237 |
|
---|
1238 | <ul><b>Returns:</b>
|
---|
1239 |
|
---|
1240 | <li>
|
---|
1241 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is within the given distance, <tt>false</tt> otherwise
|
---|
1242 | </li>
|
---|
1243 |
|
---|
1244 | </ul>
|
---|
1245 |
|
---|
1246 |
|
---|
1247 |
|
---|
1248 | </div>
|
---|
1249 | </div>
|
---|
1250 | </div>
|
---|
1251 |
|
---|
1252 |
|
---|
1253 | <div id="iscolinear-point" class="member">
|
---|
1254 | <div class="member-link">
|
---|
1255 | <a name="iscolinear-point" href="#iscolinear-point"><tt><b>isColinear</b>(point)</tt></a>
|
---|
1256 | </div>
|
---|
1257 | <div class="member-description hidden">
|
---|
1258 | <div class="member-text">
|
---|
1259 | <p>Checks if the vector represented by this point is colinear (parallel) to
|
---|
1260 | another vector.</p>
|
---|
1261 |
|
---|
1262 | <ul><b>Parameters:</b>
|
---|
1263 |
|
---|
1264 | <li>
|
---|
1265 | <tt>point:</tt>
|
---|
1266 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1267 | — the vector to check against
|
---|
1268 |
|
---|
1269 | </li>
|
---|
1270 |
|
---|
1271 | </ul>
|
---|
1272 |
|
---|
1273 |
|
---|
1274 | <ul><b>Returns:</b>
|
---|
1275 |
|
---|
1276 | <li>
|
---|
1277 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> it is colinear, <tt>false</tt> otherwise
|
---|
1278 | </li>
|
---|
1279 |
|
---|
1280 | </ul>
|
---|
1281 |
|
---|
1282 |
|
---|
1283 |
|
---|
1284 | </div>
|
---|
1285 | </div>
|
---|
1286 | </div>
|
---|
1287 |
|
---|
1288 |
|
---|
1289 | <div id="isorthogonal-point" class="member">
|
---|
1290 | <div class="member-link">
|
---|
1291 | <a name="isorthogonal-point" href="#isorthogonal-point"><tt><b>isOrthogonal</b>(point)</tt></a>
|
---|
1292 | </div>
|
---|
1293 | <div class="member-description hidden">
|
---|
1294 | <div class="member-text">
|
---|
1295 | <p>Checks if the vector represented by this point is orthogonal
|
---|
1296 | (perpendicular) to another vector.</p>
|
---|
1297 |
|
---|
1298 | <ul><b>Parameters:</b>
|
---|
1299 |
|
---|
1300 | <li>
|
---|
1301 | <tt>point:</tt>
|
---|
1302 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1303 | — the vector to check against
|
---|
1304 |
|
---|
1305 | </li>
|
---|
1306 |
|
---|
1307 | </ul>
|
---|
1308 |
|
---|
1309 |
|
---|
1310 | <ul><b>Returns:</b>
|
---|
1311 |
|
---|
1312 | <li>
|
---|
1313 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> it is orthogonal, <tt>false</tt> otherwise
|
---|
1314 | </li>
|
---|
1315 |
|
---|
1316 | </ul>
|
---|
1317 |
|
---|
1318 |
|
---|
1319 |
|
---|
1320 | </div>
|
---|
1321 | </div>
|
---|
1322 | </div>
|
---|
1323 |
|
---|
1324 |
|
---|
1325 | <div id="iszero" class="member">
|
---|
1326 | <div class="member-link">
|
---|
1327 | <a name="iszero" href="#iszero"><tt><b>isZero</b>()</tt></a>
|
---|
1328 | </div>
|
---|
1329 | <div class="member-description hidden">
|
---|
1330 | <div class="member-text">
|
---|
1331 | <p>Checks if this point has both the x and y coordinate set to 0.</p>
|
---|
1332 |
|
---|
1333 |
|
---|
1334 | <ul><b>Returns:</b>
|
---|
1335 |
|
---|
1336 | <li>
|
---|
1337 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> both x and y are 0, <tt>false</tt> otherwise
|
---|
1338 | </li>
|
---|
1339 |
|
---|
1340 | </ul>
|
---|
1341 |
|
---|
1342 |
|
---|
1343 |
|
---|
1344 | </div>
|
---|
1345 | </div>
|
---|
1346 | </div>
|
---|
1347 |
|
---|
1348 |
|
---|
1349 | <div id="isnan" class="member">
|
---|
1350 | <div class="member-link">
|
---|
1351 | <a name="isnan" href="#isnan"><tt><b>isNaN</b>()</tt></a>
|
---|
1352 | </div>
|
---|
1353 | <div class="member-description hidden">
|
---|
1354 | <div class="member-text">
|
---|
1355 | <p>Checks if this point has an undefined value for at least one of its
|
---|
1356 | coordinates.</p>
|
---|
1357 |
|
---|
1358 |
|
---|
1359 | <ul><b>Returns:</b>
|
---|
1360 |
|
---|
1361 | <li>
|
---|
1362 | <tt><tt>Boolean</tt></tt> — <tt>true</tt> if either x or y are not a number, <tt>false</tt> otherwise
|
---|
1363 | </li>
|
---|
1364 |
|
---|
1365 | </ul>
|
---|
1366 |
|
---|
1367 |
|
---|
1368 |
|
---|
1369 | </div>
|
---|
1370 | </div>
|
---|
1371 | </div>
|
---|
1372 |
|
---|
1373 |
|
---|
1374 | <h3>Vector Math Functions</h3>
|
---|
1375 |
|
---|
1376 | <div id="dot-point" class="member">
|
---|
1377 | <div class="member-link">
|
---|
1378 | <a name="dot-point" href="#dot-point"><tt><b>dot</b>(point)</tt></a>
|
---|
1379 | </div>
|
---|
1380 | <div class="member-description hidden">
|
---|
1381 | <div class="member-text">
|
---|
1382 | <p>Returns the dot product of the point and another point.</p>
|
---|
1383 |
|
---|
1384 | <ul><b>Parameters:</b>
|
---|
1385 |
|
---|
1386 | <li>
|
---|
1387 | <tt>point:</tt>
|
---|
1388 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1389 |
|
---|
1390 |
|
---|
1391 | </li>
|
---|
1392 |
|
---|
1393 | </ul>
|
---|
1394 |
|
---|
1395 |
|
---|
1396 | <ul><b>Returns:</b>
|
---|
1397 |
|
---|
1398 | <li>
|
---|
1399 | <tt><tt>Number</tt></tt> — the dot product of the two points
|
---|
1400 | </li>
|
---|
1401 |
|
---|
1402 | </ul>
|
---|
1403 |
|
---|
1404 |
|
---|
1405 |
|
---|
1406 | </div>
|
---|
1407 | </div>
|
---|
1408 | </div>
|
---|
1409 |
|
---|
1410 |
|
---|
1411 | <div id="cross-point" class="member">
|
---|
1412 | <div class="member-link">
|
---|
1413 | <a name="cross-point" href="#cross-point"><tt><b>cross</b>(point)</tt></a>
|
---|
1414 | </div>
|
---|
1415 | <div class="member-description hidden">
|
---|
1416 | <div class="member-text">
|
---|
1417 | <p>Returns the cross product of the point and another point.</p>
|
---|
1418 |
|
---|
1419 | <ul><b>Parameters:</b>
|
---|
1420 |
|
---|
1421 | <li>
|
---|
1422 | <tt>point:</tt>
|
---|
1423 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1424 |
|
---|
1425 |
|
---|
1426 | </li>
|
---|
1427 |
|
---|
1428 | </ul>
|
---|
1429 |
|
---|
1430 |
|
---|
1431 | <ul><b>Returns:</b>
|
---|
1432 |
|
---|
1433 | <li>
|
---|
1434 | <tt><tt>Number</tt></tt> — the cross product of the two points
|
---|
1435 | </li>
|
---|
1436 |
|
---|
1437 | </ul>
|
---|
1438 |
|
---|
1439 |
|
---|
1440 |
|
---|
1441 | </div>
|
---|
1442 | </div>
|
---|
1443 | </div>
|
---|
1444 |
|
---|
1445 |
|
---|
1446 | <div id="project-point" class="member">
|
---|
1447 | <div class="member-link">
|
---|
1448 | <a name="project-point" href="#project-point"><tt><b>project</b>(point)</tt></a>
|
---|
1449 | </div>
|
---|
1450 | <div class="member-description hidden">
|
---|
1451 | <div class="member-text">
|
---|
1452 | <p>Returns the projection of the point on another point.</p>
|
---|
1453 | <p>Both points are interpreted as vectors.</p>
|
---|
1454 |
|
---|
1455 | <ul><b>Parameters:</b>
|
---|
1456 |
|
---|
1457 | <li>
|
---|
1458 | <tt>point:</tt>
|
---|
1459 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1460 |
|
---|
1461 |
|
---|
1462 | </li>
|
---|
1463 |
|
---|
1464 | </ul>
|
---|
1465 |
|
---|
1466 |
|
---|
1467 | <ul><b>Returns:</b>
|
---|
1468 |
|
---|
1469 | <li>
|
---|
1470 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the projection of the point on another point
|
---|
1471 | </li>
|
---|
1472 |
|
---|
1473 | </ul>
|
---|
1474 |
|
---|
1475 |
|
---|
1476 |
|
---|
1477 | </div>
|
---|
1478 | </div>
|
---|
1479 | </div>
|
---|
1480 |
|
---|
1481 |
|
---|
1482 | <h3>Math Functions</h3>
|
---|
1483 |
|
---|
1484 | <div id="round" class="member">
|
---|
1485 | <div class="member-link">
|
---|
1486 | <a name="round" href="#round"><tt><b>round</b>()</tt></a>
|
---|
1487 | </div>
|
---|
1488 | <div class="member-description hidden">
|
---|
1489 | <div class="member-text">
|
---|
1490 | <p>Returns a new point with rounded <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The
|
---|
1491 | object itself is not modified!</p>
|
---|
1492 |
|
---|
1493 |
|
---|
1494 | <ul><b>Returns:</b>
|
---|
1495 |
|
---|
1496 | <li>
|
---|
1497 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
---|
1498 | </li>
|
---|
1499 |
|
---|
1500 | </ul>
|
---|
1501 |
|
---|
1502 |
|
---|
1503 | <p>
|
---|
1504 | <b>Example</b>
|
---|
1505 | </p>
|
---|
1506 |
|
---|
1507 |
|
---|
1508 | <pre class="code">var point = new Point(10.2, 10.9);
|
---|
1509 | var roundPoint = point.round();
|
---|
1510 | console.log(roundPoint); // {x: 10, y: 11}</pre>
|
---|
1511 |
|
---|
1512 | </div>
|
---|
1513 | </div>
|
---|
1514 | </div>
|
---|
1515 |
|
---|
1516 |
|
---|
1517 | <div id="ceil" class="member">
|
---|
1518 | <div class="member-link">
|
---|
1519 | <a name="ceil" href="#ceil"><tt><b>ceil</b>()</tt></a>
|
---|
1520 | </div>
|
---|
1521 | <div class="member-description hidden">
|
---|
1522 | <div class="member-text">
|
---|
1523 | <p>Returns a new point with the nearest greater non-fractional values to the
|
---|
1524 | specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
|
---|
1525 | modified!</p>
|
---|
1526 |
|
---|
1527 |
|
---|
1528 | <ul><b>Returns:</b>
|
---|
1529 |
|
---|
1530 | <li>
|
---|
1531 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
---|
1532 | </li>
|
---|
1533 |
|
---|
1534 | </ul>
|
---|
1535 |
|
---|
1536 |
|
---|
1537 | <p>
|
---|
1538 | <b>Example</b>
|
---|
1539 | </p>
|
---|
1540 |
|
---|
1541 |
|
---|
1542 | <pre class="code">var point = new Point(10.2, 10.9);
|
---|
1543 | var ceilPoint = point.ceil();
|
---|
1544 | console.log(ceilPoint); // {x: 11, y: 11}</pre>
|
---|
1545 |
|
---|
1546 | </div>
|
---|
1547 | </div>
|
---|
1548 | </div>
|
---|
1549 |
|
---|
1550 |
|
---|
1551 | <div id="floor" class="member">
|
---|
1552 | <div class="member-link">
|
---|
1553 | <a name="floor" href="#floor"><tt><b>floor</b>()</tt></a>
|
---|
1554 | </div>
|
---|
1555 | <div class="member-description hidden">
|
---|
1556 | <div class="member-text">
|
---|
1557 | <p>Returns a new point with the nearest smaller non-fractional values to the
|
---|
1558 | specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
|
---|
1559 | modified!</p>
|
---|
1560 |
|
---|
1561 |
|
---|
1562 | <ul><b>Returns:</b>
|
---|
1563 |
|
---|
1564 | <li>
|
---|
1565 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
---|
1566 | </li>
|
---|
1567 |
|
---|
1568 | </ul>
|
---|
1569 |
|
---|
1570 |
|
---|
1571 | <p>
|
---|
1572 | <b>Example</b>
|
---|
1573 | </p>
|
---|
1574 |
|
---|
1575 |
|
---|
1576 | <pre class="code">var point = new Point(10.2, 10.9);
|
---|
1577 | var floorPoint = point.floor();
|
---|
1578 | console.log(floorPoint); // {x: 10, y: 10}</pre>
|
---|
1579 |
|
---|
1580 | </div>
|
---|
1581 | </div>
|
---|
1582 | </div>
|
---|
1583 |
|
---|
1584 |
|
---|
1585 | <div id="abs" class="member">
|
---|
1586 | <div class="member-link">
|
---|
1587 | <a name="abs" href="#abs"><tt><b>abs</b>()</tt></a>
|
---|
1588 | </div>
|
---|
1589 | <div class="member-description hidden">
|
---|
1590 | <div class="member-text">
|
---|
1591 | <p>Returns a new point with the absolute values of the specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a>
|
---|
1592 | and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not modified!</p>
|
---|
1593 |
|
---|
1594 |
|
---|
1595 | <ul><b>Returns:</b>
|
---|
1596 |
|
---|
1597 | <li>
|
---|
1598 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
---|
1599 | </li>
|
---|
1600 |
|
---|
1601 | </ul>
|
---|
1602 |
|
---|
1603 |
|
---|
1604 | <p>
|
---|
1605 | <b>Example</b>
|
---|
1606 | </p>
|
---|
1607 |
|
---|
1608 |
|
---|
1609 | <pre class="code">var point = new Point(-5, 10);
|
---|
1610 | var absPoint = point.abs();
|
---|
1611 | console.log(absPoint); // {x: 5, y: 10}</pre>
|
---|
1612 |
|
---|
1613 | </div>
|
---|
1614 | </div>
|
---|
1615 | </div>
|
---|
1616 |
|
---|
1617 | </div>
|
---|
1618 |
|
---|
1619 |
|
---|
1620 | <div class="reference-members"><h2>Static Methods</h2>
|
---|
1621 |
|
---|
1622 |
|
---|
1623 | <div id="min-point1-point2" class="member">
|
---|
1624 | <div class="member-link">
|
---|
1625 | <a name="min-point1-point2" href="#min-point1-point2"><tt><b>Point.min</b>(point1, point2)</tt></a>
|
---|
1626 | </div>
|
---|
1627 | <div class="member-description hidden">
|
---|
1628 | <div class="member-text">
|
---|
1629 | <p>Returns a new point object with the smallest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
|
---|
1630 | <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
|
---|
1631 |
|
---|
1632 | <ul><b>Parameters:</b>
|
---|
1633 |
|
---|
1634 | <li>
|
---|
1635 | <tt>point1:</tt>
|
---|
1636 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1637 |
|
---|
1638 |
|
---|
1639 | </li>
|
---|
1640 |
|
---|
1641 | <li>
|
---|
1642 | <tt>point2:</tt>
|
---|
1643 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1644 |
|
---|
1645 |
|
---|
1646 | </li>
|
---|
1647 |
|
---|
1648 | </ul>
|
---|
1649 |
|
---|
1650 |
|
---|
1651 | <ul><b>Returns:</b>
|
---|
1652 |
|
---|
1653 | <li>
|
---|
1654 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the newly created point object
|
---|
1655 | </li>
|
---|
1656 |
|
---|
1657 | </ul>
|
---|
1658 |
|
---|
1659 |
|
---|
1660 | <p>
|
---|
1661 | <b>Example</b>
|
---|
1662 | </p>
|
---|
1663 |
|
---|
1664 |
|
---|
1665 | <pre class="code">var point1 = new Point(10, 100);
|
---|
1666 | var point2 = new Point(200, 5);
|
---|
1667 | var minPoint = Point.min(point1, point2);
|
---|
1668 | console.log(minPoint); // {x: 10, y: 5}</pre>
|
---|
1669 |
|
---|
1670 | </div>
|
---|
1671 | </div>
|
---|
1672 | </div>
|
---|
1673 |
|
---|
1674 |
|
---|
1675 | <div id="max-point1-point2" class="member">
|
---|
1676 | <div class="member-link">
|
---|
1677 | <a name="max-point1-point2" href="#max-point1-point2"><tt><b>Point.max</b>(point1, point2)</tt></a>
|
---|
1678 | </div>
|
---|
1679 | <div class="member-description hidden">
|
---|
1680 | <div class="member-text">
|
---|
1681 | <p>Returns a new point object with the largest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
|
---|
1682 | <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
|
---|
1683 |
|
---|
1684 | <ul><b>Parameters:</b>
|
---|
1685 |
|
---|
1686 | <li>
|
---|
1687 | <tt>point1:</tt>
|
---|
1688 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1689 |
|
---|
1690 |
|
---|
1691 | </li>
|
---|
1692 |
|
---|
1693 | <li>
|
---|
1694 | <tt>point2:</tt>
|
---|
1695 | <a href="../classes/Point.html"><tt>Point</tt></a>
|
---|
1696 |
|
---|
1697 |
|
---|
1698 | </li>
|
---|
1699 |
|
---|
1700 | </ul>
|
---|
1701 |
|
---|
1702 |
|
---|
1703 | <ul><b>Returns:</b>
|
---|
1704 |
|
---|
1705 | <li>
|
---|
1706 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the newly created point object
|
---|
1707 | </li>
|
---|
1708 |
|
---|
1709 | </ul>
|
---|
1710 |
|
---|
1711 |
|
---|
1712 | <p>
|
---|
1713 | <b>Example</b>
|
---|
1714 | </p>
|
---|
1715 |
|
---|
1716 |
|
---|
1717 | <pre class="code">var point1 = new Point(10, 100);
|
---|
1718 | var point2 = new Point(200, 5);
|
---|
1719 | var maxPoint = Point.max(point1, point2);
|
---|
1720 | console.log(maxPoint); // {x: 200, y: 100}</pre>
|
---|
1721 |
|
---|
1722 | </div>
|
---|
1723 | </div>
|
---|
1724 | </div>
|
---|
1725 |
|
---|
1726 |
|
---|
1727 | <div id="random" class="member">
|
---|
1728 | <div class="member-link">
|
---|
1729 | <a name="random" href="#random"><tt><b>Point.random</b>()</tt></a>
|
---|
1730 | </div>
|
---|
1731 | <div class="member-description hidden">
|
---|
1732 | <div class="member-text">
|
---|
1733 | <p>Returns a point object with random <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values
|
---|
1734 | between <tt>0</tt> and <tt>1</tt>.</p>
|
---|
1735 |
|
---|
1736 |
|
---|
1737 | <ul><b>Returns:</b>
|
---|
1738 |
|
---|
1739 | <li>
|
---|
1740 | <tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the newly created point object
|
---|
1741 | </li>
|
---|
1742 |
|
---|
1743 | </ul>
|
---|
1744 |
|
---|
1745 |
|
---|
1746 | <p>
|
---|
1747 | <b>Example</b>
|
---|
1748 | </p>
|
---|
1749 |
|
---|
1750 |
|
---|
1751 | <pre class="code">var maxPoint = new Point(100, 100);
|
---|
1752 | var randomPoint = Point.random();
|
---|
1753 |
|
---|
1754 | // A point between {x:0, y:0} and {x:100, y:100}:
|
---|
1755 | var point = maxPoint * randomPoint;</pre>
|
---|
1756 |
|
---|
1757 | </div>
|
---|
1758 | </div>
|
---|
1759 | </div>
|
---|
1760 |
|
---|
1761 | </div>
|
---|
1762 |
|
---|
1763 |
|
---|
1764 |
|
---|
1765 | <!-- =========================== copyright notice ========================= -->
|
---|
1766 | <p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
---|
1767 | <div class="content-end"></div>
|
---|
1768 |
|
---|
1769 | </body> |
---|