UIBezierPath自定义lineCapStyle两端均不同

Question

我想实现的是

[我尝试过的是使用lineCapStyle .rounded绘制三个不同颜色的弧。我绘制这些弧的代码在下面>

 private func circularActivityPath(rect:CGRect, configuration:PathConfiguration)-> CGPath {

            let center = CGPoint(x: rect.maxX / 2, y: rect.maxY / 2)
            let longestSide = rect.height < rect.width ? rect.height : rect.width
            let path = UIBezierPath(arcCenter: center, radius: (longestSide / 2) - (configuration.lineWidth / 2), startAngle: configuration.startAngle.deg2rad() , endAngle: configuration.endAngle.deg2rad(), clockwise: true)

            path.lineCapStyle = .round
            return path.cgPath
        }

     override func draw(_ rect: CGRect) {

         let config1 = PathConfiguration(color: .red, lineWidth: lineWidth, startAngle: CGFloat(-90), endAngle: CGFloat(10), type: .track , shape: shape )
        let trackLayer1 = CAShapeLayer()
            trackLayer1.drawActivityCircles(in: rect,  configuration: config1)

        let config2 = PathConfiguration(color: .blue, lineWidth: lineWidth, startAngle: CGFloat(25), endAngle: CGFloat(80), type: .track , shape: shape )
        let trackLayer2 = CAShapeLayer()
        trackLayer2.drawActivityCircles(in: rect,  configuration: config2)

        let config3 = PathConfiguration(color: .green, lineWidth: lineWidth, startAngle: CGFloat(95), endAngle: CGFloat(255), type: .track , shape: shape )
        let trackLayer3 = CAShapeLayer()
            trackLayer3.drawActivityCircles(in: rect,  configuration: config3)

          self.layer.addSublayer(trackLayer2) // blue
          self.layer.addSublayer(trackLayer3) // green
          self.layer.addSublayer(trackLayer1) // red

    }
其中PathConfiguration是一个结构

struct PathConfiguration {
    let color: UIColor
    let lineWidth: CGFloat
    let startAngle: CGFloat
    let endAngle: CGFloat
    let type: TrackType
    let shape: TrackShape
}
我得到的是下面带有两边倒圆角的帽...我想在两端分别实现一个倒圆和一个弧形帽。如果我得到一些指示，我将如何获得相同的形状，我将非常感谢您

我想实现的目标是，用lineCapStyle .rounded绘制三个具有不同颜色的弧。我绘制这些圆弧的代码在私有函数的circleActivityPath（rect：...

Answer 1

请参见下面的代码以实现此结果。