使用滚动条后的画布像素坐标偏移量

Canvas pixel coordinate offset after scroll bar is used

本文关键字：像素 坐标 偏移量 布像素 滚动条      更新时间：2023-09-26

我在页面顶部使用画布。我在鼠标移动事件中从画布中写出像素坐标。通常，最底部的y值等于画布高度，即700px。但是当滚动条被用来在页面上向下滚动一点后，画布的底部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。

有没有想法使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){
...
相关文章：