拡大画像を回転させた時の問題
例えばこんな画像を拡大させたとする。
内部的にはこんなふうになっているのだろう。下図は画像が拡大された状態で白い点線内が表示されている（十字は中心がわかるように描いてある）。
ロジック
拡大中の画像を回転後もきちんと表示するには中心座標を押さえておくのがポイント。回転後に中心座標から contentOffset を決めることができて、それによって意図した位置で拡大画像を表示することができる。
contentOffset.x = center.x - w/2 contentOffset.y = center.y - h/2なので回転前の中心座標をとっておいて、それを回転後に使えばいい。
ただ今回の場合、座標系自体が回転しているので話が複雑になる。
例えば左回転した場合、ビューの原点はこんな感じになる。
この回転は変換行列を使って求められる（と思う）が、今回のケースではもっと簡単（原始的な？）な方法がある。これは回転前の中心位置を座標としてではなく表示ビュー内の相対位置（比）として取っておき、回転後はこの比を使って新しい中心位置を割り出す。
以下に手順を示す。
1. 回転前
UIScrollView.contentOffsetより回転前のオフセット座標がわかる（oldContentOffset）。ここから回転前の中心座標が求められる。
oldCenter.x = oldContentOffset.x + oldContentSize.width/2.0 oldCenter.y = oldContentOffset.y + oldContentSize.height/2.0さらに全体の大きさから相対位置（比）が求められる。
ratioX = oldCenter.x / oldSize.width ratioY = oldCenter.y / oldSize.height
2. 回転後
まず回転後の中心位置を求める。
newCenter.x = ratioX * newSize.width newCenter.y = ratioY * newSize.height中心位置が分かればオフセット座標は簡単に求められる。
newContentOffset.x = newCenter.x - newContentSize.width/2.0 newContentOffset.y = newCenter.y - newContentSize.height/2.0これを UIScrollView.contentOffetへ入れてやれば回転前の中心が中心にくるような表示となる。
この方法の利点は回転方向と無関係に計算ができること。一見ややこしいが分岐が無いのでコードはすっきりするはず。
実装
上記のロジックをプログラムに落としこんでみる。こんな感じ。
- (void)layoutScrollViews
{
CGSize newSize = self.view.bounds.size;
CGSize oldSize = previousScrollSize_;
previousScrollSize_ = newSize;
// save previous contentSize
//--
ImageScrollView* currentScrollView =
[self.imageScrollViews objectAtIndex:kIndexOfCurrentScrollView];
CGSize oldContentSize = currentScrollView.contentSize;
CGPoint oldContentOffset = currentScrollView.contentOffset;
CGFloat zoomScale = currentScrollView.zoomScale;
// [A] calculate ratio (center / size)
CGPoint oldCenter;
oldCenter.x = oldContentOffset.x + oldSize.width/2.0;
oldCenter.y = oldContentOffset.y + oldSize.height/2.0;
CGFloat ratioW = oldCenter.x / oldContentSize.width;
CGFloat ratioH = oldCenter.y / oldContentSize.height;
// set new origin and size to imageScrollViews
//--
CGFloat x = (self.contentOffsetIndex-1) * newSize.width;
for (ImageScrollView* scrollView in self.imageScrollViews) {
scrollView.frame = CGRectMake(x, 0, newSize.width, newSize.height);
CGSize contentSize;
if (scrollView == currentScrollView) {
contentSize.width = newSize.width * scrollView.zoomScale;
contentSize.height = newSize.height * scrollView.zoomScale;
} else {
contentSize = newSize;
}
scrollView.contentSize = contentSize;
x += newSize.width;
}
// [B] adjust current scroll view for zooming
//--
if (zoomScale > 1.0) {
CGSize newContentSize = currentScrollView.contentSize;
CGPoint newCenter;
newCenter.x = ratioW * newContentSize.width;
newCenter.y = ratioH * newContentSize.height;
CGPoint newOffset;
newContentOffset.x = newCenter.x - newSize.width /2.0;
newContentOffset.y = newCenter.y - newSize.height/2.0;
currentScrollView.contentOffset = newContentOffset;
}
// adjust content size and offset of base scrollView
:
}
[A] で ratioX, ratioY を求め、[B]で newOffsetを求めている。なお回転中の処理では oldSize のみ求めることができないのでこれはメンバ変数を用意してとっておく。@interface EasyGalleryViewController : UIViewController {
:
CGSize previousScrollSize_;
}回転処理中に UIScrollView.frame.size で取得できるような記述をどこかでみたのだが、試してみるとシミュレーターでは横⇒縦のケースでは取得できなかった（回転後のサイズとなっていた）。サンプル
さて実行してみよう。
拡大して
出た。そのまま回転を続けても中心は変わらない（※端の方は表示領域の関係で補正される）。
ソースコード
GitHubからどうぞ。
EasyGallery at 2010-09-19 from xcatsan's iOS-Sample-Code - GitHub
- - - - -
たかが拡大時の位置補正、なんて高を括っていたら見事にハマってしまった。方法はともかく動いてよかった。
(追記) なおこのブログを書き終えた後で気がついたのだが実はこんなに大げさな計算はいらない。拡大したままの回転でのポイントは zoomScaleの扱い。
CGFloat x = (self.contentOffsetIndex-1) * newSize.width;
for (ImageScrollView* scrollView in self.imageScrollViews) {
scrollView.frame = CGRectMake(x, 0, newSize.width, newSize.height);
CGSize contentSize;
if (scrollView == currentScrollView) {
contentSize.width = newSize.width * scrollView.zoomScale;
contentSize.height = newSize.height * scrollView.zoomScale;
} else {
contentSize = newSize;
}
scrollView.contentSize = contentSize;
x += newSize.width;
}回転処理中に contentSize を計算しているが、ここで *scrollView.zoomScale をいれればこれだけで済んでしまう（以前は入っていなかった）。これに気がつかないが為に延々と時間を費やしてしまった...。ただこの方法だと中心位置は微妙にずれる。計算した場合は中心位置がずれないのでそれを慰めに？良しとしよう。
Responses
Leave a Response