obtenir la position de la souris sur la toile dans Firefox

Question

Je voudrais obtenir les coordonnées X, Y par rapport à la toile (sur l'événement souris-déplacer).

J'utilise ceci:

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

js:

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

Cela fonctionne bien dans Chrome, mais dans Firefox. DonT Si l'élément canvas est en position 0,0, il fonctionne également dans Firefox.

Jetez un oeil à ceci: http://jsbin.com/ozowaz/10

Que puis-je faire pour le faire fonctionner en FF aussi?

Answer 1

Le conteneur doit avoir un style

position: relative; 

. N'utilisez pas ce conteneur pour la bordure de style, car cela signifie + n px (n = taille du boder) en coordonnées!

grâce à: http://dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

Vous pouvez essayer de le calculer:

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

où la toile est l'élément dom toile. Cela devrait fonctionner dans FF.

Answer 3

Cela a fonctionné pour moi (js pur)

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 Je ne peux pas commenter en raison de la réputation, donc je vais mettre ça ici, i » eventhough m pas supposé faire ceci:

J'ai essayé la réponse acceptée, mais cela résout seulement le problème d'autres éléments placés à gauche/au-dessus de la toile. Pour moi, il n'a pas pris en compte la marge de la toile. Je ne sais pas si je l'ai fait correctement cependant. Aussi, je n'aime pas l'idée d'une solution Html face. Quelqu'un change le code HTML, oublie la "position: relative"; résultant en un bug qui est presque impossible à traquer.

J'ai utilisé la solution de Nech, mais j'ai remarqué qu'elle ne fonctionnait pas correctement lorsque j'avais des éléments positionnés à gauche ou au-dessus du canevas. Il ne faut que des éléments comme la marge de la toile.

Je ai travaillé avec le code suivant, la partie de Firefox est toujours seulement environ 99 à 99% de précision, par rapport à la partie Chrome. Mais il fait le travail:

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

J'ai aussi enlevé la toile d'être remis à la fonction, vous pouvez obtenir la toile avec:

event.currentTarget; 

Probablement mieux lors de la manipulation de plusieurs toiles.