4

奇妙な問題が発生しています。ハードウェアアクセラレーションを有効にしている場合、キャンバス要素に描画していると、キャンバスに描画されているものはすべて、ページの上部に再描画されます。

ハードウェアアクセラレーションをオフにしても、この問題は発生しません。

私はAndroid4.1.1で個人的にテストしただけですが、しばらく前にユーザーの1人でこの問題に気づき、複製できませんでした（少なくともAndroid 3以降にありました）

スクリーンショットを正確に取得することはできませんが（Androidでそれを行う方法がよくわかりません）、プロセスを分解してみます。

ハードウェア加速が有効になっている

  1. ユーザーは通常の詳細を入力します。
  2. ユーザーはページの一番下までスクロールし、canvas要素に署名を描画します。
  3. ユーザーがページの上部で何かを忘れて、ページの上部にスクロールした場合
  4. 視覚的なバグが発生し、彼らが描いた署名がページの上部に表示されます

ただし、ハードウェアアクセラレーションがない場合、ステップ4は実行されません。HTML5キャンバスに対して何かすることになっていることはありますか？

ここで渡す必要のある情報がわかりません。Samsung、HTC、Google Nexusの携帯電話/タブレットで発生しているようですので、一貫したバグです。

探し回ってみましたが、いつもゲーム開発スレッドなどが出てきます。

私は本当にハードウェアアクセルを有効にしたいのですが、これはそれから発生する唯一の問題です-パフォーマンスの向上はすごい信じられないほどです

4

6 に答える 6

8

Androidで重複するHTML5キャンバスの問題は、バージョン4.1.1で発生しており、最新の4.2ではまだ修正されていません。

解決策は、キャンバスの親HTML要素のいずれにもoverflow：hiddenまたはoverflow：scrollがないことです。

于 2012-12-31T17:22:00.310 に答える
2

さて、私はこれまでで最もハッキーなソリューションを思いついた。onTouchEndイベントが発生した後、次のことを行う必要があります

1. Append changes to the canvas. It'll double-draw
2. Create a clone of the canvas
3. remove the canvas, re-add it
4. Copy the data from the clone over

その後、バグは消えます...ばかげています。

ハードウェアの加速を削除した後、私はそれを機能させる必要がありました私はjQMがいかに不格好であるかに気づきました

于 2012-11-08T05:20:11.733 に答える
2

私も同じ問題を抱えていました。私の場合、jquerymobilecssが原因のようです。

guyaが追加した内容についてもう少し詳しく説明し、jquery.mobile.structure.cssファイルに移動して、次の行を変更します。

.ui-content {border-width：0; オーバーフロー：表示; オーバーフロー-x：非表示; パディング：15px; }

に

.ui-content {border-width：0; オーバーフロー：表示; パディング：15px; }

overlay-x：hidden属性を削除すると、問題が修正されます。

出典：Github /thomasjbradley/署名パッド/問題

編集：不思議なことに、キャンバスの幅が256px以下の場合は問題が発生しないことに気づきました。

于 2013-04-04T11:00:24.153 に答える
1

興味のある人なら誰でも、Android 5は素晴らしい動作をしており、キャンバスははるかに優れた速度で動作します。

于 2015-08-19T00:22:36.157 に答える
0

セグメント表示ライブラリを使用していますが、この問題の影響も受けます。libの作者との長い議論の後、彼は簡単な回避策を思いつきました。彼は私にこれらの2行を追加するように言った：

context.fillStyle = '#fff';
context.fillRect(0, 0, display.width, display.height);

この行の直後：

// clear canvas
context.clearRect(0, 0, display.width, display.height);

ソリューションはテストされ、魅力のように機能します。

与えられたコードの簡単な分析から、透明な（clearRect）キャンバスがこれらの問題を引き起こしていて、それを不透明なもの（fillRect）に変更するとバグが修正されると思います。

于 2013-08-08T10:05:04.350 に答える
0

ビューを作成するときの問題を修正しました。

if (Build.VERSION.SDK_INT >= 16) {
  try {
    Method method = root.getClass().getMethod("setLayerType", int.class, Paint.class);
    method.invoke(root, 0x01/* View.LAYER_TYPE_SOFTWARE */, null);
    Log.d(TAG, "hardware accelaration disabled");
  } catch ...
}
于 2013-09-26T07:55:37.280 に答える