即使光标位于屏幕边缘也能跟踪鼠标速度

Question

我写了一个小 Javascript 应用程序来跟踪和显示鼠标速度的 x 和 y 分量。它从当前位置减去光标的先前位置，并除以时间。很简单的东西。这是完整的工作来源：

<!DOCTYPE html5>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        * {
            background-color:#000000;
        }

        html {
            width:100%;
            height:100%;
        }

        #readout {
            background-color:#FFFFFF;
            border: 8px solid #34a1ff;
            width: 162px;
            height: 100px;
            position:absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            padding: 16px;
        }

        .text {
            background-color:#FFFFFF;
        }
        </style>
    </head>
    <body>
        <div id="readout">
            <span id="xLabel" class="text">X: </span>
            <span id="xValue" class="text"></span>
            <br>
            <span id="yLabel" class="text">Y: </span>
            <span id="yValue" class="text"></span>
        </div>
        <script>
        // Where the speed will be displayed
        window.xDisplay = document.getElementById("xValue");
        window.yDisplay = document.getElementById("yValue");

        // Keep track of last time mouse was moved
        window.lastTime = new Date().getTime();
        window.lastDeltaTime = 0;
        window.lastMouseX = 0;
        window.lastMouseY = 0;
        window.lastVX = 0; // for smoothing
        window.lastVY = 0;

        // Listen for mouse move event
        document.addEventListener('mousemove', function(e){ 

            // Get current mouse position
            var currentX = e.clientX || e.pageX;
            var currentY = e.clientY || e.pageY;

            // Get distance travelled from last mouse position
            var deltaX = currentX - lastMouseX;
            var deltaY = currentY - lastMouseY;

            // Update mouse position
            lastMouseX = currentX;
            lastMouseY = currentY;

            // Get current time
            var currentTime = new Date().getTime();

            // Get time elapsed since last mouse event
            var deltaTime = currentTime - lastTime;

            // Update last time
            lastTime = currentTime;

            // Get velocity components
            var xSpeed = deltaX / deltaTime;
            var ySpeed = deltaY / deltaTime;

            // Smooth out velocity
            var xSmooth = (xSpeed*2 + lastVX)/3;
            var ySmooth = (ySpeed*2 + lastVY)/3;

            // Update previous components
            lastVX = xSpeed;
            lastVY = ySpeed;

            // Display velocity
            xDisplay.innerHTML = xSmooth.toFixed(3);
            yDisplay.innerHTML = ySmooth.toFixed(3);

        }, false);

        </script>
    </body>
</html>

这将用于旨在运行全屏模式的应用程序中。我遇到的问题是当光标一直停在屏幕的边缘时，用户一直在那个方向移动鼠标。（示例：光标一直在屏幕的右边缘，但用户一直向右移动鼠标）。

在上述情况下，应用显示速度为零，因为光标位置未更新。但是，我需要一个即使在光标到达边缘后仍能继续显示实际鼠标速度的解决方案（本网站上的 none 个类似问题解决了这个问题）。

这很重要，因为用例将在 WebGL 上下文中，其中鼠标用于控制第一人称视角的旋转。用户需要能够在旋转速度基于鼠标速度（而不是位置！）的情况下根据需要继续旋转他们的视图多次，而这根本无法通过从光标位置计算鼠标速度来实现。

这可能需要一些创意，但我相信可以做到。提前感谢任何解决方案！

Answer 1

找到解决方案，以防以后有人偶然发现这个问题。

Pointer Lock API 正是我所需要的。

即使光标位于屏幕边缘也能跟踪鼠标速度

Track mouse speed even when cursor is at edge of screen

javascript

mouse