퍼펙 팅 캔버스 마우스 좌표

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