如何在 uiimageview/uiscrollview 中将图像居中（缩放前和缩放后）

Question

我试图将图像居中（相对于 iPhone 屏幕），以便在加载视图时，图像的宽度/高度为中心...在我的情况下，我的视图加载在图像本身的像素点 0,0 处，如果我缩小图像，图像会出现在左上角，而不是屏幕/视图的中间位置。这是我到目前为止所得到的：

UIImage *image = [UIImage imageNamed: @"t.bmp"];
self.view.backgroundColor = [UIColor blackColor];
self.mi.frame = CGRectMake(0, 0, image.size.width, image.size.height);
self.mi.contentMode = (UIViewContentModeCenter);
self.mi.backgroundColor = [UIColor blackColor];
[self.mi setImage:image];

/* Draw a line here!!
UIGraphicsBeginImageContext(self.mi.frame.size);
[self.mi.image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 20.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0,0);
CGContextAddLineToPoint(context, 200, 200);    
CGContextMoveToPoint(context, 200,0);
CGContextAddLineToPoint(context, 0, 200);
CGContextStrokePath(context);
self.mi.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
*/

self.expimg.maximumZoomScale = 2.0;
self.expimg.minimumZoomScale = 0.1;
self.expimg.clipsToBounds = YES;
self.expimg.delegate = self;
[self.expimg setContentSize:self.mi.frame.size];

[self.expimg addSubview: self.mi];
[self.view addSubview: self.expimg];

谢谢！

编辑：mi 是一个 UIImageView，expimg 是一个 UIScrollView（使用的界面生成器）。另外，还定义了 viewForZoomingInScrollView。

Answer 1

您应该能够通过在初始加载时以及缩放级别发生变化时调整图像和滚动视图的位置和大小来实现此目的。创建一个在 viewDidLoad 上调用的方法，并在 UIScrollViewDelegate 方法 scrollViewDidZoom: 上再次调用。

像这样的东西应该可以工作（其中imageView和scrollView是类属性）：

- (void)centerImage {

    CGSize screenSize = CGSizeMake(320, 480);

    CGSize imageSize = imageView.frame.size;
    imageSize.width = imageSize.width * scrollView.zoomScale;
    imageSize.height = imageSize.height * scrollView.zoomScale;
    CGSize scrollSize = scrollView.frame.size;

    CGFloat centerX;
    CGFloat centerY;
    CGFloat left;
    CGFloat top;

    if (imageSize.width > screenSize.width) {
        scrollSize.width = imageSize.width;
        centerX = imageSize.width/2;
        left = 0;
    } else {
        scrollSize.width = screenSize.width;
        centerX = screenSize.width/2;
        left = centerX - imageSize.width/2;
    }

    if (imageSize.height > screenSize.height) {
        scrollSize.height = imageSize.height;
        centerY = imageSize.height/2;
        top = 0;
    } else {
        scrollSize.height = screenSize.height;
        centerY = screenSize.width/2;
        top = centerY - imageSize.height/2;
    }

    CGRect scrollFrame = scrollView.frame;
    scrollFrame.size = scrollSize;
    scrollView.frame = scrollFrame;

    CGRect imageFrame = imageView.frame;
    imageFrame.origin = CGPointMake(left, top);

    scrollView.contentOffset = CGPointMake(centerX-(imageSize.width/2), centerY-(imageSize.height/2));

}

我还没有测试过这个，所以我的一些数学可能是错误的。无论哪种方式，它都希望能让您很好地了解该怎么做。

Answer 2

第 1 步：创建一个图像视图属性，然后在 viewDidLoad 处初始化它并添加到滚动视图：

self.pictureImage = [[UIImageView alloc]initWithImage:self.picture];
[_scrollView addSubview:_pictureImage];
self.pictureImage.alpha = 0;
_scrollView.delegate = self;

第 2 步：创建 adjustZoomScale 函数以获得最小比例

- (CGFloat)adjustZoomScale{
CGFloat scale = self.scrollView.bounds.size.width / self.pictureImage.bounds.size.width;
CGFloat h = scale * self.pictureImage.bounds.size.height;
if (h > self.scrollView.bounds.size.height) {
    scale = self.scrollView.bounds.size.height / self.pictureImage.bounds.size.height;
}
return scale;
}

第 3 步：因为滚动框架视图将在 viewDidAppear 处更新，因此我们需要在此处调整缩放比例。并设置 alpha 使图像看起来更平滑：

- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear: animated];
_scrollView.maximumZoomScale = 1.0;
_scrollView.minimumZoomScale = [self adjustZoomScale];
[_scrollView setZoomScale:_scrollView.minimumZoomScale];
self.pictureImage.alpha = 1;
}

步骤 4：实现 viewForZoomingInScrollView （滚动委托方法）并返回图像视图

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return self.pictureImage;
}

步骤 5：实现 scrollViewDidZoom （滚动委托方法）并调整点查看图片

- (void)scrollViewDidZoom: (UIScrollView*) scrollView {
CGSize boundsSize = scrollView.bounds.size;
CGRect contentsFrame = _pictureImage.frame;

if (contentsFrame.size.width < boundsSize.width) {
    contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0;
} else {
    contentsFrame.origin.x = 0.0;
}

if (contentsFrame.size.height < boundsSize.height) {
    contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0;
} else {
    contentsFrame.origin.y = 0.0;
}
_pictureImage.frame = contentsFrame;
}

感谢 shawhu 这篇文章用于调整点缩放时的图像视图

Answer 3

[scrollView ZoomToRect:CGRectMake(x, y, 宽度, 高度) 动画:YES];将为你工作...
其中 rect 应该以这些中心坐标为原点。