Databases
StackOverflow2013
Postsdbo
POdrag constraints in raphael.js and zoom
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdrag constraints in raphael.js and zoom
    text
    copied!<p>I've had no problem getting a basic zoom/pan effect with Raphael.js 2.0 using PAN :</p> <pre><code>set = ( // set of elements, contained in a rectangle) var start = function () { set.oBB = set.getBBox(); }, move = function (dx, dy) { var bb = set.getBBox(); set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy); }, up = function() { // do stuff }; set.drag(move, start, up); </code></pre> <p>and ZOOM :</p> <pre><code>//before paper.setViewBox(0,0, 500,500, false); //after paper.setViewBox(0,0, 200, 200, false); </code></pre> <p>BUT I'm having two big problems with this. This is for a raphael-created svg object and not for an image...</p> <ul> <li>First, panning AFTER the zoom is not 'smooth' : I drag a little and the rectangle moves a lot. The movement gets worse the farther I go along. Can I scale the drag somehow when I have zoomed?</li> <li>Second, how do I arrange so that the panning the zoomed rectangle doesn't let me move it out of the viewport? In jquery I could do this with a constraint, and I've tried playing with the set.translate function above to include constraints but I'm getting nowhere...</li> </ul> <p>Any advice would be appreciated, or else a library which already exists for doing this in Raphael.js? I looked at raphael-spz which doesn't seem to address either of my problems above.</p> <p>What I'd like is basically this <a href="http://dannyvankooten.com/demo/draggable-image-map-with-zoom/" rel="nofollow">http://dannyvankooten.com/demo/draggable-image-map-with-zoom/</a> but for Raphael. He's using jquery ui draggable... which I can't seem to get to work in Raphael.</p> <p>Thanks!</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