Firefox에서 캔버스에 마우스 위치 가져 오기

Question

(마우스 이동 이벤트에서) 캔버스를 기준으로 X, Y 좌표를 가져오고 싶습니다. 내가 이것을 사용하고

:

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300> 

JS :

이

function xy(e) 
{ 
    x = e.offsetX||e.layerX; 
    y = e.offsetY||e.layerY; 
} 

이 크롬에서 잘 작동하지만 파이어 폭스에서 해달라고. 캔버스 요소가 0,0 위치에 있으면 Firefox에서도 작동합니다. http://jsbin.com/ozowaz/10

내가 너무 FF에서 작업하기 위해 수행 할 수

이 한 번 봐?

Answer 1

컨테이너는

position: relative; 

스타일이 있어야합니다. 좌표로 + n px (n = boder 크기)를 의미하기 때문에이 컨테이너를 스타일 경계선으로 사용하지 마십시오!

덕분에 : http://dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

당신은 그것을 계산을 시도 할 수 있습니다 : 캔버스 캔버스 DOM 요소입니다

// ... 
var x = e.pageX - canvas.offsetTop; 

합니다. FF로 작동해야합니다.

Answer 3

이 나를 위해 일한 (순수 JS)

function getX(event, canvas){ 
    if(event.offsetX){ 
     return event.offsetX; 
    } 
    if(event.clientX){ 
    return event.clientX - canvas.offsetLeft; 
    } 
    return null; 
} 

function getY(event, canvas){ 
    if(event.offsetY){//chrome and IE 
     return event.offsetY; 
    } 
    if(event.clientY){// FF 
     return event.clientY- canvas.offsetTop; 
    } 
    return null;  
} 

Answer 4

는 2astalavista @ I 인해 명성 말씀 드릴 수 없습니다, 그래서 내가 '바로 그겁니다, 여기를 놓을 게요 이 작업을 수행하지 않아도됩니다.

나는 대답을 시도했지만 캔버스 왼쪽/위의 다른 요소에서만 문제를 해결합니다. 나를 위해 그것은 캔버스의 마진을 고려하지 않았습니다. 내가 제대로했는지 나는 모른다. 또한 HTML 양면 솔루션의 아이디어를 좋아하지 않습니다. 누군가는 Html을 바꾸고, "position : relative;"를 잊어 버린다. 추적하기가 거의 불가능한 버그가 발생합니다.

Nech의 솔루션을 사용했지만 요소가 캔버스 위에 있거나 위의 위치에있을 때 올바르게 작동하지 않는 것으로 나타났습니다. 그것은 단지 캔버스의 마진과 같은 것들을 고려합니다.

다음 코드로 해결했지만 Firefox 부분은 Chrome 부분에 비해 95-99 % 정도 정확합니다. 그러나이 작업이 완료 가져옵니다

function getEventX(event){ 
    if (event.offsetX) { 
     return event.offsetX; 
    } 
    if (event.clientX) { 
     var currentElement = event.currentTarget; 
     var offsetLeft = currentElement.offsetLeft; 

     while(currentElement.parentElement && currentElement.parentElement.offsetLeft){ 
      currentElement = currentElement.parentElement; 
      offsetLeft += currentElement.offsetLeft; 
     }  

     return event.clientX - offsetLeft; 
    } 
    return null; 
}; 

function getEventY(event){ 
    if (event.offsetY) { 
     return event.offsetY; 
    } 
    if (event.clientY) { 
     var currentElement = event.currentTarget; 
     var offsetTop = currentElement.offsetTop; 

     while(currentElement.parentElement && currentElement.parentElement.offsetTop){ 
      currentElement = currentElement.parentElement; 
      offsetTop += currentElement.offsetTop; 
     }  

     return event.clientY - offsetTop; 
    } 
    return null; 
}; 

는 또한 기능을 물려있는 캔버스를 제거, 당신이 캔버스를 얻을 수 있습니다 :

event.currentTarget; 

여러 개의 캔버스를 처리 할 때 아마 더 나은.