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

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是您的画布上的坐标。我的功能唯一不好的地方是只有当鼠标移动时才会运行。但数学是一样的。