如何在我的相机到达目标后停下来

Question

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

我敢肯定这只是一个简单的数学逻辑错误，但目前相机只是不断地飘浮永远。

这是我的职责：

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);  
}}

这里有代码，http://jsfiddle.net/bbb9q2c3/，如果您单击并拖动，则该框将继续移动，因为我当前的代码似乎没有检测到摄像机何时到达目标。

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

Answer 1

我摆弄有点这个。

我改变的是：

1. 在画图函数中我删除了翻译，使相机坐标与鼠标坐标相匹配。所以(0,0)的相机在左上角，而不是中间。
2. 使用阈值检查相机是否靠近鼠标ath.abs(dify) > 1。
3. 添加了clearInterval来更新函数。它现在的反应不太灵敏，所以你可能会想要摆弄它。
4. 在初始化时将正方形设置为中间位置。