非常に長い領域でレンダリングする複数のオブジェクト、キャンバス？

Question

多くのポリゴン（シンプルな形 - 円、四角、テキスト）を使って非常に長い領域（長さが定義されていない）を表示する必要があります。明らかに私は一度に見ることができる小さな断片だけを必要とします。主な問題は効率的なスクロールとマウスイベントの受け渡しです。私はGWTに書きます。今まで考えたこと：

1）キャンバス。可視領域のサイズのキャンバスを作成します。バッファキャンバスを可視領域より大きく作成します。バッファーにレンダリングします（スクロール時に何かが可視領域で変更されたり、新しい部分が左右に変更された場合のみ変更されます）。また、必要に応じて、バッファの適切な部分を可視のキャンバスにレンダリングします。これは十分速く動作するようです。しかし！私はこのスマートなバッファリングを実装し、どの部分を再レンダリングする必要があるかを決定する必要があります。マウスクリックやマウスオーバーを検出するためには、すべてのオブジェクトを覚えておく必要があります（マウスオーバーチェックが頻繁に行われるように、インターバルツリーやセグメントツリーなどのすばらしい構造にする必要がありますが、これは既にブラウザに実装されています。 - これは多くの仕事！ 多分準備ができていますか？

2）html（divs/images） - 考えられるのは、すべての要素をdivと画像でレンダリングすることです（最初にキャンバス上に画像を生成することはできません）。長いdivにそれらを絶対配置し、ブラウザのスクロールを使用してdivをスクロールします。この長いdivの最後に到達するまで動作し、スクロールするスペースが増えるようにすべての位置を変更する必要があります（これにより、しばらくの間スクロールが停止します）。だから多分、2番目のdivでレンダリングしてからスイッチを切り替えることは可能でしょう。これはうまくいくかもしれませんが、これはハックのように聞こえるでしょうし、おそらく一度に複数のオブジェクトが見えるという重大な問題があります。ブラウザに実装されたマウスイベント用のPlus。

3）SVG -

）任意のアイデアを、私は試していないが、私は、左/右にスクロールしたとき、私は、HTML/divタグ（と同じパフォーマンス上の問題に実行すると思いますか？どのアプローチが最高ですか？もっと良いものはありますか？ WebGL（IEでは動作しませんし、IEへの移植は難しいでしょう）。これをどのように実装すればよいですか？

Answer 1

あなたは賛否両論を理解しているようです。キャンバスは高速ですが、レベルが低いので、コードするのが難しくなります。 DOMは、イベントハンドリングとオブジェクトアクセスのために、処理速度が遅くなりますがコード化が容易です。 DOMが遅すぎる場合、キャンバスに頼らざるを得ません。

可能な妥協案は、フルキャンバスをレンダリングし、overflow:hiddenを使用してクリップすることです。これは私が取り組んでいる波形表示で行ったことです。

SVGはシェイプのDOMよりも簡単です。 SVGは完全にクロスブラウザではないので、あなたは何かを使用する必要がありますhttp://raphaeljs.com/

Answer 2

私はそれが比較的速いのでキャンバスに行くでしょう。

オフスクリーンの位置、マウスイベント、再レンダリングまでは、Fabric.jsなどのキャンバスライブラリを使用してすべての処理を行うことができます。 demosをご覧ください。

Event inspector demo & working with events tutorialが役に立つ可能性があります。

デフォルトではオフスクリーン（not）レンダリングが行われます。オブジェクトを画面外の座標に配置するだけで、オブジェクトは表示されません。