Obtener las coordenadas de ratón utilizando jQuery

Question

Estoy construyendo un juego de evasión con jQuery y el elemento <canvas>. Para controlar la paleta, se seguirá el ratón. Así que necesito para obtener las coordenadas del ratón en mi método drawPaddle().

Buscando en el sitio jQuery tiene ejemplos de esta manera:

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

¿Qué hace lo que yo quiero, pero no quiero añadir otra función a mi proyecto como este. Este es mi método drawPaddle():

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

Por lo tanto, la necesidad de encontrar una manera de conseguir la posición del ratón cuando el drawPaddle() se llama, y ??no cada vez que el ratón se mueve en la página como $(document).mousemove(function(e){ hace.

Cualquier ayuda se agradece, gracias.

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

Usted tendrá que hacer

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

y luego usar wherex, y en la función

Answer 3

Creo que no hay manera de hacerlo sin un evento. No conozco ningún campo en JavaScript que almacena esa información a nivel mundial. Hace algún tiempo tuve el mismo problema y lo hice con el evento mousemove porque he encontrado ninguna otra solución. Tal vez algún navegador implementar una manera de conseguir esas coordenadas, pero no sé.

Sin embargo, tal vez usted puede utilizar mouseenter y eventos mouseleave en el lienzo para activar / desactivar la captura posición del ratón. Esto reducirá el de llamadas a funciones.