clientX 和 clientY 从真实坐标偏移答案

【问题标题】：clientX and clientY are offset from reall coordinatesclientX 和 clientY 从真实坐标偏移
【发布时间】：2020-12-12 15:33:47
【问题描述】：

我不明白为什么 clientX 和 clientY 属性会偏移到它们的实际位置。这是我的代码：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
   <p>The mouse is at</p><p id="mousecoords"> "hello" </p>
   <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
   <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var coords = document.getElementById("mousecoords");
    c.onmousemove = function(event){
      
      var x = event.clientX;
      var y = event.clientY;
      coords.innerHTML= x + "," + y;
      ctx.beginPath();
      ctx.arc(x, y, 2, 0, Math.PI * 2, true);
      ctx.fill();
    };
    </script> 
  </body>
</html>

这是该问题的屏幕截图。有任何想法吗？

【问题讨论】：

标签： javascript html onmousemove

【解决方案1】：

试试这个：

function getMousePos(canvas, e) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var coords = document.getElementById("mousecoords");

c.onmousemove = function(e) {
  var {
    x,
    y
  } = getMousePos(c, e);

  coords.innerHTML = x + "," + y;
  ctx.beginPath();
  ctx.arc(x, y, 2, 0, Math.PI * 2, true);
  ctx.fill();
};

<p>The mouse is at</p>
<p id="mousecoords"> "hello" </p>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

您需要使用画布中的 getBoundingClientRect() API 将当前坐标重新调整到相对于父级的位置。

这是完整的文档：

https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect

此 API 将返回客户区坐标中的位置，因此如果您只需从事件中减去 clientX/Y 即可完成。

【讨论】：

【解决方案2】：

.clientX 和 .clientY 是相对于“客户区”提供的，即您当前正在查看的页面部分。您需要进行调整以考虑画布元素相对于客户区的位置。幸运的是，您还获得了.getBoundingClientRect()，它提供了客户区坐标中元素的位置和尺寸。

把这些放在一起，你可以修改你的.onmousemove代码：

  var bounding = c.getBoundingClientRect();
  var x = event.clientX - bounding.left;
  var y = event.clientY - bounding.top;

【讨论】：