Question

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

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

Answer 1

如果您没有在画布上使用鼠标移动，请使用：

$(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是画布上的坐标。我的功能唯一不好的是它只在鼠标移动时运行。但数学是一样的。

移动后将鼠标放置在画布上

2 个答案: