JavaScript

Question

我正在为这里的数学而苦苦挣扎。我的目标是根据鼠标相对于 window 中间的位置生成一个值。输出应该在 -1 到 1 的范围内，这意味着最左边是 -1，window 中间是 0，最右边是 1。我该如何实现？

提前致谢。

伪代码

跟踪鼠标相对于屏幕中间的位置
根据window大小
在别处使用价值

代码

// 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

这是一种方法。将鼠标 x-position 除以 windowWidth，因此位置在 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 — 跟踪鼠标相对于屏幕中间的位置

JavsScript — Track mouse position relative to the middle of the screen

onmousemove

mouseevent