获取带有小数精度的鼠标坐标。

Question

获取带有小数精度的鼠标坐标。

3

我正在寻找一种方法来获取JS中鼠标位置，并带有一定的小数精度。我正在尝试制作一个SVG绘图应用程序，但我不喜欢油漆刷子吸附到最近的像素而不是在两个像素之间进行插值。即使在放大时也似乎clientX始终为整数，这时应该有更高的精度。如何在JS中获取更精确的鼠标位置？

- Splox

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Baki · Accepted Answer

如果您需要小数精度，可以使用pageX和pageY JavaScript属性。它们提供相对于整个文档的位置，并且比ClientX和ClientY JavaScript属性更精确。您可以这样做：

document.addEventListener('mousemove', (event) => {
  const svgRect = document.querySelector('svg').getBoundingClientRect();
  const x = event.pageX - svgRect.left;
  const y = event.pageY - svgRect.top;
  console.log(`Mouse position: (${x.toFixed(2)}, ${y.toFixed(2)})`);
});