时间戳

首页 > 解决方案 > 考虑到 Windows 10 全局缩放的鼠标位置

javascript - 考虑到 Windows 10 全局缩放的鼠标位置

问题描述

在我的网页中使用mousemove事件及其clientX和clientY属性。它按预期工作，我以这种方式标准化坐标：

    MousePos.x = ((event.clientX- Renderer.domElement.offsetLeft) / Renderer.domElement.width) * 2 - 1;
    MousePos.y = -((event.clientY - Renderer.domElement.offsetTop) / Renderer.domElement.height) * 2 + 1;

它按预期工作，现在 x 和 y 在 -1 到 1 的范围内，而不是 0 到宽度/高度。

当机器具有全局缩放时，就会出现问题；Windows 10 有这样的选项。假设我的屏幕是 1920 像素宽，并且缩放设置为 100%（无全局缩放），那么event.clientX最大值将为 1920。如果缩放是其他值，则它不会是屏幕宽度的最大值，这不会给我 1 值，并且标准化的鼠标位置将是错误的。

所以我的问题是：如何考虑 Windows 10 的全局缩放？

如果我可以读取这个值，我可以通过这种方式更正我的鼠标位置：

    let scale = 1.25;
MousePos.x = ((event.clientX * scale - Renderer.domElement.offsetLeft) / Renderer.domElement.width) * 2 - 1;
MousePos.y = -((event.clientY * scale - Renderer.domElement.offsetTop) / Renderer.domElement.height) * 2 + 1;

但我想知道是否有更好的解决方案。

标签： javascriptwindowsmouse

解决方案

显然domElement有另一个属性：（clientWidth或高度）应该用于规范化。

以下按预期工作：

    MousePos.x = ((event.clientX - Renderer.domElement.offsetLeft) / Renderer.domElement.clientWidth) * 2 - 1;
MousePos.y = -((event.clientY - Renderer.domElement.offsetTop) / Renderer.domElement.clientHeight) * 2 + 1;

推荐阅读