舍入用UIBezierPath绘制的虚线的顶部和底部

如何解决舍入用UIBezierPath绘制的虚线的顶部和底部

我正在使用UIBezierPath创建以下圈子。请注意，圆的相反两侧有两种不同的颜色。我想将图片中每个小矩形的顶部和底部四舍五入。

我希望每个矩形（从技术上来说都是虚线）的顶部和底部均为圆形。像这样：

目前，我正在使用以下代码制作圆圈：

let bounds = self.view.bounds
    let arcCenter = CGPoint(x: bounds.midX,y: bounds.midY)

    let whiteLayer = CAShapeLayer()
    let redLayer = CAShapeLayer()

    whiteLayer.fillColor = UIColor.clear.cgColor
    whiteLayer.strokeColor = UIColor.white.cgColor

    var whiteRing = UIBezierPath(arcCenter: arcCenter,radius: CGFloat(125),startAngle: 0,endAngle: CGFloat.pi,clockwise: false)
    whiteRing.rotateAroundPoint(angle: CGFloat.pi/2,center: arcCenter)
    whiteLayer.lineWidth = 10
    whiteLayer.lineDashPattern = [2,3]
    whiteLayer.path = whiteRing.cgPath

    redLayer.fillColor = UIColor.clear.cgColor
    redLayer.strokeColor = UIColor.red.cgColor
    var redRing = UIBezierPath(arcCenter: arcCenter,clockwise: true)
    redRing.rotateAroundPoint(angle: CGFloat.pi/2,center: arcCenter)
    redLayer.lineWidth = 10
    redLayer.lineDashPattern = [2,3]
    redLayer.path = redRing.cgPath
    
    self.view.layer.addSublayer(whiteLayer)
   self.view.layer.addSublayer(redLayer)

老实说，我不知道使用UIBezierPath是否可以实现此目的，我试图使用CAReplicatorLayer之类的方法来实现此目的，但是我似乎无法弄清楚如何在两者之间始终保持相同的间距每个破折号/矩形以及圆的两个独立部分，以避免白色和红色部分重叠。不必使用两种不同的颜色即可轻松完成此操作，但是对于我的用例，我必须使用两种不同的颜色。因此，无论如何，都可以使用UIBezierPath来做到这一点，如果没有，我将如何使用CAReplicatorLayer在第一张图片中创建一个圆，并且每个小破折号/矩形的顶部和底部都有一个圆角？

解决方法

而不是绘制圆形路径，而是绘制从圆心出来的一系列线段：

let center = CGPoint(x: bounds.midX,y: bounds.midY)
let path = UIBezierPath()
let maxRadius = (min(bounds.width,bounds.height) - lineWidth) / 2
let minRadius = maxRadius - tickLength + lineWidth

for i in 0 ..< tickCount {
    let angle = startAngle + (endAngle - startAngle) * CGFloat(i) / CGFloat(tickCount)
    let startPoint = center.point(at: angle,distance: minRadius)
    let endPoint = center.point(at: angle,distance: maxRadius)
    path.move(to: startPoint)
    path.addLine(to: endPoint)
}

使用此方法计算所有这些线段的起点和终点：

private extension CGPoint {
    func point(at angle: CGFloat,distance: CGFloat) -> CGPoint {
        return CGPoint(x: x + distance * cos(angle),y: y + distance * sin(angle))
    }
}

无论如何，您可以在创建形状图层时应用线宽和圆角倒圆角：

let shapeLayer = CAShapeLayer()
shapeLayer.lineCap = .round
shapeLayer.lineWidth = lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = ...
shapeLayer.path = path.cgPath

---

现在，问题在于如果要对红色/白色笔触中的更改进行动画处理。如果需要这样做，另一种方法是考虑使刻度线标记为蒙版，并为其下方的红色笔划设置动画。例如

• 创建带有白色背景的视图。
• 为所有刻度线创建贝塞尔曲线路径。
• 在形状图层中使用它
• 将视图图层的蒙版设置为该形状图层。
• 现在为红色路径添加一个CAShapeLayer并为其设置动画：

这样，您可以在刻度线上四舍五入，但是仍然可以执行动画。而且，它消除了与刻度线对齐相关的任何问题，因为所有刻度线都只有一个路径。