巨大なキャンバスを使った絵画

Question

私はキャンバスを使って、画面よりも何倍も大きい描画アプリケーションを作っています。 私はそれにどのようなアドバイス/指示が必要です。

基本的には、私はこの大きなキャンバスをスクロールして、可視領域のみを描画します。私は2つのアプローチを考えていた ：

1. は上に描画するために64×64（または何でも）「タイル」を持って、その後、スクロールにちょうど新しいタイルをロードします。
2. 指定された領域にあるすべてのユーザーストローク（点）とスクロール計算を記録し、画面サイズのキャンバスのみを使用して描画します。

この場合、私はプロトタイプとしてcocos2dを使用しています。

Answer 1

私は18000 x 18000 NASAの画像を描画するオープンソースプロジェクトを持っています。

このタスクを2つの部分に分割することをお勧めします。まず、スクロールします。 CodaFiが提案したように、スクロールするとCATiledLayersが提供されます。それぞれのCGImageRefはあなたが作成するCGImageRef、つまりあなたの本当に巨大なキャンバスのサブイメージです。ズームインとズームアウトを簡単にサポートできます。

2番目の部分は、キャンバスを描画するか、または別の方法で影響を与えるためにユーザーと対話しています。ユーザーがスクロールを停止すると、不透明なUIViewサブクラスを作成します。このサブクラスはメインビューにサブビューとして追加し、CATiledLayersをホストするビューをオーバーレイします。このビューを表示する必要がある瞬間に、適切な情報を表示して、大きなキャンバスのその部分を適切に描画できるようにします（このような色やそのような色の円など）。

このオーバーレイビューのdrawRect：メソッドを使用して図面を作成します。したがって、ユーザーがビューを変更するアクションを取ると、iOSにdrawRect：を呼び出させるために、必要に応じて "setDisplayInRect："を行います。

ユーザーがスクロールする場合、ユーザーが行った変更を使用して大きなキャンバスモデルを更新し、不透明オーバーレイを削除して、CATiledLayersに大きな画像の適切な部分を描画させる必要があります。この移行はおそらく視覚障害を避けるためのプロセスの最も難しい部分です。

あなたのキャンバスに使用されるオブジェクト定義の配列が大きいとします。タイルのCGImageRefを作成する必要がある場合は、オブジェクトのフレームとタイルのフレームの重なりを探してスキャンし、そのタイルに必要な項目だけを描画します。

Answer 2

Appleにタイリングの例がありますScrollViewSuiteドローイング部分とは関係ありませんが、物のタイル部分を管理する方法についていくつかのアイデアがあります。

Answer 3

多くのモバイルデバイスは、2048x2048を超えるテクスチャをサポートしていません。だから私は推薦する：

• あなたは、フレームごとに4枚のタイルに策定する必要があります画面
• にドロー現在表示されたタイルの唯一の目に見える部分
• 大2048×2048のタイルのうち、あなたの大きな表面を作りますユーザーが4つのタイルのコーナーまでスクロールしている場合は、表示されているタイルが1つしかない場合は余分な描画を行わないようにしてください。

おそらく最も効率的な方法です。 64x64のタイルは実際には小さすぎるため、「描画タイル」呼び出しに大きなオーバーヘッドが発生するため、効率が悪くなります。

Answer 4

CATiledLayerを使用できます。 WWDC2010セッション104を参照してください。

しかし、cocos2dでは動作しない可能性があります。