Cocoaの日々

UIScrollView を使った画像の拡大を処理していてどうもうまくいかないので調べてみるとこんなことがわかった。

UIScrollView.contentOffset は zoomScale倍される

例えば等倍（zoomScale==1）の状態で contentOffset=={100, 100} だったとすると、拡大して zoomScale==2 の場合、contentOffset=={200, 200}となる。つまり２倍になっている。

サンプル

こんな画像を用意して {100,100}を左上に来るように表示した場合、x1, x2, x3のそれぞれの倍率で contentOffset がどう変わるかを見てみた。


これを UIScrollView内に表示して「x1」「x2」「x3」を押すとそれぞれの倍率で拡大し、{100,100}が左上に来るようにしてみた。


コードはこんな感じ。

-(void)setZoomScale:(CGFloat)scale
{
    CGRect zoomRect;
    zoomRect.size.height = self.scrollView.frame.size.height / scale;
    zoomRect.size.width  = self.scrollView.frame.size.width  / scale;
 zoomRect.origin.x = 100.0;
    zoomRect.origin.y = 100.0;
 [self.scrollView zoomToRect:zoomRect animated:YES];
 
 self.contentOffsetLabel.text = NSStringFromCGPoint(self.scrollView.contentOffset);
}

- (IBAction)x1:(id)sender
{
 [self.scrollView setZoomScale:1.0 animated:YES];
 self.scrollView.contentOffset = CGPointMake(100, 100);
 self.contentOffsetLabel.text = NSStringFromCGPoint(self.scrollView.contentOffset);
}

- (IBAction)x2:(id)sender
{
 [self setZoomScale:2.0];
}

- (IBAction)x3:(id)sender
{
 [self setZoomScale:3.0];

}

実行してみよう。

「x1」を押すと等倍のまま表示。contentOffsetは {100,100}。
次に「x2」。contentOffsetが {200,200}になった。
同様に「x3」も contentOffsetが {300,300}と zoomScale倍されたものになった。

ソースコード

GitHubからどうぞ。

ScrollViewZooming at 2010-09-16 from xcatsan's iOS-Sample-Code - GitHub

参考情報

UIScrollView Class Reference