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。

以下是我改变的内容：

在绘图功能中，我删除了translate，以便摄像机坐标与鼠标坐标匹配。因此（0,0）的摄像头位于左上角而不是中间。
使用阈值检查相机是否靠近鼠标ath.abs(dify) > 1。
添加了clearInterval以更新功能。它现在反应较慢，所以你可能想要摆弄它。
在初始化中将方块设置为中间位置。

如何在相机达到目标后停止相机

1 个答案: