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

Question

Je construis un jeu en petits groupes en utilisant jQuery et l'élément <canvas>. Pour contrôler la palette, il suivra la souris. Je dois donc obtenir les coordonnées de la souris dans ma méthode de drawPaddle().

Recherche sur le site jQuery il a des exemples comme ceci:

$(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 à 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 donc 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

Vous devez faire

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

et ensuite utiliser oùX, y dans la fonction

Answer 3

Je pense qu'il n'y a aucun moyen de le faire sans un événement. Je sais pas de champ en JavaScript qui stocke ces informations dans le monde. Il y a quelque temps j'ai eu le même problème et fait que l'événement de mousemove parce que je trouve pas d'autre solution. Peut-être un navigateur mettre en œuvre un moyen d'obtenir les coordonnées, mais je ne sais pas.

Mais vous pouvez peut-être utiliser des événements mouseenter et mouseleave sur votre toile pour activer / désactiver la capture de position de la souris. Cela réduira les appels de fonction.