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

Question

在我的网页中，利用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;  

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

Answer 1

显然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;