SwiftUI中如何按角度在圆边缘放置带倾斜的矩形？

以下是实现需求的完整代码，支持通过定义角度定位并自动让矩形与圆边缘倾斜同步：

import SwiftUI

struct ContentView: View {
    // 可修改此值测试不同角度，90°对应圆顶部中心
    @State private var angle: Double = 90
    
    var body: some View {
        GeometryReader { geo in
            VStack {
                ZStack(alignment: .center) {
                    // 基础圆形
                    Circle()
                        .stroke(lineWidth: 10)
                        .frame(width: 220)
                    
                    // 可定位、倾斜的矩形
                    Rectangle()
                        .frame(width: 15, height: 50)
                        // 旋转矩形，使其与圆的半径方向对齐
                        .rotationEffect(Angle(degrees: angle - 90))
                        // 根据角度计算矩形在圆边缘的位置
                        .position(
                            x: calculatePosition(for: angle).x,
                            y: calculatePosition(for: angle).y
                        )
                }
                .frame(width: 220, height: 220)
                .background(Color.green)
                
                // 可选：角度调节滑块，实时预览不同角度效果
                Slider(value: $angle, in: 0...360)
                    .padding()
                    .background(Color.white)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
        }
    }
    
    // 核心：根据角度计算矩形在ZStack中心坐标系中的坐标
    private func calculatePosition(for angle: Double) -> CGPoint {
        let radius = 110.0 // 圆的半径（220/2）
        let radians = angle * .pi / 180 // 角度转弧度
        
        // SwiftUI坐标系y轴向下，因此y坐标取负，保证90°对应圆顶部
        let x = radius * cos(radians)
        let y = -radius * sin(radians)
        
        return CGPoint(x: x, y: y)
    }
}

关键实现说明： #

• 角度转坐标：利用三角函数cos和sin将角度转换为圆上的点坐标，适配SwiftUI的坐标系（y轴向下），确保90°精准对应圆顶部中心。
• 同步倾斜：通过rotationEffect让矩形旋转angle - 90度，使矩形长边始终沿圆的半径方向，和圆边缘走向保持一致。
• 便捷测试：附带的滑块控件可实时调整角度，快速验证不同位置的效果，实际使用时可根据业务需求替换为固定角度或动态值。

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