SwiftUI风速仪仪表盘：如何添加刻度数字？

核心思路 #

你熟悉UIKit，SwiftUI里的刻度数字绘制逻辑和UIKit坐标变换思路相通，可通过GeometryReader获取容器尺寸，配合rotationEffect与offset完成定位，写法更偏向声明式。

具体实现步骤 #

• 步骤1：用GeometryReader确定坐标系
  将刻度数字绘制放在GeometryReader内部，获取仪表盘的半径与中心点坐标：

  GeometryReader { geo in
      let radius = min(geo.size.width, geo.size.height) / 2
      let center = CGPoint(x: geo.size.width/2, y: geo.size.height/2)
      // 刻度数字绘制逻辑写在这里
  }
  

• 步骤2：计算单个数字的位置与旋转角度
  以8个方向刻度（北、东、南、西等，间隔45度）为例：

  1. 计算对应角度：let angle = Angle(degrees: Double(index) * 45)
  2. 计算偏移位置：基于半径向外偏移（比如半径的0.8倍，避免与刻度线重叠），用三角函数算出偏移量：

     let offsetX = radius * 0.8 * cos(angle.radians - .pi/2)
     let offsetY = radius * 0.8 * sin(angle.radians - .pi/2)
     

  3. 抵消旋转保证数字正向显示：

     Text(directions[index])
         .position(x: center.x + offsetX, y: center.y + offsetY)
         .rotationEffect(-angle)
     

• 步骤3：批量生成刻度数字
  定义方向数组后用ForEach循环生成：

  let directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"]
  ForEach(0..<directions.count, id: \.self) { index in
      // 插入上述位置计算与Text绘制代码
  }
  

关键注意点 #

• 若需连续角度刻度（如0-360度每10度一个数字），仅需调整ForEach范围与角度间隔，逻辑完全一致。
• 若数字位置偏移或模糊，检查GeometryReader的容器frame是否正确，确保中心点计算准确。
• 用ZStack将刻度数字、刻度线、仪表盘背景分层，保证层级显示正确。

复杂场景替代方案 #

如果需要更精细的控制（如不同刻度数字大小不同），可借助UIViewRepresentable封装UIKit的UILabel，复用你熟悉的UIKit坐标计算逻辑：

struct DialNumberView: UIViewRepresentable {
    var text: String
    var angle: Double
    var radius: CGFloat
    
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.text = text
        label.textAlignment = .center
        return label
    }
    
    func updateUIView(_ uiView: UILabel, context: Context) {
        let radians = CGFloat(angle * .pi / 180)
        let x = radius * cos(radians - .pi/2)
        let y = radius * sin(radians - .pi/2)
        uiView.center = CGPoint(x: x, y: y)
        uiView.transform = CGAffineTransform(rotationAngle: -radians)
    }
}

之后在SwiftUI视图中直接调用该封装视图即可。

内容的提问来源于stack exchange，提问作者bacata.borisov