我在页面顶部使用 Canvas 。我在 mousemove 事件中从 Canvas 中写出像素坐标。通常,最底部的 Y 值等于 Canvas 高度,即。 700 像素。但是在使用滚动条在页面上向下滚动一点后, Canvas 底部的 y 坐标将相应地更改为 400px。
document.getElementById("mapcanvas").addEventListener("mousemove", getPosition, false);
function getPosition(event)
{
var x = event.x;
var y = event.y;
var canvas = document.getElementById("mapcanvas");
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
document.getElementById("canvascoords").innerHTML = "Canvascoords: "+ "x=" + x + ", y=" + y;
}
...其中“mapcanvas”是我的 div 持有 Canvas 。
是否有任何想法使 y 坐标独立于滚动条的使用,以便较低的 y 坐标始终为 700px?
最佳答案
如您所见,canvas.offsetLeft
和 canvas.offsetTop
不考虑滚动。
要考虑滚动,您可以使用 canvas.getBoundingClientRect
var BB=canvas.getBoundingClientRect();
var x=event.clientX-BB.left;
var y=event.clientY-BB.top;
顺便说一句,您可能希望在 getPosition() 函数之外只获取一次对 canvas 元素的引用,而不是在 getPosition() 中重复获取它。
var canvas = document.getElementById("mapcanvas");
function getPosition(event){
...
关于javascript - 使用滚动条后 Canvas 像素坐标偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25407655/