Question

在将鼠标移动到HTML5画布上时，是否有一种简单的方法可以获得相对鼠标坐标？

我发现了这个：

function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}

但对我来说似乎太沉重了。在使用canvas来简化这些事情时，是否有使用框架（如Kinetic）的原因？

Answer 1

如果您未在画布上使用mousemove，请使用以下命令：

$(function () { 
canvas = document.getElementById('canvas');
canvas.onmousemove = mousePos;
 });

function mousePos(e) {
    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}

Answer 2

您可以绝对定位画布，然后移除while循环。

最终，如果canvas不移动，你可以缓存它的偏移量，然后使用缓存值。

并涵盖所有情况：如果画布具有fixed位置，则无需考虑滚动：pageXOffset，pageYOffset。

在HTML5画布上移动时跟踪鼠标坐标的简单方法

2 个答案: