javascript - 在没有 mousemove 事件的情况下跟踪鼠标的相对位置

Question

我需要在我的应用程序中跟踪鼠标相对于 <canvas> 元素的位置。目前，我有一个 mousemove 事件监听器附加到 <canvas>，它会在鼠标触发时更新我的​​鼠标位置，在可用时使用 offsetX/offsetY，或者在 layerX 不可用时使用 layerY/offsetX/Y。使用 offsetX/Y 或 layerX/Y 给我鼠标坐标相对于我的 <canvas> ，这正是我想要的。当我的应用程序发挥它的魔力时，各种 CSS 3d 变换被应用到 <canvas> ，即使 <canvas> 非常变换，offsetX/Y 仍然在 <canvas> 的局部变换坐标空间内给我准确的坐标。

这有点令人困惑，所以我会试着举个例子。如果我的 <canvas> 的宽度和高度均为 100px，并且位于相对于浏览器视口(viewport)的 (0,0)，并且我单击 (50,50)(在视口(viewport)坐标中)，则对应于 (50,50)我的 <canvas> 和 50 是通过 offsetX 和 offsetY(正确)返回的值。如果我然后将 transform: translate3d(20px,20px,0px) 应用于我的 <canvas> 并单击 (50,50)(在视口(viewport)坐标中)，因为我的 Canvas 已向下移动 20px 并向右移动 20px，这实际上对应于 (30,30) 相对于 <canvas> ， 30 是通过 offsetX 和 offsetY(正确)返回的值。

我面临的问题是，当用户没有实际移动鼠标但 <canvas> 正在被转换时该怎么办。我只是在 mousemove 事件上更新鼠标的位置，那么当没有 mousemove 时我该怎么办？

例如。我的鼠标位于 (50,50) 并且没有对 <canvas> 应用任何转换。我的this.mouseX和this.mouseY都等于50；当我将鼠标移动到 (50,50) 时，它们被保存在最后的 mousemove 事件中。完全不移动鼠标，我将上述转换 ( transform: translate3d(20px,20px,0px) ) 应用到我的 <canvas> 。现在，我需要 this.mouseX 和 this.mouseY 都等于 30，因为这是我的鼠标相对于 <canvas> 的当前转换的新位置。但是 this.mouseX 和 this.mouseY 仍然等于 50。因为我从未移动过鼠标，所以没有触发 mousemove 事件，那些保存的坐标也从未得到更新。

我该如何处理？我考虑过创建一个新的 jQuery 事件，根据我的旧/以前的鼠标位置手动分配一些属性( pageX 和 pageY ？)，然后触发该事件，但我认为这不会导致浏览器重新计算 offsetX和 offsetY 属性。我也一直在考虑采用已知的旧/先前鼠标位置并将其乘以我的变换矩阵，但这会变得非常复杂，因为我的鼠标坐标在二维空间中，但我应用于 <canvas> 的变换是所有 3d 转换。

我想真的，我想做的是获取我已知的 2d 页面位置并将其光线转换到 3d 空间并找出我击中转换后的 <canvas> 的位置，所有这些都在 javascript 中(jQuery 可用)。

这可能吗？这有意义吗？

Answer 1

适用于所有浏览器

 var mouseX=0;
 var mouseY=0;
 var canvas = document.querySelector('#canvas');
 var rect = canvas.getBoundingClientRect();
 document.onmousemove = function(e) {
      mouseX=e.clientX-rect.left;
      mouseY=e.clientY-rect.top;
};
function updateCoords() {
      mouseX=e.clientX-mouseX;
      mouseY=e.clientY-mouseY;
      setTimeout(updatecoords,10);
}

现在我们可以调用一次updateCoords() 函数来重复检查新位置。

 updateCoords();

您可以在 updateCoords() 函数中添加您的代码，它将每 10 毫秒执行一次

概念:mouseX 和 mouseY 变量在 mousemove 事件上更新，并且在 Canvas 位置发生任何变化时也会更新。