Question

我有一个带有g元素容器的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);

Answer 1

前段时间我遇到了类似的问题，不同之处在于我使用的是canvas，但是因为我使用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

变换矩阵

1 个答案: