RaphaelJs ViewBox zoom to point

Question

I made a jsfiddle long time ago to demonstrate how to zoom to center (http://jsfiddle.net/Y69nm/1/). now i want to zoom to a given point (cursor), just like googleMap, but no idea how to do. I send the actual mouse coordinate to the function which handels the zoom.

here is the fiddle: http://jsfiddle.net/Y69nm/3/

and here is the function for zooming:

function handle(delta, mousex, mousey) {

    if (delta < 0) {
        viewBoxWidth *= 0.95;
        viewBoxHeight *= 0.95;
    } else {
        viewBoxWidth *= 1.05;
        viewBoxHeight *= 1.05;
    }
    scale = paper.width / viewBoxWidth ;
    console.log(scale);
    // zoom to center
    x = (paper.width / 2) - (viewBoxWidth / 2);
    y = (paper.height / 2) - (viewBoxHeight / 2);
    // i try to zoom to mouse cursor
    var moveX = (mousex - (mousex * scale));
    var moveY = (mousey - (mousey * scale)); 
    x = 0 - moveX;
    y = 0 - moveY;
    paper.setViewBox(x, y, viewBoxWidth, viewBoxHeight);
}

ezanker · Accepted Answer · 2013-04-30T20:53:09.327

I can get you a little closer:

        x = 0 - moveX / scale;
        y = 0 - moveY / scale;

Here is your updated fiddle. It zooms to point, however, once zoomed, if you move to another point and zoom it jumps.

UPDATE (4-30-2012): As I needed this too, I worked on it further to eliminate the jumpiness when zooming to another point. Here is the Fiddle updated one more time with a more complete solution.

RaphaelJs ViewBox zoom to point

1 Answers1