StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Credits:</strong> On the <a href="http://raphaeljs.com/polar-clock.html" rel="nofollow noreferrer">raphael website</a> there is an example that uses arcs. There is another question on stackoverflow with a similar topic: <a href="https://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js">drawing centered arcs in raphael js</a>. The accepted answer there has a simplified and commented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: <a href="http://jsfiddle.net/Bzdnm/2/" rel="nofollow noreferrer">http://jsfiddle.net/Bzdnm/2/</a></p> <p><em>So what I did</em>: I took the code from the <a href="https://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js">linked question</a>, combined it with <a href="https://github.com/DmitryBaranovskiy/eve" rel="nofollow noreferrer">eve</a>, another javascript library made by the <a href="http://dmitry.baranovskiy.com/" rel="nofollow noreferrer">creator</a> of RaphaelJS and what I got was this: <a href="http://jsfiddle.net/cristighenea/aP7MK/" rel="nofollow noreferrer">http://jsfiddle.net/cristighenea/aP7MK/</a></p> <p>At a glance:</p> <p>1.after the arc is created we rotate it 180 degrees and begin animating it:</p> <pre><code>theArc.rotate(180, 100, 100).animate({ arc: [100, 100, amount, 100, 40] }, 1900, function(){ //animation finish callback goes here }); </code></pre> <p>2.using eve we bind an event to *raphael.anim.frame.**</p> <p>3.each time the event is fired we update the text in the middle with the new value of the arc</p> <p>If you have any questions let me know</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