IE、PanZoom的缩放上的光标位置

Question

我正在使用Panzoom.js插件来平移和缩放元素。有一个应用于光标的遮罩，光标在其悬停在图像上的任何位置都会显示底层图像的一部分(想象一下在彩色图像顶部的黑白图像，光标会在光标悬停在图像上的任何位置显示彩色图像的一部分)。当我在Chrome和Safari中放大图像(使用Panzoom)时，鼠标坐标被正确地给出，因此蒙版与光标正确地对齐。然而，在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
    };
}