Question

我在页面顶部使用画布。我在mousemove事件中写出画布的像素坐标。通常，最底部的Y值等于画布高度，即。 700像素。但是在使用滚动条在页面上向下滚动一下之后，画布中的底部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;





            }

......其中＆＃34; mapcanvas＆＃34;是我拿着画布的div。

任何使y坐标与滚动条的使用无关的想法，以便较低的y坐标总是i 700px？

Answer 1

正如您所发现的，canvas.offsetLeft＆amp; 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){

...

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

1 个答案: