SwiftUI图片反复缩放后冻结失效问题修复代码需求

原实现中，图片的移动、缩放、旋转功能已通过独立拖拽手势+同时缩放旋转手势实现，但反复执行缩放手势后，图片会出现冻结，无法再进行任何操作。以下是修复后的稳定实现方案。

原代码核心问题 #

1. 缩放手势范围判断错误：直接将手势瞬时缩放值与最小/最大缩放值比较，而非计算后的总缩放值，导致超出范围时视图状态不更新，手势与视图状态脱节
2. 变换逻辑分离混乱：旋转、缩放、偏移的独立处理未考虑彼此影响，拖拽位置计算未结合当前缩放/旋转状态
3. 状态维护不严谨：反复缩放后，持久状态易出现精度问题或不一致

修复后的完整代码 #

import SwiftUI

struct ContentView: View {
    // 持久化的变换状态
    @State private var currentOffset = CGSize.zero
    @State private var currentScale: CGFloat = 1.0
    @State private var currentAngle = Angle.zero
    
    // 手势过程中的临时状态（手势结束后自动重置）
    @GestureState private var tempOffset = CGSize.zero
    @GestureState private var tempScale: CGFloat = 1.0
    @GestureState private var tempAngle = Angle.zero
    
    let minScale: CGFloat = 0.2
    let maxScale: CGFloat = 5.0
    
    var body: some View {
        NavigationStack {
            GeometryReader { geometry in
                Image(systemName: "globe")
                    .resizable()
                    .scaledToFit()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    // 统一处理所有变换，确保顺序正确
                    .transformEffect(
                        CGAffineTransform(translationX: currentOffset.width + tempOffset.width, y: currentOffset.height + tempOffset.height)
                            .scaledBy(x: currentScale * tempScale, y: currentScale * tempScale)
                            .rotated(by: (currentAngle + tempAngle).radians)
                    )
                    .gesture(combinedGesture)
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button(action: resetTransform) {
                        Image(systemName: "arrow.trianglehead.clockwise")
                            .font(.title)
                            .foregroundColor(.red)
                    }
                }
            }
        }
    }
    
    // 组合拖拽与缩放旋转手势，支持同时操作
    private var combinedGesture: some Gesture {
        DragGesture()
            .updating($tempOffset) { value, state, _ in
                state = value.translation
            }
            .onEnded { value in
                currentOffset.width += value.translation.width
                currentOffset.height += value.translation.height
            }
            .simultaneously(with: scaleRotateGesture)
    }
    
    // 同时处理缩放与旋转手势
    private var scaleRotateGesture: some Gesture {
        MagnificationGesture()
            .updating($tempScale) { value, state, _ in
                // 计算总缩放值并限制范围，临时状态仅反映本次手势的缩放比例
                let totalScale = currentScale * value
                state = totalScale.clamped(to: minScale...maxScale) / currentScale
            }
            .onEnded { value in
                let totalScale = currentScale * value
                currentScale = totalScale.clamped(to: minScale...maxScale)
            }
            .simultaneously(with:
                RotationGesture(minimumAngleDelta: .degrees(2))
                    .updating($tempAngle) { value, state, _ in
                        state = value
                    }
                    .onEnded { value in
                        currentAngle += value
                    }
            )
    }
    
    // 重置所有变换状态
    private func resetTransform() {
        currentOffset = .zero
        currentScale = 1.0
        currentAngle = .zero
    }
}

关键修复点 #

• 使用GestureState管理临时状态：手势过程中的临时偏移、缩放、旋转值不会污染持久状态，手势结束后自动重置，避免状态累积错误
• 统一变换逻辑：通过transformEffect将平移、缩放、旋转整合为一个CGAffineTransform，确保变换顺序正确，避免独立变换导致的冲突
• 正确的缩放范围限制：先计算总缩放值，再将其限制在min/max区间内，保证视图状态始终有效，不会出现冻结
• 手势组合优化：拖拽与缩放旋转手势同时生效，支持更流畅的交互体验
• 简化状态重置：直接恢复初始状态，逻辑清晰不易出错

内容的提问来源于stack exchange，提问作者BB-8