Question

我正在创建一个使用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改进吗？我希望我已经提供了足够的信息，可以通过一些peudocode来证明如何实现或改进。

由于

Answer 1

是的，您可以使用requestAnimationFrame。所有requestAnimationFrame确实是执行一个函数，然后重绘屏幕。基本上步骤是

* mousedown：开始跟踪鼠标的位置，并开始通过requestAnimationFrame重新绘制画布，如window.requestAnimationFrame(myRedrawFunction)

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

* onmouseup：停止跟踪/重绘

确保重绘功能从你跟踪的任何地方抓取对象位置（换句话说，不要依赖DOM，尽管我认为你不是一个画布项目）

Html Canvas RequestAnimationFrame：可用于可拖动内容？

1 个答案: