SwiftUI中如何将视图拖拽操作限制在矩形边界范围内

当前代码直接套用了圆形边界的拖拽限制逻辑：通过计算拖拽点到容器中心的径向距离，将超出圆形半径的点沿径向收缩到圆周位置。这套径向裁切逻辑完全不适用于矩形边界场景，自然无法得到预期效果。
此外现有逻辑未计入被拖拽元素自身的尺寸，即便边界逻辑修正，也会出现蓝色矩形半块露出灰色容器的问题。

矩形边界不需要做径向距离计算，只需要对拖拽点的X、Y坐标分别做范围钳制即可，同时要把被拖拽元素的半宽、半高算入边界阈值，保证元素边缘始终不会超出容器：

• X坐标允许范围：[被拖拽元素半宽, 灰色容器宽度 - 被拖拽元素半宽]
• Y坐标允许范围：[被拖拽元素半高, 灰色容器高度 - 被拖拽元素半高]
• 拖拽过程中只要把实时位置的X、Y值分别限制在上述区间内即可

修正后的完整代码如下：

import SwiftUI

extension Comparable {
    func clamp(min: Self, max: Self) -> Self {
        if self < min { return min }
        if self > max { return max }
        return self
    }
}

struct ImageView: View {
    @State private var position = CGPoint(x: 100, y: 100)
    private var rectSize: CGFloat = 600
    private var draggableSize: CGFloat { rectSize / 4 }
    private var halfDraggableSize: CGFloat { draggableSize / 2 }
    
    var body: some View {
        VStack {
            Text("Current position = (x: \(Int(position.x)), y: \(Int(position.y)))")
            
            Rectangle()
                .fill(.gray)
                .frame(width: rectSize, height: rectSize)
                .overlay(
                    Rectangle()
                        .fill(.blue)
                        .frame(width: draggableSize, height: draggableSize)
                        .position(x: position.x, y: position.y)
                        .gesture(
                            DragGesture()
                                .onChanged({ value in
                                    let limitedX = value.location.x.clamp(
                                        min: halfDraggableSize,
                                        max: rectSize - halfDraggableSize
                                    )
                                    let limitedY = value.location.y.clamp(
                                        min: halfDraggableSize,
                                        max: rectSize - halfDraggableSize
                                    )
                                    self.position = CGPoint(x: limitedX, y: limitedY)
                                })
                        )
                )
        }
    }
}

后续把矩形替换为箭头形状时，只需要调整边界计算阈值即可：如果箭头是不规则形状，把半宽半高替换为箭头对应方向上的最大外延距离，就能保证箭头始终不会超出底层图片边界。

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