调整MagnificationGesture偏移量，解决SwiftUI缩放后拖拽失效问题

你的问题出在双重缩放导致的坐标系混乱：你同时使用了.frame(width: imageSize.width * scale, ...)和.scaleEffect(scale)，这会让黄色矩形的实际渲染尺寸变为imageSize * scale * scale，且scaleEffect会扭曲视图的手势识别坐标系，最终导致拖拽逻辑失效。

下面是修正后的完整代码，既解决了缩放后拖拽失效的问题，又能保持黄色矩形始终在容器范围内：

struct ContentView: View {
    @State private var offset: CGSize = .zero
    @State private var lastOffset: CGSize = .zero
    @State private var scale: CGFloat = 1.0
    @State private var lastScale: CGFloat = 1.0
    
    let imageSize: CGSize = .init(width: 150, height: 150)
    let containerSize: CGSize = .init(width: 300, height: 300)
    
    var body: some View {
        Rectangle()
            .stroke(.white, lineWidth: 2)
            .frame(containerSize)
            .background {
                GeometryReader { geo in
                    let containerSize = geo.size
                    // 计算缩放后的黄色矩形尺寸
                    let scaledImageWidth = imageSize.width * scale
                    let scaledImageHeight = imageSize.height * scale
                    
                    Rectangle()
                        .fill(.yellow)
                        // 仅通过frame控制大小，移除scaleEffect避免双重缩放
                        .frame(width: scaledImageWidth, height: scaledImageHeight)
                        .offset(offset)
                        .gesture(
                            MagnificationGesture()
                                .onChanged { value in
                                    let newScale = lastScale * value
                                    // 限制缩放范围在1-3倍之间
                                    scale = min(max(newScale, 1), 3)
                                    
                                    // 缩放后自动修正偏移，防止黄色矩形超出容器
                                    updateOffsetAfterScale(containerSize: containerSize)
                                }
                                .onEnded { _ in
                                    lastScale = scale
                                }
                        )
                        .simultaneousGesture(
                            DragGesture()
                                .onChanged { value in
                                    let translation = value.translation
                                    // 计算当前允许的最大偏移范围
                                    let maxXOffset = containerSize.width - scaledImageWidth
                                    let maxYOffset = containerSize.height - scaledImageHeight
                                    
                                    let newX = max(min(lastOffset.width + translation.width, maxXOffset), 0)
                                    let newY = max(min(lastOffset.height + translation.height, maxYOffset), 0)
                                    
                                    offset = CGSize(width: newX, height: newY)
                                }
                                .onEnded { _ in
                                    lastOffset = offset
                                }
                        )
                }
            }
    }
    
    // 缩放后修正偏移量，确保黄色矩形始终处于容器内
    private func updateOffsetAfterScale(containerSize: CGSize) {
        let scaledImageWidth = imageSize.width * scale
        let scaledImageHeight = imageSize.height * scale
        
        let maxXOffset = containerSize.width - scaledImageWidth
        let maxYOffset = containerSize.height - scaledImageHeight
        
        offset.width = max(min(offset.width, maxXOffset), 0)
        offset.height = max(min(offset.height, maxYOffset), 0)
    }
}

关键修复说明 #

• 移除双重缩放：删除.scaleEffect(scale)，仅用.frame控制黄色矩形尺寸，保证视图实际尺寸与坐标系一致，避免手势识别混乱。
• 缩放后偏移修正：新增updateOffsetAfterScale方法，在缩放变化时自动调整偏移量，防止黄色矩形因缩放超出容器边界。
• 拖拽边界逻辑优化：直接基于当前缩放后的尺寸计算最大允许偏移量，逻辑更清晰准确。

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