如何在元素的中心设置鼠标位置为0,0？

Question

当光标位于红色十字（元素的绝对中间）时，我试图将左上角的坐标设置为0％和0％。 左转应该使X轴变负。当我上升时，Y轴也一样。向右/向下应该包含正值。

正如您在图像中看到的，坐标现在是50％和50％。 一个codepen这个片段可以发现@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; 

EDIT（如果你想的范围是从-100％至100％）

2只是乘percX和percY：

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