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>

这将用于旨在以全屏模式运行的应用程序。我遇到的问题是当光标一直在屏幕边缘结束时，用户继续沿那个方向移动鼠标。（例如：光标一直在屏幕的右边缘，但用户不断向右移动鼠标。）

在上面的场景中，应用程序显示的速度为零，因为光标位置未更新。但是，我需要一个解决方案，即使在光标到达边缘后仍继续显示实际鼠标速度（此网站上没有任何类似问题解决此问题）。

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

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

Answer 1

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

Pointer Lock API完全符合我的需要。

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

1 个答案: