带外线的圆形进度视图

Question

我正在尝试创建一个外部有描边的圆形进度视图。但我的笔划从视图内部开始，而不是像边框一样从外部开始。我该如何解决？

我的代码：

var progressLayer = CAShapeLayer()
var trackLayer = CAShapeLayer()

var progressLineWidth: CGFloat = 20
var progressColor = UIColor.green
var progress: Float = 0.5

let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0 - 2, y: frame.size.height / 2.0 - 2), radius: (frame.size.width) / 2, startAngle: -(.pi / 2), endAngle: .pi * 1.5, clockwise: true)

trackLayer.path = circlePath.cgPath
trackLayer.strokeColor = UIColor.gray.cgColor
trackLayer.lineWidth = 10
trackLayer.strokeEnd = 1.0
trackLayer.lineDashPattern = [4,4]
trackLayer.fillColor = UIColor.red.cgColor
layer.addSublayer(trackLayer)

progressLayer.path = circlePath.cgPath
progressLayer.fillColor = UIColor.clear.cgColor
progressLayer.strokeColor = progressColor.cgColor
progressLayer.lineWidth = progressLineWidth
progressLayer.strokeEnd = CGFloat(progress)
progressLayer.strokeStart = 0
progressLayer.lineDashPattern = [4,4]
layer.addSublayer(progressLayer)

结果：

我想要达到的目标：

灰色和绿色笔触应从红色圆圈的外侧开始。

Answer 1

// Calculate the adjusted radius to account for the progress layer's stroke width
let adjustedRadius = (frame.size.width - progressLineWidth) / 2

// Create the circle path using the adjusted radius
let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y:     frame.size.height / 2.0), radius: adjustedRadius, startAngle: -(.pi / 2), endAngle: .pi * 1.5, clockwise: true)

// Now, use this circlePath for both trackLayer and progressLayer as before