이상한 마우스 이벤트 위치 문제

Question

마우스 이벤트 위치를 반환하는 함수가 있습니다.

// returns the xy point where the mouse event was occured. 
function getXY(ev){ 
var xypoint = new Point(); 
if (ev.layerX || ev.layerY) { // Firefox 
    xypoint.x = ev.layerX; 
    xypoint.y = ev.layerY; 
} else if (ev.offsetX || ev.offsetX == 0) { // Opera 
    xypoint.x = ev.offsetX; 
    xypoint.y = ev.offsetY; 
} 
return xypoint; 
} 

html5 캔버스에서 그림을 그리기 위해 마우스 이벤트를 캡처하고 있습니다. 때로는 xpoint에 대한 -ve 값을 얻습니다. 방화 광을 사용하여 응용 프로그램을 디버깅 할 때 정말 이상한 행동을하고 있습니다. 예를 들어 조건 (xypoint.x < 0 || xypoint.y < 0)으로이 함수의 4 번째 줄에 중단 점을 넣으면 중단 점에서 멈춰서 그 layer.x, layer.y를 볼 수 있습니다. 긍정적이고 정확했습니다. 그러나 xypoint.x 또는 xypoint.y는 음수입니다. firbug 콘솔을 사용하여 값을 재 지정하면 xypoint에서 올바른 값을 얻게됩니다. 아무도 내게 무슨 일이 일어나는지 설명 할 수 있겠 어.

정상적인 속도로 마우스를 움직이면 위의 동작이 잘됩니다. 마우스를 매우 빠른 속도로 움직이는 경우이 동작이 발생합니다. 마우스 위치를 처리

감사

Answer 1

캔버스에 절대 고통이었다. 당신은 많은 조정을해야합니다.

getCurrentMousePosition = function(e) { 
    // Take mouse position, subtract element position to get relative position. 
    if (document.layers) { 
    xMousePos = e.pageX; 
    yMousePos = e.pageY; 
    xMousePosMax = window.innerWidth+window.pageXOffset; 
    yMousePosMax = window.innerHeight+window.pageYOffset; 
    } else if (document.all) { 
    xMousePos = window.event.x+document.body.scrollLeft; 
    yMousePos = window.event.y+document.body.scrollTop; 
    xMousePosMax = document.body.clientWidth+document.body.scrollLeft; 
    yMousePosMax = document.body.clientHeight+document.body.scrollTop; 
    } else if (document.getElementById) { 
    xMousePos = e.pageX; 
    yMousePos = e.pageY; 
    xMousePosMax = window.innerWidth+window.pageXOffset; 
    yMousePosMax = window.innerHeight+window.pageYOffset; 
    } 
    elPos = getElementPosition(document.getElementById("cvs")); 
    xMousePos = xMousePos - elPos.left; 
    yMousePos = yMousePos - elPos.top; 
    return {x: xMousePos, y: yMousePos}; 
} 

getElementPosition = function(el) { 
    var _x = 0, 
     _y = 0; 

    if(document.body.style.marginLeft == "" && document.body.style.marginRight == "") { 
    _x += (window.innerWidth - document.body.offsetWidth)/2; 
    } 

    if(el.offsetParent != null) while(1) { 
    _x += el.offsetLeft; 
    _y += el.offsetTop; 
    if(!el.offsetParent) break; 
    el = el.offsetParent; 
    } else if(el.x || el.y) { 
    if(el.x) _x = el.x; 
    if(el.y) _y = el.y; 
    } 
    return { top: _y, left: _x }; 
} 

도덕을 이야기 : 나는 몇 가지 사소한 오류를 가지고 있지만, 심지어 내가 내 응용 프로그램에서 사용하는 드래그 앤 드롭 된 div와 함께 작동하는이를 사용할 수 있습니까? 적절한 결과를 얻으려면 캔버스의 오프셋을 계산해야합니다. 이벤트에서 XY를 캡처하고 있는데, 윈도우의 XY와 관련하여 캡처되지 않은 오프셋이 있습니다. 이해가 되니?