javascript - 如何在画布上进行谷歌地图样式滚动？

Question

我正在尝试制作自己的小地图，到目前为止，我在画布上工作了一些东西，唯一的问题是当我拖动地图时，它仅限于鼠标在画布上移动的距离，我需要能够单击并拖动，并让 X，Y 从鼠标当前所在的位置继续，它当前正在设置 X，Y 只是鼠标移动，希望我说清楚了，这是一个小提琴，看看我的意思：

http://jsfiddle.net/h7rYt/

还有我在拖动时处理图像移动的代码：

can.onmousemove = function(e) { 
    if (map.moving) {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX = e.pageX;
        map.posY = e.pageY;
    }
}

can.onmousedown = function() {
    map.moving = true;
}

document.onmouseup = function(e) {
    map.moving = false;
}

Answer 1

您需要存储最近的鼠标位置并每次应用差异。见http://jsfiddle.net/SMQZk/

can.onmousemove = function(e) { 
    if (map.moving) {
        console.log(e.pageX + ' ' + e.pageY);
        map.posX += e.pageX - map.lastX;
        map.posY += e.pageY - map.lastY;
        map.lastX = e.pageX;
        map.lastY = e.pageY;
    }
}

can.onmousedown = function(e) {
    map.lastX = e.pageX;
    map.lastY = e.pageY;
    map.moving = true;
}