3

この関数を使用してマウス座標をキャンバス上の座標に変換していますが、下にスクロールしてから上にスクロールすると、キャンバス上のマウスの位置が一致しないことがあります。関数は次のとおりです。

function getMousePos(x, y) {
        var rect = document.getElementById("canvas").getBoundingClientRect();
        return {
        x: x - rect.left,
        y: y - rect.top
        };
    }
4

2 に答える 2

3

キャンバスで mousemove を使用していない場合は、次を使用します。

$(function () { 
canvas = document.getElementById('canvas');
canvas.onmousemove = mousePos;
 });

function mousePos(e) {
    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}
于 2013-06-02T14:21:18.950 に答える
1

私はちょうど似たようなことをしました。水平スクロールは考慮していません。これが役立つことを願っています。

onmousemove="cnvs_getCoordinates(event)"html タグ内に追加します。次に、JavaScriptファイルで：

function cnvs_getCoordinates(e)
{
    var offsetOfBox = document.getElementById('canvas').offset();

    x = e.clientX - offsetOfBox.left;
    y = e.clientY - offsetOfBox.top + $(window).scrollTop();
}

変数 x と y はキャンバス上の座標です。私の関数の唯一の悪い点は、マウスが動かされたときにのみ実行されることです。しかし、数学は同じです。

于 2013-06-02T14:48:17.167 に答える