忍者ブログ
  • 2024.03
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 2024.05
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【2024/04/29 10:52 】 |
スクロールとスケーリング
意外と頭を悩ますのがスクロールとスケーリング。
個々は難しくないんだが、両方混ざると厄介。
しかも、瞬間でなく滑らかにスクロール&スケーリングしてほしい。やっぱりiPhoneだもんね。


今回のルール
・スケーリングは2段階
・縮小表示では、全体を映す。つまり、スクロールしない
・拡大表示では、一部分を映す。スクロールする
・滑らかにスケーリングする
・ダブルタップした点を中心にスケーリングする。スケーリング中に外側が見えてしまわないようにする
・スクロールは1マスずつ
・外側が見えてしまわないようスクロールする


まずスケーリングから。
状態遷移を4つ作る。
 拡大表示、縮小中、縮小表示、拡大中
フレームごとにステートカウントを更新し、表示倍率も更新(特に縮小中、拡大中のとき)
スケーリングの中心点を1カ所決める。とくに拡大中のときに使う。ダブルタップした点がそこに相当。
縮小中の場合は、スケーリング中心は必ず全体の中心になる。なぜなら、縮小表示は全体を表示すると決めているから。


次にスクロール。
基準点を決める。今回は左上点とした。
これは、等倍表示(=縮小表示の倍率)の場合の点である。
拡大・縮小しただけでは位置は変わらない。
というか、ずっと表示範囲の左上点のスクリーン座標を保持したまま、値が変わらない。

スクロールした際は、スケーリングの中心点を移動させた。
ブロックのサイズ(表示中の倍率を乗じたサイズ)分だけ移動させる。(スクロール方向と同じ向き)


描画する関数には、
 左上点座標(スクリーン座標)
 ブロックサイズ
だけを渡す。
この関数は、左上点を基準に、渡されたブロックサイズでブロックを単純に描画していく。

この関数に渡す左上点座標は、
 スケーリング中心座標を基準に、スクロール基準としている左上点座標がどこにあるか、を渡す
式で言うと、
posScaleCenter - (posScaleCenter - posLT) * scaleRate
となる。
posScaleCenter(1 - scaleRate) + posLT * scaleRate
posLTの位置から、scaleRate倍したブロックサイズを並べていくと、posScaleCenterの位置で重なる。


要するに、表示中心座標Pと、スケール値Rがあればいいはずなんだ。
あとはアンカーポイントA。

フィールドの座標Pを、スクリーンのAの位置に合わせ、サイズをRとして描画。
基本は、スケーリングするときはRを変化させ、スクロールするときはAを変化する。
ただ、スケーリングのときにスケーリング中心点を付けたいので、これがちょっと面倒になるということなのだ。

P,A,Rの3つを持つ構造体を作って、どれかを指定したらあとは自動で計算してくれたりすると便利かも。

PR
【2011/03/29 01:58 】 | 開発日記 | 有り難いご意見(0) | トラックバック()
<<AWS | ホーム | 正方形は長方形か?>>
有り難いご意見
貴重なご意見の投稿














虎カムバック
トラックバックURL

<<前ページ | ホーム | 次ページ>>