0

私のモバイル Web サイトにはいくつかのページがあり、下部にタブ ナビゲーション バーがあり、ユーザーはページ間を移動できます。ページの 1 つに、ユーザーが描画できるキャンバスがあります。問題は、あるページに移動してからキャンバス ページに戻るたびに、古い図面が一瞬表示されますが、その後消去されます。

これは、ページに入るたびにページが再初期化されることが原因だと思うのですが、どうすれば防ぐことができますか?

私はすでにページをキャッシュしようとしましたが、役に立たないようです...他のアイデアはありますか?

4

1 に答える 1

0

jQuery mobile pagebeforeshowでキャンバスをクリアする必要があります。

ユーザーが移動する最初のページは常に DOM にとどまるため、そのページにキャンバスが含まれていて、ユーザーが別のページに移動して戻る場合は、キャンバス要素を手動でリセットする必要があります。

この質問は、キャンバスをリセットする方法 -再描画のためにキャンバスをクリアする方法を示しています。

したがって、コードは次のようになります。

$(document).on("pagebeforeshow", "div.id_or_class_of_page(s)_with_canvas", function () {
    ctx = _your_canvavs_element;

    ctx.save();
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    ctx.restore();
});

キャンバスコードについてはわかりません。

于 2013-11-11T20:44:07.483 に答える