如何在HVGaugeView中添加与指示箭头同步移动的顶部白色圆圈？

已实现带指示箭头的Gauge View，现在需要在其上方添加一个白色圆圈，让圆圈和白色箭头同步移动，效果如下：

基于HVGaugeView项目，实现方法如下：

1. 添加圆圈控制属性 #

在HVGaugeView类中添加两个属性，用来控制圆圈的大小和颜色：

// 指示圆圈的半径
var indicatorCircleRadius: CGFloat = 8.0
// 指示圆圈的填充色
var indicatorCircleColor: UIColor = .white

2. 复用箭头位置计算逻辑 #

找到项目中计算箭头终点坐标的代码（通常是根据当前进度换算成角度，再通过三角函数算出坐标），直接复用这个坐标作为圆圈的中心位置。如果需要让圆圈稍微偏移到箭头上方，可微调坐标的y值：

// 假设arrowEndPoint是已计算好的箭头终点坐标
var circleCenter = arrowEndPoint
// 让圆圈上移一点，避免和箭头重叠
circleCenter.y -= indicatorCircleRadius

3. 绘制圆圈 #

在draw(_ rect: CGRect)方法里，等箭头绘制完成后，添加绘制圆圈的代码：

// 创建圆圈路径
let circlePath = UIBezierPath(arcCenter: circleCenter,
                              radius: indicatorCircleRadius,
                              startAngle: 0,
                              endAngle: .pi * 2,
                              clockwise: true)
// 设置填充色并绘制
indicatorCircleColor.setFill()
circlePath.fill()

4. 同步更新 #

当进度变化时，箭头的位置会重新计算并绘制，圆圈的位置也会跟着重新计算，只要在进度更新时调用setNeedsDisplay()，就能保证圆圈和箭头同步移动。如果用动画更新进度，这个逻辑同样适用，圆圈会跟着箭头一起完成动画。

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