2. 各パーツの関係性
[ ズーム用画像とナビゲーション用画像の関係 ]
・縦横比
同じ比率でないとズレが生じてしまう。一枚の画像を使い回すのがいいだろう。
・拡大縮小率
デザインに大きく関わってくる部分である。ここでは、ズーム用画像に対し、ナビゲーション用画像を1/10にしている。
ズーム用画像とナビゲーション用画像の関係
[ ズーム用画像とドラッグエリアの関係 ]
・基準点（0,0）からの位置
ドラッグエリアの位置が、 ズーム用画像へ10倍（100%時）で反映される。一番楽な方法は、共に基準点（0,0）に配置することだが、ここではドラッグエリアの位置を基準点（0,0）になるように計算をしているので、どこにドラッグエリアが配置されていても構わない。
・表示範囲
ズーム用画像の表示される範囲とドラッグエリアサイズの比率は同じである。3:2にしている。
ズーム用画像とドラッグエリアの関係
[ ドラッグエリアとナビゲーション用画像の関係 ]
・基準点（0,0）からの位置
ドラッグエリアが移動できる範囲はナビゲーション用画像の内側になる。ナビゲーション用画像の位置からドラッグ範囲を算出する。
ドラッグエリアとナビゲーション用画像の関係
大まかなパーツとそれぞれの役割はこんな感じである。出来るだけ頭の中でこの関係性をイメージして欲しい。そうすれば、制作に入ったとき、どのパーツとどのパーツを組み合わせればよいかなど、よりスムーズに作業が出来ると思う。次回からは、これらを実際の形にしていく。
VOL.20 [ IMG Explore : ズーム(1) ] 終わり
[ ←BACK ]
