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日）：これも必要だったので、別のポイントにズームするときのジャンプをなくすために、さらに作業を進めました。これが、より完全なソリューションでもう一度更新されたフィドルです。

于 2013-04-26T18:13:58.267 に答える