Координаты прослушивателя HTML5 Canvas Mouse не определены

0

Я пытаюсь взять координаты мыши из прослушивателя мыши, но они не определены. Слушатель мыши добавляется в Canvas, и слушатель запускает функцию onMouseMove, однако переданное событие, похоже, не имеет определенных координат x или y для позиции мыши.

Я пробовал следующие переменные: event.pageX, event.pageY, event.clientX, event.clientY, event.x, event.y

Любые идеи о том, что я делаю неправильно, чтобы привести координаты мыши к неопределенным? Спасибо за любую помощь!

<script>
var boxes;
var canvas;
var context;

$(document).ready(function() {

    canvas = document.getElementById("requirement_tree");
    context = canvas.getContext("2d");

    // Add mouse listener
    canvas.addEventListener("mousemove", onMouseMove, false);
});

// Get the current position of the mouse within the provided canvas
function getMousePos(event) {
    var rect = canvas.getBoundingClientRect();


    if (event.pageX != undefined && event.pageY != undefined) {
        x = event.pageX;
        y = event.pageY;
    } else {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    console.log("X:" + x);
    console.log("Y:" + y);

    return {
        X: x - rect.left,
        Y: y - rect.top
    };
}

function onMouseMove(event) {
    var mousePos = getMousePos(canvas, event);
    var message = 'Mouse position: ' + mousePos.X + ',' + mousePos.Y;
    context.font = '10pt Arial'
    context.fillStyle = 'black';
    context.textAlign = 'left';
    context.clearRect(0, 0, 200, 200);
    context.fillText(message, 100, 100);
}
</script>
Теги:
canvas
mousemove

1 ответ

0
Лучший ответ

По крайней мере, ошибка в обработчике события mouseMove. Объект события передается во втором аргументе обработчика.

// ...
// Get the current position of the mouse within the provided canvas
function getMousePos(element, event) {
    var rect = canvas.getBoundingClientRect();
// ...
  • 0
    И вторая строка должна быть: var rect = element.getBoundingClientRect(); или первый параметр будет бессмысленным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню