StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can find a point along a path with <code>path.getPointAt(offset)</code> where <code>offset</code> is measured in points along the length of the path. If you can calculate the position of a slider along its track, you can multiply that by the path.length to get an offset.</p> <p>You can do this with an HTML slider or with a canvas element, as shown here:</p> <pre><code>// vars var point1 = [0, 100]; var point2 = [120, 100]; var point3 = [120, 150]; // draw the line var path = new Path(); path.add(new Point(point1), new Point(point2), new Point(point3)); path.strokeColor = "#FFF"; path.closed = true; // draw the circle var circle = new Path.Circle(0,100,4); circle.strokeColor = "#FFF"; // slider var sliderLine = new Path(new Point(10,30.5), new Point(210, 30.5)); sliderLine.strokeColor = '#FFF'; var sliderKnob = new Path.Circle(new Point(10,30.5), 5); sliderKnob.fillColor = '#FFF'; var sliderHit = false; function onMouseDown(event) { if (event.item == sliderKnob) sliderHit = true; } function onMouseDrag(event) { if (sliderHit === true) { if (event.point.x > 10 && event.point.x < 210) { sliderKnob.position.x = event.point.x; } else if (event.point.x < 11) { sliderKnob.position.x = 10; } else if (event.point.x > 209) { sliderKnob.position.x = 210; } // Get offset and set circle position var percent = ( sliderKnob.position.x - 10 ) / 200; circle.position = path.getPointAt(path.length * percent); } } function onMouseUp(event) { sliderHit = false; } </code></pre> <p>jsfiddle: <a href="http://jsfiddle.net/J9xgY/13/" rel="nofollow">http://jsfiddle.net/J9xgY/13/</a></p> <p>Click and drag the filled circle along the line to move the circle along the triangle.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload