SwiftUI：限制拖拽范围至缩放后Image的矩形边界内

需要将拖拽指示器限制在缩放后图片的边界内，图片可能有不同宽高比，设备也可能切换横竖屏。之前尝试多种方案后仍存在问题：无法正确获取缩放后图片的CGRect原点坐标，导致指示器要么无法拖动到图片部分区域，要么超出图片边界。

原代码核心问题 #

• 使用全局坐标系获取图片frame，但拖拽手势的坐标是相对于本地视图的，坐标系不匹配导致边界判断错误
• 仅通过contains判断是否更新位置，拖拽到边界时会突然无法移动，体验不佳
• 初始位置依赖onAppear设置，但此时图片frame可能未正确计算，导致初始位置错误

解决方案及修改后的代码 #

EVPointView 保持不变

import SwiftUI

struct EVPointView: View {
    var id = UUID()
    var location: CGPoint = CGPoint(x: 50, y: 50)
    
    var body: some View {
        Capsule(style: .continuous)
            .stroke(.regularMaterial, style: StrokeStyle(lineWidth: 2))
            .background(Capsule().fill(.ultraThinMaterial))
            .frame(width: 30, height: 30)
    }
}

struct EVPointView_Previews: PreviewProvider {
    static var previews: some View {
        EVPointView()
    }
}

修改后的 ContentView

import SwiftUI

extension View {
    // 支持指定坐标系获取视图frame，默认使用本地坐标系
    func readRect(in coordinateSpace: CoordinateSpace = .local, onChange: @escaping (CGRect) -> Void) -> some View {
        background(
            GeometryReader { geometryProxy in
                Color.clear
                    .preference(key: BoundsPreferenceKey.self, value: geometryProxy.frame(in: coordinateSpace))
            }
        )
        .onPreferenceChange(BoundsPreferenceKey.self, perform: onChange)
    }
}

struct BoundsPreferenceKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = nextValue()
    }
}

struct ContentView: View {
    let photo: UIImage = UIImage(named: "BeachPan")!
    @State private var evPointLocation: CGPoint = CGPoint()
    @State private var imageFrame = CGRect()
    // 指示器固定尺寸，用于计算边界偏移
    private let pointSize: CGFloat = 30
    
    var body: some View {
        VStack(spacing: 0) {
            GeometryReader { geo in
                // 给ZStack命名坐标系，确保图片frame与拖拽坐标统一
                ZStack(alignment: .top) {
                    Image(uiImage: photo)
                        .resizable()
                        .scaledToFit()
                        // 获取ZStack坐标系下的图片真实frame
                        .readRect(in: .named("ImageContainer")) { imageRect in
                            imageFrame = imageRect
                        }
                        .border(.red)
                        .frame(width: geo.size.width, height: geo.size.height)
                        .background(.black)
                    
                    HStack(alignment: .top, spacing: 50) {
                        Text("EV Location x: \(Int(evPointLocation.x)) y: \(Int(evPointLocation.y))")
                            .foregroundColor(.white)
                            .background(Color.black)
                            .padding(.top, 20)
                        VStack {
                            Text("Image Frame: width: \(Int(imageFrame.width)) - height: \(Int(imageFrame.height))")
                                .foregroundColor(.white)
                                .background(Color.black)
                            Text("Origin: x \(Int(imageFrame.origin.x)) - y \(Int(imageFrame.origin.y))")
                                .foregroundColor(.white)
                                .background(Color.black)
                        }
                    }
                    
                    EVPointView()
                        .position(evPointLocation)
                        .gesture(DragGesture()
                            .onChanged { value in
                                // 计算图片的有效拖拽边界：预留指示器一半尺寸，避免超出图片
                                let minX = imageFrame.origin.x + pointSize/2
                                let maxX = imageFrame.origin.x + imageFrame.width - pointSize/2
                                let minY = imageFrame.origin.y + pointSize/2
                                let maxY = imageFrame.origin.y + imageFrame.height - pointSize/2
                                
                                // 将拖拽位置强制钳制在有效范围内
                                let clampedX = max(minX, min(value.location.x, maxX))
                                let clampedY = max(minY, min(value.location.y, maxY))
                                
                                evPointLocation = CGPoint(x: clampedX, y: clampedY)
                            })
                }
                .coordinateSpace(name: "ImageContainer") // 给ZStack绑定命名坐标系
                .onReceive(Just(imageFrame)) { frame in
                    // 图片frame确定后再设置初始位置，避免未初始化的空frame
                    guard frame != .zero else { return }
                    evPointLocation = CGPoint(
                        x: frame.origin.x + pointSize/2,
                        y: frame.origin.y + pointSize/2
                    )
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewInterfaceOrientation(.portrait)
            ContentView()
                .previewInterfaceOrientation(.landscapeLeft)
        }
    }
}

关键修改说明 #

1. 坐标系统一：通过给ZStack添加命名坐标系，让图片的frame和拖拽手势的坐标处于同一参考系，彻底解决全局坐标偏移问题
2. 边界钳制逻辑：计算拖拽时的最小/最大坐标，确保指示器中心始终在图片范围内，同时考虑指示器自身尺寸，避免出现一半超出图片的情况
3. 可靠初始化：监听图片frame的变化，在frame有效时再设置初始位置，解决onAppear时frame未初始化导致的位置错误

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