如何沿圆角矩形或任意路径均匀分布N个视图？

1. 获取目标形状的路径数据 #

不管是系统自带的圆角矩形还是自定义形状，核心是先拿到完整的路径对象（不同平台对应不同类型，比如SwiftUI的Path、iOS的UIBezierPath、Android的Path）：

• 系统圆角矩形：直接用平台API生成，比如SwiftUI里Path { p in p.addRoundedRect(...) }，iOS里UIBezierPath(roundedRect:cornerRadius:)。
• 自定义形状：手动绘制路径，把所有直线段、曲线段逐一定义完成。

2. 计算路径总长度 #

路径的总周长是均匀分布的基础，大部分平台都有现成的API可以直接获取：

• SwiftUI/UIKit：将Path转为UIBezierPath后调用length属性。
• Android：用PathMeasure类的getLength()方法。
• 若平台无现成API，可手动遍历路径的各分段（直线、圆弧、贝塞尔曲线），分别计算长度后累加得到总长度。

3. 计算每个视图的位置点 #

假设要放置N个视图，先算出相邻视图的路径间隔：step = 总长度 / N。
然后遍历每个索引i（0到N-1），计算当前点对应的路径距离distance = i * step，再通过路径API获取该距离对应的坐标点和切线方向：

• SwiftUI/UIKit：用UIBezierPath的getPoint(atDistance:fromStart:point:tangent:)方法，同时拿到坐标和切线方向（用于调整视图朝向）。
• Android：用PathMeasure的getPosTan(distance, pos, tan)方法，pos是坐标，tan是切线向量。

4. 放置并调整视图 #

拿到坐标和切线角度后，将视图（比如Circle()）放到对应位置，再根据切线角度旋转视图，让它贴合路径走向：

• 比如SwiftUI中，用.position()设置坐标，.rotationEffect()根据切线的弧度值旋转视图。

SwiftUI简化示例代码 #

struct PathDistributedViews: View {
    let viewCount = 8
    let cornerRadius: CGFloat = 40
    let rectSize = CGSize(width: 300, height: 200)
    
    var body: some View {
        GeometryReader { proxy in
            let baseRect = CGRect(origin: .zero, size: rectSize)
                .offsetBy(dx: (proxy.size.width - rectSize.width)/2, dy: (proxy.size.height - rectSize.height)/2)
            let path = UIBezierPath(roundedRect: baseRect, cornerRadius: cornerRadius)
            let totalLength = path.length
            let step = totalLength / CGFloat(viewCount)
            
            ZStack {
                // 绘制圆角矩形路径（辅助查看）
                Path(path.cgPath)
                    .stroke(Color.gray, lineWidth: 2)
                
                // 生成每个视图的位置与朝向
                ForEach(0..<viewCount, id: \.self) { i in
                    let distance = CGFloat(i) * step
                    var pos = CGPoint.zero
                    var tan = CGPoint.zero
                    path.getPoint(atDistance: distance, fromStart: true, point: &pos, tangent: &tan)
                    
                    // 计算切线对应的旋转角度
                    let angle = atan2(tan.y, tan.x)
                    
                    Circle()
                        .fill(Color.red)
                        .frame(width: 20, height: 20)
                        .position(pos)
                        .rotationEffect(Angle(radians: angle))
                }
            }
        }
    }
}

关键注意事项 #

• 闭合路径：确保路径是闭合状态（比如圆角矩形路径默认闭合），否则首尾视图的间隔会不均。
• 起点位置：留意路径的起始点（比如圆角矩形通常从左上角顺时针开始），避免第一个视图位置不符合预期。
• 精度问题：平台API对曲线段的点计算精度足够日常场景，无需手动计算曲线坐标。

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