JavsScript-跟踪鼠标相对于屏幕中央的位置

问题描述

我在这里为数学苦苦挣扎。我的目标是根据鼠标相对于窗口中间的位置生成一个值。输出应该在-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
  // }

};

解决方法

这是一种方法。用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
};

javascript mouseevent onmousemove