到达目标后如何停止我的相机

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

我fiddled 有点。

这是我所做的更改：

1. 在绘制函数中我删除了翻译，以便相机坐标匹配鼠标坐标。所以 (0,0) 的相机位于左上角而不是中间。
2. 使用阈值检查相机是否靠近鼠标ath.abs(dify) > 1。
3. 为更新功能添加了 clearInterval。现在它的响应速度较慢，因此您可能需要摆弄它。
4. 在初始化中将正方形设置为中间位置。