StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For anybody (like me) who wanted to have the zooming & panning smoothly animated have a look here: </p> <p><a href="https://groups.google.com/forum/?fromgroups#!topic/raphaeljs/7eA9xq4enDo">https://groups.google.com/forum/?fromgroups#!topic/raphaeljs/7eA9xq4enDo</a></p> <p>this snipped helped me to automate and animate zooming and panning to a specific point on the canvas. (Props to <a href="https://plus.google.com/100959992193914915762">Will Morgan</a>)</p> <pre><code>Raphael.fn.animateViewBox = function(currentViewBox, viewX, viewY, width, height, duration, callback) { duration = duration || 250; var originals = currentViewBox, //current viewBox Data from where the animation should start differences = { x: viewX - originals.x, y: viewY - originals.y, width: width - originals.width, height: height - originals.height }, delay = 13, stepsNum = Math.ceil(duration / delay), stepped = { x: differences.x / stepsNum, y: differences.y / stepsNum, width: differences.width / stepsNum, height: differences.height / stepsNum }, i, canvas = this; /** * Using a lambda to protect a variable with its own scope. * Otherwise, the variable would be incremented inside the loop, but its * final value would be read at run time in the future. */ function timerFn(iterator) { return function() { canvas.setViewBox( originals.x + (stepped.x * iterator), originals.y + (stepped.y * iterator), originals.width + (stepped.width * iterator), originals.height + (stepped.height * iterator) ); // Run the callback as soon as possible, in sync with the last step if(iterator == stepsNum && callback) { callback(viewX, viewY, width, height); } } } // Schedule each animation step in to the future // Todo: use some nice easing for(i = 1; i <= stepsNum; ++i) { setTimeout(timerFn(i), i * delay); } } </code></pre>

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