source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/Segment.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: 11.8 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Segment</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>Segment</h1>
16
17<p>The Segment object represents the points of a path through which its
18<a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through
19its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
20<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and
21optionaly an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and
22<a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a>
23objects that are connected by this segment.</p>
24
25</div>
26
27<!-- ============================== constructors ========================= -->
28<div class="reference-members"><h2>Constructors</h2>
29
30
31<div id="segment" class="member">
32<div class="member-link">
33<a name="segment" href="#segment"><tt><b>Segment</b>([point[, handleIn[, handleOut]]])</tt></a>
34</div>
35<div class="member-description hidden">
36<div class="member-text">
37<p>Creates a new Segment object.</p>
38
39<ul><b>Parameters:</b>
40
41<li>
42<tt>point:</tt>
43<a href="../classes/Point.html"><tt>Point</tt></a>
44&mdash;&nbsp;the anchor point of the segment
45&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
46</li>
47
48<li>
49<tt>handleIn:</tt>
50<a href="../classes/Point.html"><tt>Point</tt></a>
51&mdash;&nbsp;the handle point relative to the
52 anchor point of the segment that describes the in tangent of the
53 segment.
54&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
55</li>
56
57<li>
58<tt>handleOut:</tt>
59<a href="../classes/Point.html"><tt>Point</tt></a>
60&mdash;&nbsp;the handle point relative to the
61 anchor point of the segment that describes the out tangent of the
62 segment.
63&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
64</li>
65
66</ul>
67
68
69<p>
70<b>Example</b>
71</p>
72
73<div class="paperscript split">
74
75<div class="buttons">
76<div class="button run">Run</div>
77</div>
78
79<script type="text/paperscript" canvas="canvas-0">
80var handleIn = new Point(-80, -100);
81var handleOut = new Point(80, 100);
82
83var firstPoint = new Point(100, 50);
84var firstSegment = new Segment(firstPoint, null, handleOut);
85
86var secondPoint = new Point(300, 50);
87var secondSegment = new Segment(secondPoint, handleIn, null);
88
89var path = new Path(firstSegment, secondSegment);
90path.strokeColor = 'black';
91</script>
92<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
93</div>
94
95
96
97</div>
98</div>
99</div>
100
101
102<div id="segment-object" class="member">
103<div class="member-link">
104<a name="segment-object" href="#segment-object"><tt><b>Segment</b>(object)</tt></a>
105</div>
106<div class="member-description hidden">
107<div class="member-text">
108<p>Creates a new Segment object.</p>
109
110<ul><b>Parameters:</b>
111
112<li>
113<tt>object:</tt>
114<tt>Object</tt>
115&mdash;&nbsp;an object literal containing properties to
116be set on the segment.
117
118</li>
119
120</ul>
121
122
123<p>
124<b>Example</b> &mdash; Creating segments using object notation:
125</p>
126
127<div class="paperscript split">
128
129<div class="buttons">
130<div class="button run">Run</div>
131</div>
132
133<script type="text/paperscript" canvas="canvas-1">
134var firstSegment = new Segment({
135 point: [100, 50],
136 handleOut: [80, 100]
137});
138
139var secondSegment = new Segment({
140 point: [300, 50],
141 handleIn: [-80, -100]
142});
143
144var path = new Path({
145 segments: [firstSegment, secondSegment],
146 strokeColor: 'black'
147});
148</script>
149<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
150</div>
151
152
153
154</div>
155</div>
156</div>
157
158</div>
159
160
161
162
163
164 <div class="reference-members"><h2>Properties</h2>
165
166
167<div id="point" class="member">
168<div class="member-link">
169<a name="point" href="#point"><tt><b>point</b></tt></a>
170</div>
171<div class="member-description hidden">
172
173<div class="member-text">
174 <p>The anchor point of the segment.</p>
175
176
177 <ul><b>Type:</b>
178 <li>
179 <a href="../classes/Point.html"><tt>Point</tt></a>
180 </li>
181 </ul>
182
183
184</div>
185
186</div>
187</div>
188
189
190<div id="handlein" class="member">
191<div class="member-link">
192<a name="handlein" href="#handlein"><tt><b>handleIn</b></tt></a>
193</div>
194<div class="member-description hidden">
195
196<div class="member-text">
197 <p>The handle point relative to the anchor point of the segment that
198describes the in tangent of the segment.</p>
199
200
201 <ul><b>Type:</b>
202 <li>
203 <a href="../classes/Point.html"><tt>Point</tt></a>
204 </li>
205 </ul>
206
207
208</div>
209
210</div>
211</div>
212
213
214<div id="handleout" class="member">
215<div class="member-link">
216<a name="handleout" href="#handleout"><tt><b>handleOut</b></tt></a>
217</div>
218<div class="member-description hidden">
219
220<div class="member-text">
221 <p>The handle point relative to the anchor point of the segment that
222describes the out tangent of the segment.</p>
223
224
225 <ul><b>Type:</b>
226 <li>
227 <a href="../classes/Point.html"><tt>Point</tt></a>
228 </li>
229 </ul>
230
231
232</div>
233
234</div>
235</div>
236
237
238<div id="linear" class="member">
239<div class="member-link">
240<a name="linear" href="#linear"><tt><b>linear</b></tt></a>
241</div>
242<div class="member-description hidden">
243
244<div class="member-text">
245 <p>Specifies whether the segment has no handles defined, meaning it connects
246two straight lines.</p>
247
248
249 <ul><b>Type:</b>
250 <li>
251 <a href="../classes/Point.html"><tt>Point</tt></a>
252 </li>
253 </ul>
254
255
256</div>
257
258</div>
259</div>
260
261
262<div id="selected" class="member">
263<div class="member-link">
264<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
265</div>
266<div class="member-description hidden">
267
268<div class="member-text">
269 <p>Specifies whether the <a href="../classes/Segment.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a> of the segment is selected.</p>
270
271
272 <ul><b>Type:</b>
273 <li>
274 <tt>Boolean</tt>
275 </li>
276 </ul>
277
278 <p>
279<b>Example</b>
280</p>
281
282<div class="paperscript split">
283
284<div class="buttons">
285<div class="button run">Run</div>
286</div>
287
288<script type="text/paperscript" canvas="canvas-2">
289var path = new Path.Circle({
290 center: [80, 50],
291 radius: 40
292});
293
294// Select the third segment point:
295path.segments[2].selected = true;
296</script>
297<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
298</div>
299
300
301</div>
302
303</div>
304</div>
305
306
307 <h3>Hierarchy</h3>
308
309<div id="index" class="member">
310<div class="member-link">
311<a name="index" href="#index"><tt><b>index</b></tt></a>
312</div>
313<div class="member-description hidden">
314
315<div class="member-text">
316 <p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
317segment belongs to.</p>
318
319 <p>Read only.</p>
320
321
322 <ul><b>Type:</b>
323 <li>
324 <tt>Number</tt>
325 </li>
326 </ul>
327
328
329</div>
330
331</div>
332</div>
333
334
335<div id="path" class="member">
336<div class="member-link">
337<a name="path" href="#path"><tt><b>path</b></tt></a>
338</div>
339<div class="member-description hidden">
340
341<div class="member-text">
342 <p>The path that the segment belongs to.</p>
343
344 <p>Read only.</p>
345
346
347 <ul><b>Type:</b>
348 <li>
349 <a href="../classes/Path.html"><tt>Path</tt></a>
350 </li>
351 </ul>
352
353
354</div>
355
356</div>
357</div>
358
359
360<div id="curve" class="member">
361<div class="member-link">
362<a name="curve" href="#curve"><tt><b>curve</b></tt></a>
363</div>
364<div class="member-description hidden">
365
366<div class="member-text">
367 <p>The curve that the segment belongs to.</p>
368
369 <p>Read only.</p>
370
371
372 <ul><b>Type:</b>
373 <li>
374 <a href="../classes/Curve.html"><tt>Curve</tt></a>
375 </li>
376 </ul>
377
378
379</div>
380
381</div>
382</div>
383
384
385<div id="location" class="member">
386<div class="member-link">
387<a name="location" href="#location"><tt><b>location</b></tt></a>
388</div>
389<div class="member-description hidden">
390
391<div class="member-text">
392 <p>The curve location that describes this segment's position ont the path.</p>
393
394 <p>Read only.</p>
395
396
397 <ul><b>Type:</b>
398 <li>
399 <a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
400 </li>
401 </ul>
402
403
404</div>
405
406</div>
407</div>
408
409
410 <h3>Sibling Segments</h3>
411
412<div id="next" class="member">
413<div class="member-link">
414<a name="next" href="#next"><tt><b>next</b></tt></a>
415</div>
416<div class="member-description hidden">
417
418<div class="member-text">
419 <p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment
420belongs to. If the segments belongs to a closed path, the first segment
421is returned for the last segment of the path.</p>
422
423 <p>Read only.</p>
424
425
426 <ul><b>Type:</b>
427 <li>
428 <a href="../classes/Segment.html"><tt>Segment</tt></a>
429 </li>
430 </ul>
431
432
433</div>
434
435</div>
436</div>
437
438
439<div id="previous" class="member">
440<div class="member-link">
441<a name="previous" href="#previous"><tt><b>previous</b></tt></a>
442</div>
443<div class="member-description hidden">
444
445<div class="member-text">
446 <p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
447segment belongs to. If the segments belongs to a closed path, the last
448segment is returned for the first segment of the path.</p>
449
450 <p>Read only.</p>
451
452
453 <ul><b>Type:</b>
454 <li>
455 <a href="../classes/Segment.html"><tt>Segment</tt></a>
456 </li>
457 </ul>
458
459
460</div>
461
462</div>
463</div>
464
465 </div>
466
467
468
469<!-- ============================== methods ================================ -->
470 <div class="reference-members"><h2>Methods</h2>
471
472
473<div id="iscolinear-segment" class="member">
474<div class="member-link">
475<a name="iscolinear-segment" href="#iscolinear-segment"><tt><b>isColinear</b>(segment)</tt></a>
476</div>
477<div class="member-description hidden">
478<div class="member-text">
479 <p>Returns true if the the two segments are the beggining of two lines and
480if these two lines are running parallel.</p>
481
482<ul><b>Parameters:</b>
483
484<li>
485<tt>segment:</tt>
486
487
488
489</li>
490
491</ul>
492
493
494
495
496</div>
497</div>
498</div>
499
500
501<div id="isarc" class="member">
502<div class="member-link">
503<a name="isarc" href="#isarc"><tt><b>isArc</b>()</tt></a>
504</div>
505<div class="member-description hidden">
506<div class="member-text">
507 <p>Returns true if the segment at the given index is the beginning of an
508orthogonal arc segment. The code looks at the length of the handles and
509their relation to the distance to the imaginary corner point. If the
510relation is kappa, then it's an arc.</p>
511
512
513
514
515</div>
516</div>
517</div>
518
519
520<div id="reverse" class="member">
521<div class="member-link">
522<a name="reverse" href="#reverse"><tt><b>reverse</b>()</tt></a>
523</div>
524<div class="member-description hidden">
525<div class="member-text">
526 <p>Returns the reversed the segment, without modifying the segment itself.</p>
527
528
529 <ul><b>Returns:</b>
530
531 <li>
532<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the reversed segment
533</li>
534
535 </ul>
536
537
538
539</div>
540</div>
541</div>
542
543
544<div id="remove" class="member">
545<div class="member-link">
546<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
547</div>
548<div class="member-description hidden">
549<div class="member-text">
550 <p>Removes the segment from the path that it belongs to.</p>
551
552
553
554
555</div>
556</div>
557</div>
558
559
560<div id="tostring" class="member">
561<div class="member-link">
562<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
563</div>
564<div class="member-description hidden">
565<div class="member-text">
566
567
568
569 <ul><b>Returns:</b>
570
571 <li>
572<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the segment
573</li>
574
575 </ul>
576
577
578
579</div>
580</div>
581</div>
582
583 </div>
584
585
586
587
588<!-- =========================== copyright notice ========================= -->
589<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>
590<div class="content-end"></div>
591
592</body>
Note: See TracBrowser for help on using the repository browser.