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

Use 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 }; }

光标位置缩放为IE，PanZoom

1 个答案: