1

我正在使用 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");
});
4

1 回答 1

0

使用 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
    };
}
于 2015-10-31T00:17:10.110 回答