0

paper.js を使用して html5 図面を管理しています。Chrome でページの下部をリロードしてこの行を表示すると、明らかです。

画像1

一番下でリロードすると、上下にスクロールでき、線は忠実に維持されます。

しかし、ページの上部をリロードして下にスクロールすると、次のように線がギザギザになり、アンチエイリアス処理されていないように見えます。

画像2

奇妙なことに、最初にページの上部にロードした後、上下に数回スクロールすると、忠実度が低下します。

画像3

これは Safari でも発生し、Firefox でも発生しますが、ほとんど目立たない程度です。これは、一番下にロードすると、ロードより上のすべての dom 要素がページのロード時にレンダリングされるという事実と関係があると思います。一方、上部にロードすると、要素はスクロールしてビューに表示されたときにのみレンダリングされます (スクロール イベントと戦って、CPU の再描画を行いますか?)

しかし、ページの読み込み時にすべての dom イベントが確実にレンダリングされるようにするためにできることはありますか? $(document).ready で初期描画関数を既にラップしています。

4

1 に答える 1

0

これは単にパフォーマンスに関連しているようです (まだプロファイリングしていないので、CPU とメモリのどちらが制限要因なのかはわかりません)。しかし、onFrame ループで console.log に計算を追加するだけで、html5 で開始されたアニメーションや画面の再描画がないにもかかわらず、線がギザギザに表示されます。

編集：

本当の問題は、次のようなキャンバス タグにサイズ変更を追加することであることが判明しました。

<canvas resize></canvas>

ページ内の特定のポイントの下にあるすべてが、おかしく再描画されます。

于 2012-08-28T22:27:04.887 に答える