0

ag 要素コンテナーを含む svg マップがあります。g 要素内には、x、y 位置のアイテムがあります。

マウスの下のオブジェクトが常にマウスの下になるように、g 要素をパンするマウス ホイール ズームを実装しようとしています。Google マップがマウス ホイールでズームするときにマップをパンして、マウスの位置にズームするのと似ています。

私はすべての検索を使い果たし、マウスの位置と g 要素の位置を計算するためにさまざまな方法を試しました。

私はもう試した：

var xPan = (mouse.x - (matrix.scale * mouse.x)) - matrix.panX;
var yPan = (mouse.y - (matrix.scale * mouse.y)) - matrix.panY;
pan(xPan, yPan);
4

1 に答える 1

0

少し前に同様の問題がありましたが、キャンバスを使用しているという違いがありますが、svg を使用して変換行列を保存しているため、コードの必要な部分を投稿すると役立つ場合があります。

window.transform = svg.createSVGMatrix();
window.pt = svg.createSVGPoint();

transformedPoint = function (x, y) {
    window.pt.x = x; window.pt.y = y;
    return pt.matrixTransform(window.transform.inverse());
}

translate = function(dx, dy) {
    window.transform = window.transform.translate(dx, dy);
}

scale = function (scaleX, scaleY) {
    window.transform = window.transform.scaleNonUniform(scaleX, scaleY);
};

zoom = function (scaleX, scaleY, x, y) { //use real x and y i.e. mouseposition on element
    var p = transformedPoint(x, y);
    translate(x, y);
    scale(scaleX, scaleY);
    translate(-x, -y);
}

このコードの一部を使用して、それが機能することを願っています

Phrogz のクレジットと彼の優れた例はこちら: https://stackoverflow.com/a/5527449/1293849

于 2013-03-26T19:51:21.950 に答える