移动后在画布中获取鼠标位置

Question

我正在使用此函数将鼠标坐标转换为画布上的坐标，但有时在向下滚动然后向上滚动后，画布上的鼠标位置将不匹配。 这是函数：

function getMousePos(x, y) {
        var rect = document.getElementById("canvas").getBoundingClientRect();
        return {
        x: x - rect.left,
        y: y - rect.top
        };
    }

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

我刚刚做了类似的事情。 我没有考虑水平滚动。 我希望这有帮助。

在 html 标签中添加onmousemove="cnvs_getCoordinates(event)" 。 然后在你的 javascript 文件中：

function cnvs_getCoordinates(e)
{
    var offsetOfBox = document.getElementById('canvas').offset();

    x = e.clientX - offsetOfBox.left;
    y = e.clientY - offsetOfBox.top + $(window).scrollTop();
}

变量 x 和 y 是画布上的坐标。 我的功能唯一不好的是它只在鼠标移动时运行。 但数学是一样的。