10

デスクトップで非常にうまく機能する2Dキャンバスの回転を実行していますが、モバイルスペースに小さな問題が1つあります。これが拡大されたスクリーンショットです：

ここに画像の説明を入力してください

親指の画像は500msの間に約0.2rad回転します。私が思うのは、関連するすべてのコードが以下にインラインであるということです。ご覧のとおり、画像の上隅のそれぞれに、ある種の「軌跡」が残っています。

var duration = 500;
var start = 0;
var stop = 0.287554326;
var step = (stop - start) / 10;
var steps = (stop - start) / step;
var current = 0;
var delay = duration / steps;
var first = true;
if (navigator.userAgent.match(/iP(hone|[ao]d)|android/i)) step *= 1.5;
var rotate_int = setInterval(function() {
  if (current >= stop) {
    clearInterval(rotate_int);
    callback && callback();
    return;
  }
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  ctx.translate(cvs.width / 2, cvs.height / 2);
  ctx.rotate(step);
  current += step;
  ctx.translate(cvs.width / -2, cvs.height / -2);
  ctx.drawImage(i, 0, 0);
  if (first) {
    first = false;
    thumb.hide();
  }
}, delay);

ノート：

  1. コードはデスクトップで非常にうまく機能します（Firefox、Chrome、Safari、Opera、さらにはIEの最新版）
  2. 次のデバイスとブラウザをテストしました。
    1. iPhone 3GS：Safari、Opera Mini
    2. iPhone 4S：Safari
    3. iPad（第1世代）：Safari
    4. Android Galaxy S（ジンジャーブレッド付き）：デフォルトのブラウザ、Firefox mobile
    5. Motorola Droid X（ジンジャーブレッド付き）：デフォルトのブラウザ、Firefox mobile
  3. <canvas>動作を示すデスクトップブラウザ（をサポート）が見つかりません
  4. 動作を示さないモバイルデバイスは見つかりませんでした
  5. 投稿された画像はiPadから拡大したスクリーンショットです
  6. 重要な場合は、<canvas>（回転中）が（jQueryを介して）アニメーション化され、背後の画像を通過して停止します。これはスクリーンショットに表示されています。
  7. <canvas>ページにも2番目があります。同じサムズアップ.pngを使用し、上記と同じコードを使用して回転し、別の背景画像を通過するようにアニメーション化されます（ただし、反対方向に、1つの「サムズアップ」が北西に移動し、もう1つが南東に移動します） ）、およびトレイルは、キャンバスコンテキストに対して同じ場所に表示されます。

何かが診断につながることを期待して、私は私が考えることができるこの壁にすべての泥を投げました。他の誰かが以前にこのようなものを見たことがありますか？別の方法で何を試すことができますか？そのような動作を警告するHTML5チュートリアルサイトの大きな赤い警告ラベルを見逃したことがありますか？

==編集1==

@GGGのコメントによると、UAスニフ（デスクトップと同じ設定を使用するとモバイルブラウザがすべてチャグするため、キャンバスの再描画の回数と頻度を減らすように設計されています）を削除しましたが、それによってトレイルがより顕著になりました（例：より厚い）。次に、UAスニフを元に戻して実験しましたが、ループを50％減らす代わりに、実際には500％増やしました。繰り返しになりますが、これにより、トレイルがさらに顕著になりました。ただし、この厚み付けは漸近的であるように見えます。つまり、アニメーション速度のパラメータを微調整することで、トレイルを厚みにすることができる厚さに制限があります。

==編集2==

@GGGの他のコメントによると、適切な回避策を見つけるために、画像を編集して透明なデータを追加しました。私が見たのは、画像がキャンバスの上端と左端に突き出ていることでした（これは「HTML5」ではなく「Photoshop<canvas>キャンバス」です）。透明なデータの均等なパディングを上部と左側に追加すると、ストリーキングの問題は解消されました。これが元のPSD（pre me-adding-extra-spacing）でした：

ここに画像の説明を入力してください

したがって、私の質問は次のようになります。画像が[Photoshop]キャンバス全体に（不透明なピクセルで）塗りつぶされている場合でも、キャンバスコンテキストがclearRect()それ自体で動作しないのはなぜですか？それはキャンバスの範囲内で何かを消し去るべきではありませんか？もしそうなら、なぜそれはこれらのいくつかのピクセルを残すのですか？

==編集3==

いくつかの調査の結果、Cairoはいくつかの主要なレンダリングエンジン（少なくともWebKitとGecko）でかなり一般的に使用されていることがわかりました。@JonasWielickiが最初に提案したように、Cairoライブラリ（モバイル実行用に最適化されている場合）はおそらく少し熱心すぎるというのは事実でしょうか？

4

1 に答える 1

3

コメントごとに、回避策として画像の端の周りにいくつかの透明なピクセルを追加してみてください。

なぜこれが起こるのか私には本当にわかりません。これは、モバイルデバイスでのアルファチャネルの奇妙な処理と関係があると思いますが、これは推測にすぎません。

モバイルブラウザがスクロール中にアルファチャネルをドロップまたは「推定」しているように見えることに気づきました（フォントでさえ、より「クリスピー」に見えますが、ゆっくりと上下にスクロールします）。アルファチャネルを2番目のステージに残し、現在の「フレーム」の直後にレンダリングする別の「フレーム」がある場合は2番目のステージをスキップして、2つのステージでレンダリングするのではないかと思います。たぶん、それはどういうわけか、レンダラーがそれが持っている場所に物を描いていないことを考えるように混乱させます。

とにかく、これはおそらくバグレポートを保証します。他に何が起こっているのかについての本当の説明を聞きたいと思います。

于 2012-05-08T21:00:42.187 に答える