Swift中UIScrollView内UIImageView旋转问题及锚点设置咨询

Hey there! 我刚好踩过UIScrollView嵌套UIImageView做旋转翻转的坑，给你分享下靠谱的解决方案和锚点匹配的细节：

你遇到的问题本质是：UIScrollView的缩放、contentSize都是基于UIImageView的原始frame计算的，而直接修改transform只会改变View的视觉呈现，不会更新它的frame和bounds尺寸。再加上aspectFill是针对UIImage本身的显示模式，这就导致旋转/翻转后，ScrollView的缩放逻辑和View的实际显示完全脱节，出现错位、缩放比例乱掉的情况。

我推荐两种思路，优先选第一种，更稳定：

思路1：直接修改UIImage的方向/翻转（推荐） #

这种方式是先把图片本身旋转/翻转，再赋值给UIImageView，让ScrollView基于新的图片尺寸重新计算缩放和contentSize，从根源上避免错位。

1. 编写图片处理工具方法 #

先写一个通用的方法，用来生成旋转/翻转后的图片：

func transformedImage(from image: UIImage, rotationAngle: CGFloat, isFlippedHorizontally: Bool = false) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }
    
    // 先平移到图片中心，确保旋转/翻转以中心为锚点
    context.translateBy(x: image.size.width/2, y: image.size.height/2)
    // 执行旋转
    context.rotate(by: rotationAngle)
    // 执行水平翻转（如果需要）
    if isFlippedHorizontally {
        context.scaleBy(x: -1, y: 1)
    }
    // 平移回原点
    context.translateBy(x: -image.size.width/2, y: -image.size.height/2)
    
    image.draw(in: CGRect(origin: .zero, size: image.size))
    let resultImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return resultImage
}

2. 触发旋转/翻转时更新View和ScrollView #

比如用户点击“旋转90度”按钮时：

@IBAction func rotateButtonTapped(_ sender: UIButton) {
    guard let originalImage = imageView.image else { return }
    
    // 生成旋转90度后的图片（.pi/2是90弧度）
    let rotatedImage = transformedImage(from: originalImage, rotationAngle: .pi/2)
    imageView.image = rotatedImage
    
    // 更新ScrollView的contentSize为新图片的尺寸
    scrollView.contentSize = rotatedImage?.size ?? originalImage.size
    
    // 重新计算最小/最大缩放比例，适配当前ScrollView的可视区域
    updateZoomScales()
    
    // 重置缩放比例到最小值，避免缩放状态混乱
    scrollView.setZoomScale(scrollView.minimumZoomScale, animated: true)
}

3. 实现缩放比例计算方法 #

这个方法用来根据ScrollView的尺寸和图片尺寸，计算合适的最小/最大缩放比例（适配aspectFill逻辑）：

func updateZoomScales() {
    guard let image = imageView.image, !scrollView.bounds.isEmpty else { return }
    
    let scrollViewSize = scrollView.bounds.size
    let imageSize = image.size
    
    // 计算让图片刚好填满ScrollView的缩放比例（aspectFill）
    let widthScale = scrollViewSize.width / imageSize.width
    let heightScale = scrollViewSize.height / imageSize.height
    let minScale = max(widthScale, heightScale)
    
    // 最大缩放比例可以自定义，比如设为最小比例的2倍
    let maxScale = minScale * 2
    
    scrollView.minimumZoomScale = minScale
    scrollView.maximumZoomScale = maxScale
}

思路2：修改UIImageView的Transform（不推荐，容易踩坑） #

如果一定要通过修改View的transform来实现旋转/翻转，必须同步更新View的frame和ScrollView的contentSize，因为transform不会改变View的frame属性：

@IBAction func rotateViewTapped(_ sender: UIButton) {
    // 先让图片中心和ScrollView可视区域中心对齐，避免旋转后偏移
    alignImageCenterToScrollView()
    
    // 旋转90度
    imageView.transform = imageView.transform.rotated(by: .pi/2)
    
    // 计算transform后的实际尺寸
    let transformedBounds = imageView.bounds.applying(imageView.transform)
    let newSize = CGSize(width: abs(transformedBounds.width), height: abs(transformedBounds.height))
    
    // 更新ImageView的frame和ScrollView的contentSize
    imageView.frame = CGRect(origin: imageView.frame.origin, size: newSize)
    scrollView.contentSize = newSize
    
    // 重新计算缩放比例
    updateZoomScales()
}

要让旋转/缩放时，图片的锚点和ScrollView的可视区域中心匹配，关键是在操作前确保图片中心和ScrollView中心对齐：

func alignImageCenterToScrollView() {
    guard let image = imageView.image else { return }
    
    // 获取ScrollView可视区域的中心
    let scrollViewCenter = CGPoint(x: scrollView.bounds.midX, y: scrollView.bounds.midY)
    // 把ImageView的bounds转换到ScrollView坐标系下，得到图片的实际显示位置
    let imageFrameInScroll = imageView.convert(imageView.bounds, to: scrollView)
    let imageCenter = CGPoint(x: imageFrameInScroll.midX, y: imageFrameInScroll.midY)
    
    // 计算需要调整的contentOffset，让图片中心和ScrollView中心对齐
    let offsetX = scrollViewCenter.x - imageCenter.x
    let offsetY = scrollViewCenter.y - imageCenter.y
    
    scrollView.contentOffset = CGPoint(x: scrollView.contentOffset.x + offsetX, y: scrollView.contentOffset.y + offsetY)
}

• 永远不要只修改UIImageView的transform而不同步更新frame和ScrollView的contentSize，这会导致ScrollView的逻辑和视觉呈现完全脱节
• 每次修改图片或View的尺寸后，必须重新计算ScrollView的min/max zoom scale，否则缩放会异常
• 旋转/翻转前一定要对齐中心，避免图片偏移出可视区域

内容的提问来源于stack exchange，提问作者Rubens Neto