Получение координат мыши с помощью jQuery

Я создаю игру с использованием jQuery и <canvas> элемент. Чтобы управлять веслом, он будет следовать за мышью. Поэтому мне нужно получить координаты мыши в моем drawPaddle() метод.

Глядя на сайт jQuery, у него есть такие примеры:

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

Который делает то, что я хочу, но я не хочу добавлять другую функцию в мой проект, как это. Это мое drawPaddle() метод:

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

Поэтому мне нужно найти способ получить положение мыши всякий раз, когда drawPaddle() называется, а не всякий раз, когда мышь перемещается на странице, как $(document).mousemove(function(e){ делает.

Любая помощь приветствуется, спасибо.

3 ответа

Решение
$('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();
}

Вам нужно будет сделать

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

а затем используйте wherex,y в функции

Я думаю, что нет никакого способа сделать это без события. Я не знаю ни одного поля в JavaScript, которое хранит эту информацию во всем мире. Некоторое время назад у меня была такая же проблема, и я сделал это с mousemove событие, потому что я не нашел другого решения. Может быть, какой-то браузер реализует способ получить эти координаты, но я не знаю.

Но, возможно, вы можете использовать mouseenter а также mouseleave события на вашем холсте, чтобы включить / отключить захват позиции мыши. Это уменьшит количество вызовов функций.

Другие вопросы по тегам