如何在元素的中心将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

您的百分比公式是正确的。但是，HTML规范中定义的this.offsetTop和this.offsetLeft是从元素的左上角开始测量的，因此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;

Answer 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);