ios - 用 UIBezierPath 绘制虚线的顶部和底部

Question

我正在使用 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, radius: CGFloat(125), startAngle: 0, endAngle: CGFloat.pi, 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 在第一张图片中创建圆形，每个小破折号/矩形都有一个圆形的顶部和底部？

Answer 1

与其画一条圆形路径，不如画出一系列从圆心向外延伸的线段:

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

现在，这个问题是如果你想动画红/白笔画的变化。如果您需要这样做，另一种方法是考虑将刻度标记作为蒙版，并为其下方的红色笔划设置动画。例如。

创建一个白色背景的 View 。

为所有刻度线创建一个贝塞尔路径。

在形状层中使用它

将 View 的图层蒙版设置为该形状图层。

现在添加 CAShapeLayer为红色路径设置动画:

这样，您可以在刻度线上获得圆角，但您仍然可以执行动画。它消除了与使刻度线对齐相关的任何问题，因为所有刻度线都有一条路径。