SwiftUI如何消除缩放后拖拽手势的放大效应？

当视图通过scaleEffect缩放后，直接使用DragGesture的value.location更新位置会导致拖拽偏移与缩放倍数绑定，出现不符合预期的移动效果。这是因为手势识别的坐标是基于缩放后的局部坐标系，而非原始坐标系。

核心修复思路 #

• 用手势偏移量替代直接赋值位置：通过DragGesture的translation属性获取手势的相对偏移，再除以当前缩放倍数，得到原始坐标系下的真实偏移量，以此更新视图位置。
• 修正缩放逻辑：MagnificationGesture的gesture参数是当前手势的缩放倍数增量，需要用当前缩放值乘以该增量来更新缩放比例，而非直接赋值。

完整修复代码 #

struct TestView: View {
    @State var location1: CGPoint = CGPoint(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height/2)
    @State var newScale1: CGFloat = 5.0
    
    var body: some View {
        ZStack{
            ColorSquare(color: .mint)
                .frame(width: 100, height: 100)
                .position(location1)
                .scaleEffect(newScale1)
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // 转换为原始坐标系下的偏移量：手势偏移 / 当前缩放倍数
                            let offsetX = value.translation.width / newScale1
                            let offsetY = value.translation.height / newScale1
                            // 叠加偏移更新位置
                            location1 = CGPoint(x: location1.x + offsetX, y: location1.y + offsetY)
                        }
                )
                .gesture(
                    MagnificationGesture()
                        .onChanged { gesture in
                            // 累积缩放比例：当前值 × 手势增量
                            newScale1 *= gesture
                        }
                )
        }
    }
}

// 补充原代码缺失的ColorSquare定义
struct ColorSquare: View {
    let color: Color
    var body: some View {
        Rectangle()
            .fill(color)
    }
}

关键说明 #

• 拖拽修正：translation记录的是手势从开始到当前的总偏移，由于视图被缩放，这个偏移是缩放后的数值，除以newScale1可转换为原始坐标系的真实偏移，再叠加到当前位置就能让拖拽跟随手指自然移动。
• 缩放修正：MagnificationGesture的gesture参数是相对于上一次回调的缩放增量，用newScale1 *= gesture才能正确累积缩放比例，避免缩放值被重置。

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