如何从SwiftUI 2.0的ZoomScrollView中保存用户调整后的裁剪图片

核心优化逻辑 #

基于你现有代码，仅通过ZStack布局对齐、视图图层渲染、圆形蒙版裁剪三个核心步骤实现目标功能，无复杂手势计算、无第三方依赖，最终输出严格符合要求的300x300尺寸裁剪图：

• 用ZStack对齐缩放交互层和圆形裁剪边界，保证展示范围和最终捕获范围完全一致
• 直接读取UIScrollView当前的缩放、偏移状态，通过图层渲染获取对应区域的画面
• 给渲染出的方形画面叠加圆形透明蒙版，输出可直接保存的裁剪图

代码修改步骤 #

1. 给ZoomScrollView增加视图引用出口 #

原有自定义ZoomScrollView没有暴露内部UIScrollView实例，外部无法读取缩放状态，补充绑定逻辑：

struct ZoomScrollView<Content: View>: UIViewRepresentable {
  private var content: Content
  // 新增：内部UIScrollView的外部绑定出口
  var scrollView: Binding<UIScrollView?>?

  init(@ViewBuilder content: () -> Content, scrollView: Binding<UIScrollView?>? = nil) {
    self.content = content()
    self.scrollView = scrollView
  }

  func makeUIView(context: Context) -> UIScrollView {
    let scrollView = UIScrollView()
    scrollView.delegate = context.coordinator
    scrollView.maximumZoomScale = 20
    scrollView.minimumZoomScale = 1
    scrollView.bouncesZoom = true
    // 关闭滚动指示器，避免截图时混入UI元素
    scrollView.showsVerticalScrollIndicator = false
    scrollView.showsHorizontalScrollIndicator = false

    let hostedView = context.coordinator.hostingController.view!
    hostedView.translatesAutoresizingMaskIntoConstraints = true
    hostedView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    hostedView.frame = scrollView.bounds
    scrollView.addSubview(hostedView)
    
    // 把初始化完成的scrollView实例传递给外部变量
    DispatchQueue.main.async {
      self.scrollView?.wrappedValue = scrollView
    }
    return scrollView
  }

  // 原有makeCoordinator、updateUIView方法保持不变
  class Coordinator: NSObject, UIScrollViewDelegate {
    var hostingController: UIHostingController<Content>
    init(hostingController: UIHostingController<Content>) {
      self.hostingController = hostingController
    }
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
      return hostingController.view
    }
  }
}

2. 用ZStack重构展示层 #

替换原来的ZoomScrollView展示块，让交互层、裁剪边界、最终裁剪范围完全对齐：

// 在ContentView中新增状态变量
@State private var zoomScrollView: UIScrollView?
@State private var finalCroppedImage: UIImage?

// 替换原有图片展示分支
if image != nil {
  ZStack {
    // 可交互的图片缩放层
    ZoomScrollView(scrollView: $zoomScrollView) {
      Image(uiImage: image!)
        .resizable()
        .scaledToFit()
    }
    // 叠加可见的圆形边界线，给用户明确的裁剪范围提示
    Circle()
      .stroke(Color.white, lineWidth: 2)
      .frame(width: 300, height: 300)
  }
  .frame(width: 300, height: 300)
  // 给整个ZStack套圆形裁剪，保证展示效果和捕获范围完全统一
  .clipShape(Circle())
} else {
  // 原有占位图逻辑保持不变
  Image(systemName: "person.crop.circle")
    .resizable()
    .font(.system(size: 32, weight: .light))
    .frame(width: 300, height: 300, alignment: .center)
    .foregroundColor(Color(.systemGray))
    .clipShape(Circle())
}

3. 补充图片捕获逻辑 #

替换原有Save按钮的点击事件，实现300x300尺寸的圆形裁剪图输出：

Button(action: {
  guard let scrollView = zoomScrollView else { return }
  let targetSize = CGSize(width: 300, height: 300)
  // 开启300x300尺寸的图形渲染上下文
  UIGraphicsBeginImageContextWithOptions(targetSize, false, UIScreen.main.scale)
  defer { UIGraphicsEndImageContext() }
  guard let context = UIGraphicsGetCurrentContext() else { return }

  // 偏移渲染坐标，对齐scrollView当前的内容偏移，截取显示框内的内容
  context.translateBy(x: -scrollView.contentOffset.x, y: -scrollView.contentOffset.y)
  // 渲染当前缩放状态下的图片内容
  scrollView.subviews.first?.layer.render(in: context)

  // 取出渲染好的方形截图
  guard let squareImage = UIGraphicsGetImageFromCurrentImageContext() else { return }

  // 给方形截图叠加圆形透明蒙版，实现最终裁剪
  UIGraphicsBeginImageContextWithOptions(squareImage.size, false, squareImage.scale)
  defer { UIGraphicsEndImageContext() }
  let imageRect = CGRect(origin: .zero, size: squareImage.size)
  UIBezierPath(ovalIn: imageRect).addClip()
  squareImage.draw(in: imageRect)
  let croppedImage = UIGraphicsGetImageFromCurrentImageContext()

  // *最终得到的croppedImage：300x300尺寸、圆形裁剪、保留用户缩放调整后的状态
  finalCroppedImage = croppedImage
  // 替换为实际本地保存逻辑即可
  print("捕获的图片尺寸: \(croppedImage?.size ?? .zero)")
  self.presentationMode.wrappedValue.dismiss()
}) {
  HStack {
    Text("Save").foregroundColor(isAccepted ? .gray : .blue)
  }
}

实现效果说明 #

• 捕获的图片严格为300x300正方形画布，圆形显示区域外为透明通道，不会混入屏幕其他UI元素
• 完全保留用户手动调整的缩放比例、图片位置，和用户在界面上看到的圆形框内画面1:1对应
• 没有引入复杂的手势映射计算，所有状态直接复用UIScrollView原生的缩放、偏移逻辑，代码简洁易维护

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