SwiftUI拖拽缩放视图时自动跳至中心无法平滑拖动问题

开发类地铁线路图视图交互功能时，缩放后如果拖拽落点不在视图中心，视图会先跳转到中心位置再响应拖拽操作，手势触发灵敏度差，无需实现自定义手势即可修复。

• 拖拽位移计算逻辑错误：DragGesture返回的value.translation是单次手势从起点到当前位置的相对位移，原代码直接将该值覆盖赋值给位置状态，每次新手势触发时初始位移为0，就会强制视图回到初始中心位置。
• 视图修饰符顺序错误：SwiftUI修饰符按调用顺序逐层生效，原代码先添加偏移、后添加缩放效果，会导致缩放中心偏移、视觉位置和手势计算坐标不匹配，加剧跳变问题。
• 拖拽过程中全程使用弹性动画，会导致手势响应延迟，灵敏度下降。

import SwiftUI

struct CircleMapView: View {
    // 拖拽状态
    @State private var currentPosition = CGSize.zero
    @State private var lastPosition = CGSize.zero
    @State private var isDragging = false
    
    // 缩放状态
    @State private var currentScale: CGFloat = 0
    @State private var lastScale: CGFloat = 1
    
    // 按钮颜色
    @State private var markerColor: Color = .green
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 地铁线路图
            Image("subway")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 800)
            
            // 标记按钮
            Button {
                markerColor = .black
            } label: {
                Circle()
                    .offset(x: 30)
                    .foregroundColor(markerColor)
                    .frame(width: 30, height: 30)
            }
        }
        // 注意：缩放修饰符要放在偏移之前，避免坐标计算偏移
        .scaleEffect(lastScale + currentScale)
        .offset(x: currentPosition.width, y: currentPosition.height)
        // 拖拽手势
        .gesture(
            DragGesture()
                .onChanged { value in
                    isDragging = true
                    // 累加历史位移，不要直接覆盖
                    currentPosition = CGSize(
                        width: lastPosition.width + value.translation.width,
                        height: lastPosition.height + value.translation.height
                    )
                }
                .onEnded { _ in
                    isDragging = false
                    // 拖拽结束保存最终位置
                    lastPosition = currentPosition
                }
        )
        // 缩放手势
        .simultaneousGesture(
            MagnificationGesture()
                .onChanged { value in
                    currentScale = value - 1
                }
                .onEnded { _ in
                    withAnimation(.spring()) {
                        lastScale += currentScale
                        currentScale = 0
                    }
                }
        )
    }
}

• 拖拽onChanged阶段不要加弹性动画，直接更新状态即可保证跟手性，仅在需要边界回弹、缩放复位等场景使用动画。
• 如果需要限制地图拖拽范围、避免拖出可视区域，可以在拖拽onEnded阶段判断位置边界，做回弹修正。
• 后续如果需要增加双击缩放、旋转等功能，直接在现有手势逻辑上扩展即可，不需要重写自定义手势。

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