1

我正在使用 gwt 绘制到画布上。每次鼠标移动时，我都会在屏幕上绘制 40 像素 x 40 像素的位图 50 次。看起来像：

void onDraw() {
    for (int x = 0; x < 10; x++) {
        for (int y = 0; y < 5; y++) {
            canvasContext.drawImage(srcImage, x, y, ...);
        }
    }
}

这在桌面浏览器和 iphone/ipad 上表现得非常好。在 android 上它基本上无法使用，绘图以大约 2 fps 的速度爬行。

我想知道是否有任何有效的方法可以在 android 上有效地绘制这个小位图。我尝试了一些技巧，但并没有真正改善。android 浏览器的实现真的落后于它的 ios 浏览器吗？

谢谢

4

1 回答 1

1

这只是由于某种原因直接绘制到画布上的 android 失败。看

Android上的Html5画布动画慢

一些提高性能的开发技巧

http://www.html5rocks.com/en/mobile/touch/#toc-foo

设备基准测试的一些性能

http://www.scirra.com/blog/85/the-great-html5-mobile-gaming-performance-comparison

如您所见，机器人确实落后很多。

一些解决方法可能是尝试为实体使用动画 div 单元格，而不是直接在画布上绘制。自己没有尝试过，但它可能会表现得更好。

也尝试小跑你的鼠标移动，我怀疑你正在触发许多鼠标移动事件，这些事件实际上可能每帧绘制一次多于一次的 quandangles。您应该有某种类型的更新函数，每帧只调用一次，由某个时间的计时器管理。然后，如果满足应该移动的条件，您的更新应该更新矩形。而不是尝试根据移动鼠标的事件重绘。您的更新函数应该获取鼠标的坐标，并更新矩形对象的位置。然后让你的绘制函数在你的更新函数之后被调用以实际呈现在屏幕上

init {  //called once on load
   create array of rectangles 50, with default coordinates
}
update { //called once per frame
   get coordinates of mouse
   iterate though array of rects and update coordinates based on mouse position
}
draw { //called after update
   iterate though array of rects and draw them
}

timer { //manages your fps and calls update and draw
   update()
   draw()
}.scheduleRepeating(1000ms/fpsRate)

现在我知道这是一些 ghetto 伪代码，但这就是你应该如何渲染对象。也不要将 for 嵌套在 for 中...这非常糟糕，因为它效率低下，您应该改为进行调制

for(int i =0;i < rectArr.length; i++) {
  x = i%10 * rectW
  y = i%5  * rectH
}

纽瓦斯祝你好运

于 2012-08-09T17:28:50.027 回答