javascript - 如何将 mouseposition 设置为元素中心的 0,0 ？

Question

当光标位于红十字(元素的绝对中间)上时，我尝试将左上角所示的坐标设置为 0% 和 0%。向左移动应该使 X 轴变为负值。当我上升时，Y 轴也是如此。向右/向下应该包含正值。

正如您在图像中看到的，坐标现在为 50% 和 50%。可以在 @ https://codepen.io/michaelkoelewijn/pen/RVGmKN 找到此代码片段的代码笔。

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100);
let percX = ((pageX / elWidth) * 100);

我确定我计算百分比的公式不正确，但我似乎无法在任何地方找到答案。有人有我正在寻找的黄金答案吗？

谢谢!

Answer 1

您的百分比公式是正确的。但是 this.offsetTop 和 this.offsetLeft 在 HTML 规范中定义为从元素的左上角开始测量，因此 0%、0% 坐标位于框的左上角。

要执行您想要的操作，您只需从 percX 和 percY 中减去 50%:

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100) - 50;
let percX = ((pageX / elWidth) * 100) - 50;

编辑(如果您希望范围从 -100% 到 100%)

只需将 percX 和 percY 乘以 2:

let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100) - 50) * 2;
let percX = (((pageX / elWidth) * 100) - 50) * 2;