1

gwt を使用してキャンバスに描画しています。マウスを動かすたびに、40px x 40px のビットマップを画面に 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セルを使用して実験することです。自分で実験したことはありませんが、パフォーマンスが向上する可能性があります。

また、マウスの動きを調整してみてください。実際には、フレームごとに1回以上、クアンドラングルを描画している可能性のある多くのマウスの動きイベントに向かっていると思います。フレームごとに1回だけ呼び出される、ある種の更新関数が必要です。これは、タイマーのある時間によって管理されます。次に、移動する必要があるという条件が満たされている場合、更新によって長方形が更新されます。むしろ、マウスを動かしたイベントに基づいて再描画を試みます。更新関数は、マウスの座標を取得し、長方形オブジェクトの位置を更新する必要があります。次に、更新関数の直後に呼び出される描画関数を使用して、実際に画面にレンダリングします。

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)

今、私はそれがゲットーの疑似コードであることを知っていますが、それはあなたがオブジェクトをレンダリングする方法です。また、forをforにネストしないでください...その非効率性のため、代わりにモジュレーションを行う必要があります。

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

いつも幸運

于 2012-08-09T17:28:50.027 に答える