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 に答える