SwiftUI实现图片双指同时缩放与拖拽的问题

方法一：SwiftUI原生手势组合 #

默认情况下DragGesture和MagnificationGesture会互斥，无法同时响应。通过simultaneously(with:)方法可以让两个手势并行触发，直接实现双指缩放+拖拽的协同操作。

示例代码：

@State private var scale: CGFloat = 1.0
@State private var offset: CGSize = .zero
@State private var lastScale: CGFloat = 1.0
@State private var lastOffset: CGSize = .zero

var body: some View {
    Image("your-image")
        .resizable()
        .scaledToFit()
        .scaleEffect(scale)
        .offset(offset)
        .gesture(
            MagnificationGesture()
                .onChanged { value in
                    // 基于上次缩放值计算当前缩放比例
                    scale = lastScale * value
                }
                .onEnded { _ in
                    // 记录本次缩放结束后的比例，作为下次操作的基准
                    lastScale = scale
                }
                // 让缩放手势与拖拽手势同时响应
                .simultaneously(with: DragGesture()
                    .onChanged { value in
                        // 基于上次偏移量计算当前偏移
                        offset = CGSize(
                            width: lastOffset.width + value.translation.width,
                            height: lastOffset.height + value.translation.height
                        )
                    }
                    .onEnded { _ in
                        // 记录本次拖拽结束后的偏移，作为下次操作的基准
                        lastOffset = offset
                    }
                )
        )
}

方法二：UIKit手势桥接（更稳定的方案） #

如果SwiftUI原生手势仍存在冲突问题，可以借助UIKit的手势系统实现。UIPinchGestureRecognizer和UIPanGestureRecognizer天生支持同时触发，只需通过代理配置即可。

示例代码：

struct ZoomableImageView: UIViewRepresentable {
    let image: UIImage
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView(image: image)
        imageView.contentMode = .scaleAspectFit
        imageView.isUserInteractionEnabled = true
        
        // 创建捏合和拖拽手势
        let pinchGesture = UIPinchGestureRecognizer(target: context.coordinator, action: #selector(context.coordinator.handlePinch(_:)))
        let panGesture = UIPanGestureRecognizer(target: context.coordinator, action: #selector(context.coordinator.handlePan(_:)))
        
        // 设置手势代理，允许同时识别
        pinchGesture.delegate = context.coordinator
        panGesture.delegate = context.coordinator
        
        imageView.addGestureRecognizer(pinchGesture)
        imageView.addGestureRecognizer(panGesture)
        
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, UIGestureRecognizerDelegate {
        private var scale: CGFloat = 1.0
        private var offset: CGPoint = .zero
        private var lastScale: CGFloat = 1.0
        private var lastOffset: CGPoint = .zero
        
        @objc func handlePinch(_ gesture: UIPinchGestureRecognizer) {
            guard let view = gesture.view else { return }
            switch gesture.state {
            case .began:
                lastScale = scale
            case .changed:
                scale = lastScale * gesture.scale
                // 应用缩放+偏移的变换
                view.transform = CGAffineTransform(scaleX: scale, y: scale).translatedBy(x: offset.x, y: offset.y)
            case .ended:
                lastScale = scale
            default: break
            }
        }
        
        @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
            guard let view = gesture.view else { return }
            let translation = gesture.translation(in: view.superview)
            switch gesture.state {
            case .began:
                lastOffset = offset
            case .changed:
                offset = CGPoint(
                    x: lastOffset.x + translation.x,
                    y: lastOffset.y + translation.y
                )
                // 应用缩放+偏移的变换
                view.transform = CGAffineTransform(scaleX: scale, y: scale).translatedBy(x: offset.x, y: offset.y)
            case .ended:
                lastOffset = offset
            default: break
            }
            // 重置手势的 translation，避免累积偏移
            gesture.setTranslation(.zero, in: view.superview)
        }
        
        // 允许两个手势同时识别
        func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
            return true
        }
    }
}

// 使用方式
ZoomableImageView(image: UIImage(named: "your-image")!)

额外优化建议 #

• 缩放范围限制：可以在onChanged回调中对scale做 clamp 处理，比如scale = max(0.5, min(lastScale * value, 3.0))，避免过度缩放。
• 拖拽边界限制：如果需要防止图片拖出父视图边界，可根据父视图尺寸和图片当前缩放后的尺寸，计算offset的最大/最小值，限制拖拽范围。

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