9

svg に大きく依存する Web アプリケーションを構築しています。参考までに、私は raphael js ライブラリを使用してすべてを処理しています。

この特定のケースでは、スクロールバーを模倣し、画面全体で多数の svg 機能 (〜 500 要素) を移動するものを実装しました。これらの機能の一部は<text>(~100) 要素です。その他の要素には、、<rect>および<image>要素が含まれ<path>ます。

そのため、私のアプリケーションはラップトップではあまり機敏ではなく、速度のためにiPadで処理するのは本当に面倒であることに気付きました。ただし、スクロール中にテキスト要素が削除または無視されると、すぐに適切な速度になります。

いくつかの速度テスト ( を使用した非常に大雑把なものnew Date().getTime()) を試してみたところ、要素を除くすべての要素を移動するのに ~10 ミリ秒かかることがわかりましたが、要素が含まれている<text>場合は ~120 ミリ秒かかります。<text>

これは、各文字がベクトル形状としてレンダリングされ、そのような複雑な構造によって妨げられているものを正確に計算するために処理能力の負荷がかかるために発生すると考えています.

テキストを埋め込むだけで、テキストが図形ではなくラスター グラフィックとしてレンダリングされるようにすることはできますか? または、他の方法でテキストのレンダリングのパフォーマンスを向上させますか?

背景の透過性は必要ありません。派手なフォントも使用しません。

4

2 に答える 2

5

Canvas を使用してテキストを事前にレンダリングし、画像を SVG に埋め込むことができます。これが一般的なテキスト要素のレンダリングとどのように比較されるかはわかりませんが、私たちのデモではこれは非常にうまく機能します (「階層」の例のドロップ シャドウを参照してください - それらは最初にキャンバスにレンダリングされ、次に複製され、SVG 内から参照されます。 ）。

これらのデモも仮想化を多用していることに注意してください。つまり、画像を拡大し、一部の要素のみが実際にビューポート内にある場合、他の要素は SVG から削除されるため、大幅に高速化されます。

デモは単に要素を移動するだけでなく、同じかそれ以上のパフォーマンスを簡単に実現できるはずです。

ただし、ラファエルでこれを行う方法はわかりませんが、ラファエルでもキャンバス画像からSVGにデータURLを配置できるはずだと思います。

于 2012-11-20T16:22:46.313 に答える
2

RaphaelサイトによるPaper.print（）

指定されたサイズの指定された位置に指定されたフォントを使用して記述された指定されたテキストを表すパスを作成します

基本的に、テキストはパスに変換されます。明らかに、これにはパフォーマンスの問題があります。

おそらくPaper.text（）の使用に固執するのが最善でしょう

アップデート

ですから、アドバイスを出すだけでは満足できません。http： //www.jsperf.comでいくつかのテストを設定しました。これらを使用して、パフォーマンスの違いを比較し、さまざまなタイプのRaphaelオブジェクトをアニメーション化および変換できます。

これらをiPadで実行すると、テキスト要素の移動が本当に遅いかどうかが表示されます。もう1つ注意すべき点は、少なくとも私が実行したテストでは、paper.print（）とpaper.text（）のパフォーマンスにそれほど違いはなかったことです。

jsperfでテストを実行します

于 2012-11-20T16:28:57.067 に答える