5

私はしばらくの間このシートマッピングチャートの取得に取り組んでおり、いくつかの反復を作成しました。私が見つけ続ける問題は、IE8に到達したときに、このためのパンが遅くなり、遅れる方法です。

この時点でロード時間を短縮するために持っているのは、マップをドラッグするたびにie8が再レンダリングしたいと思っているので、「ストローク」を置き換えるpngが作成されます。

IE8ユーザーにこのオプションを強制することを期待してコントロールも追加しましたが、それでもパンに遅延があり、IE8(および可能であればIE7)のユーザーがコントロールなしでドラッグ/パンできる場合は、応答時間が少し速くなりますそれは素晴らしいことです。

これが私の現在のJSFiddleです

私はまだJSに少し慣れているので、何か提案があれば大歓迎です。(PS Chromeフレームは素晴らしいですが、私にとってはオプションではありません

アップデート

元のドラッグ関数を削除し、jqueryuiのドラッグ可能な関数を使用してコードを置き換えました。Martinは、Raphael要素ではなく、divをドラッグすることを提案しました。そうすることで、これはie6-8で飛ぶことができます。これは素晴らしいことですが、スケーリングについての私の懸念が生じました。ズーム時に前に見たものは、紙の要素WxHが同じ比率のままで、ズームインすると描画が途切れることになります。Raphaelのドキュメントを調べた後、paper.setSizeに出くわしました。setSizeは、このプロジェクトがie6-8で移動して溝を掘り、そのパス内のすべてのブラウザーをほぼ征服できるようにするために必要なものでした。

つまり、jqueryuiのドラッグ可能でpaper.setSizeを使用することで、クロスブラウザのズームとパンブルーが解消されました。

4

1 に答える 1

3

Fiddle で確認できることから、イベント ハンドラー.translate()内で呼び出して、画像の新しいレンダリングをトリガーしています。mousemove

mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);

このアプローチは、IE8 はもちろん、すべてのブラウザーでパフォーマンスに悪影響を及ぼします。IE8 で VML を扱う場合、画像内のすべての DOM 変更が画像の再レンダリングにつながることを考慮する必要があります。パンニング中にそれを行うと、常に非常に遅くなります。

Fiddle で既に jQuery を使用しているようです。パンのパフォーマンスを向上させたい場合は、次のことを検討する必要があります。

  1. Raphaël で画像を現在のズーム レベルで 1 回だけレンダリングします。パン中はいつでも VML/SVG 画像の変換を変更しようとしないでください。
  2. 既にあるパンのmousemove実装を使用して、代わりに VML/SVG 画像を保持する HTML コンテナーを移動またはスクロールします。を想像し<div>overflow: hidden、画像を相対的に内側に移動するか、適切な位置にスクロールします。

これには座標計算の調整が必要になりますが、すべてのブラウザーでパフォーマンスが向上します。

于 2012-06-22T18:30:25.487 に答える