0

キャンバス座標を取得するために使用できる関数に取り組んでいます。キャンバスの一部が画面に表示されなくなるまで、うまく機能します。

ウィンドウを小さくして右下隅までスクロールすると、キャンバスの表示部分から始まるようです。これを修正して正しい座標を取得するにはどうすればよいですか?

これが私のコードです：

function getMousePosition(event) {
var MX = new Number();
var MY = new Number();

if (event.x != undefined && event.y != undefined) {
    MX = event.x;
    MY = event.y;
}
else { // Firefox method to get the position
    MX = event.clientX + document.body.scrollLeft +
    document.documentElement.scrollLeft;
    MY = event.clientY + document.body.scrollTop +
    document.documentElement.scrollTop;
}
MX -= canvas.offsetLeft;
MY -= canvas.offsetTop;
alert("x: " + MX + "  y: " + MY);

}

4

1 に答える 1

1

キャンバス座標を取得するために使用する関数は次のとおりです。

function getCanvasPos(el) {
    var canvas = document.getElementById(el);
    var _x = canvas.offsetLeft;
    var _y = canvas.offsetTop;

    while(canvas = canvas.offsetParent) {
        _x += canvas.offsetLeft - canvas.scrollLeft;
        _y += canvas.offsetTop - canvas.scrollTop;
    }

    return {
        left : _x,
        top : _y
    }
};

...そして、ここにマウス座標の関数があります

function mousePos(e) {

    var mouseX = e.clientX - getCanvasPos(e.target).left + window.pageXOffset;
    var mouseY = e.clientY - getCanvasPos(e.target).top + window.pageYOffset;
    return {
        x : mouseX,
        y : mouseY
    };
};

マウス イベント リスナーは次のようになります。

canvas.addEventListener('mousemove', function(e){
    console.log(canvas.mousePos(e).x);
});
于 2012-07-12T06:57:12.330 に答える