如何在画布上进行谷歌地图风格的滚动

How can I do google maps style scrolling on canvas?

本文关键字：谷歌地图 风格 滚动      更新时间：2023-09-26

我正在尝试制作我自己的小地图，到目前为止，我在画布上已经有了一些工作，唯一的问题是，当我拖动地图时，它仅限于鼠标在画布上移动的距离，我需要能够点击和拖动，并使X，Y从鼠标当前所在的位置继续，它当前正在设置X，这里有一把小提琴来理解我的意思：

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

您需要存储最近的鼠标位置，并每次应用该位置的差异。看见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;
}
相关文章：