HTML5 Toile Mouse coordonnées

Question

J'ai un fichier HTML avec un élément <canvas> et j'essaie d'obtenir les coordonnées de la souris dans l'événement click. J'utilise ce code:

secondCanvas.addEventListener('click', function(e) { 
    console.log(e.pageX) 
}, false); 

Lorsque je clique sur le point en haut à gauche, je reçois dans la console 500 ~ numéro, zéro ... que dois-je faire pour obtenir les coordonnées de la souris sur la toile ?

Answer 1

C'est parce que vous obtenez des coordonnées de page. Je suppose que vous voulez la position actuelle de la souris dans l'une de vos deux toiles? Espérons que cela va résoudre votre problème:

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

De plus, cette stackoverflow est semblable à la vôtre et peut vous donner une meilleure compréhension: Tracking mouse position in canvas when no surrounding element exists

Solution par l'utilisateur: lwburk

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

$('#canvas').mousemove(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coordinateDisplay = "x=" + x + ", y=" + y; 
    writeCoordinateDisplay(coordinateDisplay); 
}); 

Answer 2

Vous doit calculer la position de la souris de canevas en soustrayant le décalage de l'élément de canevas du décalage d'événement (e.pageX et e.pageY).
Voici une link qui explique comment obtenir une position d'élément dans le Royaume, et le code devrait ressembler à:

secondCanvas.addEventListener('click', function(e) { 
    var pos = { 
     x : e.pageX - canvasOffsetX, 
     y : e.pageY - canvasOffsetY 
    }; 
    console.log(pos.x) 
}, false); 

Answer 3

J'utilise ce code et il fonctionne parfaitement pour moi. Une fois ajoutés, les événements de souris de canvas ont deux nouvelles propriétés: canvasX, et canvasY qui sont correctement mappés. Juste après avoir obtenu l'élément canvas, n'oubliez pas d'appeler canvas.extendMouseEvents() et vous êtes en affaires.

HTMLCanvasElement.prototype.extendMouseEvents = function() { 
    this.mapMouseEvent = function(ev) { 
     var r = this.getBoundingClientRect(); 
     ev.canvasX = ev.pageX - r.left; 
     ev.canvasY = ev.pageY - r.top; 
    }; 
    this.addEventListener("mousemove", this.mapMouseEvent); 
    this.addEventListener("click", this.mapMouseEvent); 
    this.addEventListener("contextmenu", this.mapMouseEvent); 
    this.addEventListener("dblclick", this.mapMouseEvent); 
    this.addEventListener("mousedown", this.mapMouseEvent); 
    this.addEventListener("mouseenter", this.mapMouseEvent); 
    this.addEventListener("mouseleave", this.mapMouseEvent); 
    this.addEventListener("mouseover", this.mapMouseEvent); 
    this.addEventListener("mouseout", this.mapMouseEvent); 
    this.addEventListener("mouseup", this.mapMouseEvent); 
}