Obtenir les coordonnées de la souris à l'aide de jQuery

Question

Je suis en train de créer un jeu de rôle en utilisant jQuery et l'élément <canvas>. Pour contrôler la raquette, elle suivra la souris. Donc, j'ai besoin d'obtenir les coordonnées de la souris dans ma méthode drawPaddle().

Vous cherchez sur le site jQuery il a des exemples comme celui-ci:

$(document).mousemove(function(e){ 
    $('#status').html(e.pageX +', '+ e.pageY); 
}); 

Ce qui fait ce que je veux, mais je ne veux pas ajouter une autre fonction pour mon projet comme celui-ci. Ceci est ma méthode drawPaddle():

function drawPaddle() { 
    c.beginPath(); 
    c.rect(paddleX, paddleY, 150, 10); 
    c.closePath(); 
    c.fill(); 
    // Get mouse position and update paddleX and paddleY here 
} 

Je dois trouver un moyen d'obtenir la position de la souris chaque fois que le drawPaddle() est appelé, et non à chaque fois que la souris est déplacée à la page comme $(document).mousemove(function(e){ fait.

Toute aide est appréciée, merci.

Answer 1

$('canvas').mousemove(function(e){ 
    drawPaddle(e.pageX, e.pageY); 
}); 


function drawPaddle(paddleX, paddleY) { 
    c.beginPath(); 
    c.rect(paddleX, paddleY, 150, 10); 
    c.closePath(); 
    c.fill(); 
} 

Answer 2

Je pense qu'il n'y a aucun moyen de le faire sans un événement. Je ne connais aucun champ dans JavaScript qui stocke cette information globalement. Il y a quelque temps, j'ai eu le même problème et je l'ai fait avec l'événement mousemove parce que je n'ai trouvé aucune autre solution. Peut-être que certains navigateurs implémentent un moyen d'obtenir ces coordonnées mais je ne sais pas. Mais vous pouvez peut-être utiliser les événements mouseenter et mouseleave sur votre canevas pour activer/désactiver la capture de la position de la souris. Cela réduira les appels de fonction.

Answer 3

Vous devez faire

var where = {} 
$('canvas').mousemove(function(e){ 
    where.x = e.pageX 
    where.y = e.pageY; 
}); 

puis utilisez oùx, y dans la fonction