1

我正在使用 Html5 2d Canvas 创建各种地图。

主要功能是缩放和拖动。我的问题是拖动地图非常生涩。我不知道是否或如何使用 requestAnimation 框架，因为据我了解它不是动画？

到目前为止，我已经对其进行了优化：1) 缩小时，不会不必要地绘制精细细节 - 2) 放大时，不会绘制视口外的可绘制项目。

（我使用 JQuery 除了画布绘图）。目前，当用户触发onmousedown 时，每个mousemove 事件都会重新绘制画布，因此拖动地图，即改变用户在视口中看到的内容。

所以，简化：

$(canvas).mousemove(function(e) {
    if (mousedown){
        dragger.update({x: e.pageX, y: e.pageY});
        drawer.drawMap();
    }
});

function MapDrawer(...){
    this.drawMap = function(){
        this.ctx.clearRect(0,0, this.canvasWidth, this.canvasHeight);
        this.ctx.save(); 
        this.ctx.transform(...); // map position and zoom
        this.selectivelyDrawMapFeatures();
        this.ctx.restore(); 
    }
}

我可以用 requestAnimationFrame 改进它吗？我希望我已经为某人提供了足够的信息，以用一些伪代码来演示如何实现或改进它。

谢谢

4

1 回答 1

1

是的，您可以使用 requestAnimationFrame。requestAnimationFrame 真正做的就是执行一个函数，然后重绘屏幕。基本上步骤是

*mousedown: 开始跟踪鼠标的位置，然后像这样通过 requestAnimationFrame 开始重绘你的画布window.requestAnimationFrame(myRedrawFunction)

*onmousemove: 跟踪拖动对象的位置

*onmouseup：停止跟踪/重绘

确保重绘功能从您正在跟踪的任何位置获取对象位置（换句话说，不要依赖 DOM，尽管作为一个画布项目我假设您不是无论如何）

于 2012-10-05T16:18:20.033 回答