Javascript 如何在相机到达后停止'；s目标

我有一个简单的功能，用户可以点击和拖动相机。相机的移动有点平稳，但我不知道一个简单的方法来停止相机一旦赶上鼠标的位置

我敢肯定这只是一个简单的数学逻辑错误，但目前的相机只是永远保持浮动

这是我的职责：

function drag(evt,el){
    clearInterval(timer);
    if(evt.button == 2){ //right click and drag
    mousePos = {};
    mousePos.x = evt.offsetX / scale;
    mousePos.y = evt.offsetY / scale;
    function update(e){
        var difx    = mousePos.x - (e.offsetX/scale),
            dify    = mousePos.y - (e.offsetY/scale);
        var targetX = camera.x + difx;
        var targetY = camera.y + dify;

        //update for next mouse movement
        mousePos.x  = e.offsetX / scale;
        mousePos.y  = e.offsetY / scale;     

        function smooth(){ // the problems lay here
            if(camera.x != targetX){
                camera.x    += (difx * lerp);
            }
            if(camera.y != targetY){
                camera.y    += (dify * lerp);
            }
        }

        timer = setInterval(smooth,16);
    }           
    function clear(){
        el.removeEventListener('mousemove', update, false);
        this.removeEventListener('mouseup', clear, false);
    }
    el.addEventListener('mousemove',update,false);
    document.body.addEventListener('mouseup',clear,false);  
}}

我的代码在这里运行如果单击并拖动，然后放开，框将继续移动，因为我当前的代码似乎无法检测相机何时到达目标

我能做些什么来解决这个问题呢？

我对此有点怀疑

以下是我所改变的：

在draw函数中，我删除了translate，以便摄影机坐标与鼠标坐标匹配。因此，带有（0,0）的摄影机位于左上角，而不是中间

使用阈值检查相机是否靠近鼠标

ath.abs（dify）>1

添加了clearInterval来更新函数。现在，它的响应性较低，所以您可能需要对此进行调整

将square设置为初始化中的中间位置

---

我在这个问题上玩了一会儿，没有找到一个有效的解决方案。以下是我注意到的一些事情。摄像机永远不会与目标完全匹配。我建议添加一个缓冲区并检查它是否位于边界内。其次，我使用了setTimeout而不是setInterval，这样在满足平滑条件后，我就使用了clearTimeout，这样函数就不会无限期地运行。有没有办法保证它会命中目标位置，也许是使用了一种deltaTime情况？你是否在mousemove上调用

setInterval（）

而没有清除它？坏主意…@kaido哦，我忘了加上那个！谢谢你发现它。@Dave如果delta是阴性测试，看看位置是否小于目标，如果它是阳性测试，看看位置是否大于目标，那该怎么办。这不是我想要的行为，它不应该移动到鼠标位置，而应该像鼠标一样移动。因此，如果鼠标向上移动1像素，相机也应该向上移动。而且，如果我只对like>0.1进行延迟，它会变得非常紧张。所以如果我想要10毫秒的延迟，那就很奇怪了。哦，我明白了。照相机什么时候停？假设鼠标上升了10像素，然后离开了10像素，相机落后了——只上升了8像素。它什么时候向左转，什么时候停止？只要它的最终目标距离与鼠标整体移动的距离相对相同，它就可以更快地转向，否则滚动越远，相机移动到鼠标的精度就越低。换句话说，它不需要严格遵循路径，我的目标是延迟大约100毫秒，所以无论如何它都不会明显。