2011-08-28 6 views
8

私はキャンバスを使って描画するWebアプリケーションを構築しています。無限大の描画スペース(任意の方向にスクロールでき、データ/イメージをデータベースに保存することができます)を持たせたいと思います。無限に大きなキャンバスを持つには?

何かがここでそれに似て行われました:http://wordsquared.com/、より多くの人々がそれを再生するほど、それは大きくなります。

これは何らかの方法でタイリングした画像を必要とし、dbに保存してから、ビューポート内で画像を書き込むことだけを知っています。どのようにこれと無限のスクロールを達成する/私はどこから始めるべきですか?

+2

あなたはそれがない正しく、無限大にすることはできません、とあなたはあなたの座標系の限界を打つ終わるだろうとばかり、の方向に次のチャンクをロードする必要はありません。あなたがしたいことは、キャンバスを常に見直して、その中心がロードされた領域の端に達したときに新しいチャンクを読み込むことです。 – ssube

+0

私が意味することは、あなたがスクロールするほど、それが大きくなることです。もちろん、私は限界を一応設定する必要がありますが、私が設定した規模の大きさになるようなものが欲しいです。 – sdfadfaasd

+0

可能な複製[キャンバスを無限にする](http://stackoverflow.com/questions/38589304/make-a-canvas-infinite) – bummi

答えて

4

これはちょっと変わった方法ですが、潜在的に(理論的には、非結合ストレージスペースで)無限に私を襲っただけです。

現在ロードされているボードのチャンクを保存する必要があります。これは、一種の一意のIDとして与えられます。チャンクとそのデータは、次の列を持つテーブルにする必要があります。チャンクの

  • チャンクID
  • チャンクデータ
  • IDを北に東の南
  • IDの
  • IDを
  • あなたはおそらくjQueryのOを使用して、キャンバスをドラッグ可能にする必要があり
  • 西

のID r同様(this questionにはいくつかの情報があります)。

ドラッグするキャンバスのイベントリスナーを作成し、移動する距離を追跡します。リリース時に、キャンバスが別のチャンクに変更されていない場合は、何もしないでください。

キャンバスが現在のチャンクを残している場合は、格納されたIDを使用して、次にロードするチャンクを見つけます。 IDが0の場合、チャンクはまだ存在しないと想定して作成します。それ以外の場合は、チャンクをロードして、既存のチャンクを置き換えます。キャンバスを中央に戻します。

十分なIDと十分な記憶領域があれば、座標系が使用されていないので、無限のキャンバスが得られます。また、エッジをラップするか、ワームホールを作成することもできます。

これを実装する方法はわかりませんが、キャンバスの移動距離を追跡するだけで済みます。 Googleマップは似たようなものなので、それらの処理方法を見ていきます(私はまもなくそうして、この回答に実装の詳細を追加できるかどうかを確認します)。

これは最も実用的で簡単な方法ではないかもしれませんが、それは思いがけない面白いことでした。

編集:私はこれが基本的な機能のラインに沿っていると信じて: http://candrews.net/blog/2010/10/introducing-sprymap/ それは軽量ドラッグjavascriptのマップです。あなたは単にそれまでの距離を追跡するだけです。

+0

うーん..確かにそれは従来のものではありませんが、おそらく最も実用的でシンプルな方法ですまだ聞いたことがない。考えてみたら、各タイルを(1000px x 1000px)のような大きなHTMLキャンバスにするのが最善であると思っているので、すべてのデータを保存してロードするのは簡単です – sdfadfaasd

0

私はTiledCanvasと呼ばれるこのライブラリに対応しました ズームと移動のためのインターフェイスを提供しています。そして、すべてのキャンバスのapiを使用して無限の空間を描画します。

これは、座標に基づいてチャンクを動的に読み込むことができます。ちょうどx、y、コールバックをパラメタとして取得する関数を与え、キャンバスに描画できるものを戻すだけです。

https://github.com/Squarific/TiledCanvas

関連する問題