完善畫布鼠標座標

Question

我正在研究一個我可以用來獲取畫布座標的函數。 工作得很好，直到部分畫布在屏幕上不可見。

當我使窗口變小，滾動到右下角時，它似乎從畫布的可見部分開始。我如何解決這個問題以獲得正確的座標？

這裏是我的代碼：

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); 

}

Answer 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); 
});