如何在元素的中心設置鼠標位置爲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);