UIImageView实现捏合、平移、双击手势时平移功能异常如何解决

已发现的问题点 #

• 未实现手势代理的多手势兼容规则，导致不同手势之间互相干扰无法正常响应
• 双击手势使用自定义计数逻辑冗余且错误，UITapGestureRecognizer原生支持双击识别，无需手动维护点击次数
• 捏合手势直接覆盖transform属性，会丢失之前的平移偏移量，且未处理捏合中心点，缩放体验不符合预期
• 平移手势的边界判断逻辑完全错误，无法正确限制拖动范围，也没有判断当前是否处于放大状态
• 多个手势操作时没有统一维护当前缩放比例，导致各手势的状态不同步

修复步骤 #

1. 基础配置 #

首先确保控制器遵循UIGestureRecognizerDelegate协议，并且在viewDidLoad中正确配置手势：

// 放在viewDidLoad中调用
func setupGestures() {
    imgView.isUserInteractionEnabled = true
    imgView.contentMode = .scaleAspectFit
    
    // 双击手势
    let doubleTap = UITapGestureRecognizer(target: self, action: #selector(imgTapGesture(_:)))
    doubleTap.numberOfTapsRequired = 2
    doubleTap.delegate = self
    imgView.addGestureRecognizer(doubleTap)
    
    // 捏合手势
    let pinch = UIPinchGestureRecognizer(target: self, action: #selector(imgPinchGesture(_:)))
    pinch.delegate = self
    imgView.addGestureRecognizer(pinch)
    
    // 平移手势
    let pan = UIPanGestureRecognizer(target: self, action: #selector(imgPanGesture(_:)))
    pan.delegate = self
    imgView.addGestureRecognizer(pan)
}

2. 实现手势兼容代理方法 #

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    // 允许捏合和平移同时触发
    return true
}

3. 修复双击手势 #

@IBAction func imgTapGesture(_ sender: UITapGestureRecognizer) {
    guard let imgView = sender.view as? UIImageView else { return }
    UIView.animate(withDuration: 0.2) {
        if self.imageCurrentScale == 1.0 {
            // 放大到2倍，以点击点为中心
            let location = sender.location(in: sender.view)
            let transform = imgView.transform
                .translatedBy(x: location.x - imgView.bounds.midX, y: location.y - imgView.bounds.midY)
                .scaledBy(x: 2, y: 2)
                .translatedBy(x: imgView.bounds.midX - location.x, y: imgView.bounds.midY - location.y)
            imgView.transform = transform
            self.imageCurrentScale = 2.0
        } else {
            // 恢复原始尺寸
            imgView.transform = .identity
            self.imageCurrentScale = 1.0
        }
    }
}

4. 修复捏合手势 #

@IBAction func imgPinchGesture(_ sender: UIPinchGestureRecognizer) {
    guard let imgView = sender.view as? UIImageView else { return }
    if sender.state == .began || sender.state == .changed {
        // 以捏合中心点为基准缩放
        let location = sender.location(in: imgView)
        let transform = imgView.transform
        let scaledTransform = transform
            .translatedBy(x: location.x - imgView.bounds.midX, y: location.y - imgView.bounds.midY)
            .scaledBy(x: sender.scale, y: sender.scale)
            .translatedBy(x: imgView.bounds.midX - location.x, y: imgView.bounds.midY - location.y)
        
        // 限制缩放范围
        let currentScale = scaledTransform.a
        if currentScale >= minScale && currentScale <= maxScale {
            imgView.transform = scaledTransform
            imageCurrentScale = currentScale
        }
        sender.scale = 1.0
    }
}

5. 修复平移手势 #

@IBAction func imgPanGesture(_ sender: UIPanGestureRecognizer) {
    guard let imgView = sender.view as? UIImageView, let superView = imgView.superview else { return }
    // 仅放大状态允许拖动
    guard imageCurrentScale > 1.0 else { return }
    
    let translation = sender.translation(in: superView)
    if sender.state == .began {
        initialCenter = imgView.center
    }
    
    if sender.state != .cancelled {
        var newCenter = CGPoint(x: initialCenter.x + translation.x, y: initialCenter.y + translation.y)
        // 计算边界限制
        let minX = superView.bounds.width - imgView.frame.width / 2
        let maxX = imgView.frame.width / 2
        let minY = superView.bounds.height - imgView.frame.height / 2
        let maxY = imgView.frame.height / 2
        
        // 限制x轴范围
        newCenter.x = max(min(newCenter.x, maxX), minX)
        // 限制y轴范围
        newCenter.y = max(min(newCenter.y, maxY), minY)
        
        imgView.center = newCenter
    } else {
        imgView.center = initialCenter
    }
}

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