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

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

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

onmousemove="cnvs_getCoordinates(event)"在您的 html 标记内添加。然后在你的 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 是画布上的坐标。我的功能唯一不好的是它只在鼠标移动时运行。但数学是一样的。