Swift如何让UIImageView的手势仅作用于内部图片而非视图本身

核心问题原因 #

你当前直接修改UIImageView的整体变换，所以会连带边框一起移动。UIImage本身不是UIView子类，无法直接添加手势识别器，正确的实现思路是把「固定边框」和「可移动缩放的图片」拆分为两个层级处理。

方案1：视图嵌套（最易实现，兼容性最好） #

这是最推荐的方案，把边框和图片分层：

• 外层使用普通UIView作为边框容器，设置你需要的红色边框、固定位置尺寸，务必勾选clipsToBounds（超出容器的内容会被自动裁剪）
• 内层将原有的UIImageView作为容器的子视图，初始尺寸和父容器保持一致，无需给imageView添加边框
• 所有手势识别器添加在外层容器上，手势触发时只修改内层imageView的变换即可

配套代码示例 #

首先在控制器中定义属性存储当前状态：

// 记录当前图片缩放比例
private var currentScale: CGFloat = 1.0
// 记录当前图片平移偏移量
private var currentOffset: CGPoint = .zero
// 平移手势开始时的临时偏移量
private var panBeginOffset: CGPoint = .zero

捏合手势处理代码：

@IBAction func scaleImage(_ sender: UIPinchGestureRecognizer) {
    switch sender.state {
    case .began, .changed:
        let tempScale = currentScale * sender.scale
        // 组合缩放和平移变换，仅应用到内层imageView
        innerImageView.transform = CGAffineTransform(scaleX: tempScale, y: tempScale)
            .concatenating(CGAffineTransform(translationX: currentOffset.x, y: currentOffset.y))
    case .ended:
        currentScale *= sender.scale
        // 可选：限制缩放范围，避免图片过小或过大
        currentScale = max(0.5, min(3.0, currentScale))
        // 可选：结束时加平滑动画
        UIView.animate(withDuration: 0.15) {
            self.innerImageView.transform = CGAffineTransform(scaleX: self.currentScale, y: self.currentScale)
                .concatenating(CGAffineTransform(translationX: self.currentOffset.x, y: self.currentOffset.y))
        }
    default:
        break
    }
}

平移手势处理代码：

@IBAction func panImage(_ sender: UIPanGestureRecognizer) {
    let translation = sender.translation(in: sender.view)
    switch sender.state {
    case .began:
        panBeginOffset = currentOffset
    case .changed:
        let tempOffset = CGPoint(x: panBeginOffset.x + translation.x, y: panBeginOffset.y + translation.y)
        innerImageView.transform = CGAffineTransform(scaleX: currentScale, y: currentScale)
            .concatenating(CGAffineTransform(translationX: tempOffset.x, y: tempOffset.y))
    case .ended:
        currentOffset = CGPoint(x: panBeginOffset.x + translation.x, y: panBeginOffset.y + translation.y)
        // 可选：添加边界校验，避免图片拖动后留白
    default:
        break
    }
}

方案2：修改contentRect（无嵌套视图） #

如果不想新增视图层级，可以直接操作UIImageView的contentRect属性，该属性取值范围为0~1，用于控制图片的显示区域，你可以根据手势计算对应要显示的图片区域，直接修改这个属性即可，不需要做视图变换。

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