JavsScript——跟踪鼠标相对于屏幕中间的位置

Question

我在数学上很吃力。我的目标是根据鼠标相对于窗口中间的位置生成一个值。输出应该在-1到1的范围内，这意味着最左边是-1，窗口的中间是0，最右边是1。我怎样才能做到这一点？

提前谢谢。

伪码

• 跟踪鼠标相对于屏幕中间的位置
• 根据窗口大小将此值转换为-1到1的范围
• 在其他地方使用价值

编码

// Mouse event
var mousePosX, mousePosY, mouseOffsetX, mouseOffsetY;
onmousemove = function (e) {
// console.log(`mouse location = X: ${e.x}, Y: ${e.y}`);
mouseOffsetX = e.offsetX / percentX(100);
// mouseOffsetY = e.y / percentY(100)
mousePosX = e.pageX / percentX(100) - percentX(100);
mousePosY = e.y / percentY(100);
// if (mousePosX => 0.5) {
//   mousePosX = mousePosX*1
// }else {
//   mousePosX = mouse*-1
// }
};

Answer 1

这里有一种方法。用windowWidth分割鼠标的x位置，使其位于0-1之间。从-1开始，添加xValue/windowWidth*2，使其映射在-1和1之间。y的位置从1开始，所以顶部为1，底部为-1。

onmousemove = function (e) {

let windowHeight = window.innerHeight
let windowWidth = window.innerWidth
let xValue = e.x
let yValue = e.y
let mousePosX = -1+(xValue/windowWidth)*2
let mousePosY = 1-(yValue/windowHeight)*2
};