如何为含UIImageView的UIScrollView设置内边距实现自定义图片裁剪

嘿，这个裁剪器的需求我之前做过类似的，给你一步步拆解怎么实现内边距的正确设置，完美匹配你的需求！

核心思路 #

因为你用了.scaleAspectFill的内容模式，图片会保持比例填满UIImageView，我们需要先算出图片缩放后的实际尺寸，再根据固定裁剪区域的位置，计算出scrollView需要的contentInset，让图片能刚好滚动到裁剪区域的边缘。

具体实现步骤 #

1. 计算图片缩放后的尺寸 #

首先得算出图片在.scaleAspectFill模式下的缩放比例，以及对应的UIImageView尺寸：

guard let targetImage = imageView.image else { return }
let scrollViewBounds = scrollView.bounds
let originalImageSize = targetImage.size

// 计算scaleAspectFill的缩放比例：确保图片至少填满scrollView的宽或高
let fillScale = max(scrollViewBounds.width / originalImageSize.width, scrollViewBounds.height / originalImageSize.height)
let scaledImageWidth = originalImageSize.width * fillScale
let scaledImageHeight = originalImageSize.height * fillScale

// 更新imageView的frame和scrollView的contentSize
imageView.frame = CGRect(x: 0, y: 0, width: scaledImageWidth, height: scaledImageHeight)
scrollView.contentSize = CGSize(width: scaledImageWidth, height: scaledImageHeight)

2. 计算并设置scrollView的contentInset #

假设你的固定裁剪区域是cropRect（相对于scrollView父视图的frame），我们先把它转换成scrollView内部的坐标系，再计算内边距：

// 把裁剪区域的坐标转换到scrollView的内部坐标系
let cropRectInScroll = scrollView.convert(cropRect, from: scrollView.superview!)

// 计算水平方向内边距：左边距是裁剪区左边缘，右边距是scrollView宽度减去裁剪区右边缘
let leftInset = cropRectInScroll.origin.x
let rightInset = scrollViewBounds.width - cropRectInScroll.origin.x - cropRectInScroll.size.width

// 计算垂直方向内边距：上边距是裁剪区上边缘，下边距是scrollView高度减去裁剪区下边缘
let topInset = cropRectInScroll.origin.y
let bottomInset = scrollViewBounds.height - cropRectInScroll.origin.y - cropRectInScroll.size.height

// 设置内边距，同时避免负数内边距（防止无效滚动）
scrollView.contentInset = UIEdgeInsets(
    top: max(topInset, 0),
    left: max(leftInset, 0),
    bottom: max(bottomInset, 0),
    right: max(rightInset, 0)
)

3. 关键细节处理 #

• 记得关闭系统自动调整内边距的行为，避免导航栏、状态栏等影响：

  scrollView.contentInsetAdjustmentBehavior = .never
  

• 如果图片缩放后的尺寸比裁剪区域还小，你可能需要调整缩放比例（比如改成以裁剪区域的尺寸为基准计算缩放），确保图片能覆盖裁剪区，否则滚动就没意义了。
• 当屏幕旋转或者裁剪区域位置变化时，要重新调用上述计算逻辑，建议把代码封装成一个方法，在viewDidLayoutSubviews里调用。

原理说明 #

contentInset相当于给scrollView的内容添加了“缓冲空间”，设置好内边距后，图片可以滚动到scrollView的边缘（也就是裁剪区域的边缘），刚好满足你要的效果——让图片的边缘能对齐固定裁剪区的边界。

内容的提问来源于stack exchange，提问作者Márk