1

我很久以前制作了一个 jsfiddle 来演示如何缩放到中心（http://jsfiddle.net/Y69nm/1/）。现在我想缩放到给定点（光标），就像 googleMap 一样，但不知道该怎么做。我将实际的鼠标坐标发送到处理缩放的函数。

这是小提琴：http: //jsfiddle.net/Y69nm/3/

这是缩放功能：

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);
}
4

1 回答 1

3

我可以让你更接近一点：

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

这是您更新的小提琴。它会缩放到某个点，但是，一旦缩放，如果您移动到另一个点并缩放它就会跳跃。

更新（2012 年 4 月 30 日）：因为我也需要这个，所以我进一步研究它以消除缩放到另一个点时的跳跃。这是Fiddle再次更新的一个更完整的解决方案。

于 2013-04-26T18:13:58.267 回答