javascript - IE、PanZoom 缩放时的光标位置

Question

我正在使用 Panzoom.js 插件来平移和缩放元素。光标上应用了一个 mask ，光标悬停在图像上的任何位置都会显示底层图像的一部分(想象一下彩色图像顶部的黑白图像，光标将显示彩色图像的一部分)光标悬停在图像上)。当我在 Chrome 和 Safari 中放大图像(使用 Panzoom)时，鼠标坐标会正确给出，因此 mask 与光标正确对齐。但是，在 Firefox 和 IE 中，放大光标坐标时不正确，因此悬停蒙版无法与光标正确对齐。我错过了一些明显的东西吗？感谢您查看这个。下面是代码。

var svg = document.querySelector("svg");
var pt = svg.createSVGPoint();

function cursorPoint(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
}

function getCanvasCoords(x, y) {
    var matrix = $panzoom.panzoom("getMatrix");

    var calc_x = x * (1 / matrix[0]);
    var calc_y = y * (1 / matrix[3]);

    return {
        x: calc_x,
        y: calc_y
    };
}

$("#parentID").mousemove(function (event) {
    event.preventDefault();
    var loc = cursorPoint(event);

    var img = document.getElementById("parentID");
    var imgPos = img.getBoundingClientRect();

    var x = loc.x - imgPos.left;
    var y = loc.y - imgPos.top;
    var coords = getCanvasCoords(x, y);

    primaryCircle.setAttribute("cy", (coords.y) + "px");
    primaryCircle.setAttribute("cx", (coords.x) + "px");
});

Answer 1

使用Math.round

function getCanvasCoords(x, y) {
    var matrix = $panzoom.panzoom("getMatrix");

    var calc_x = x * Math.round((1 / matrix[0]));
    var calc_y = y * Math.round(1 / matrix[3]); 

    return {
        x: calc_x,
        y: calc_y
    };
}