CAShapeLayer 和 UIBezierPath 逆时针绘制圆的问题

Question

我正在尝试画一个在 12 点逆时针方向开始和结束的圆圈。我遇到的问题是没有绘制形状。 我使用init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool) 初始化器作为路径，如果我使用clockwise: true，它可以工作。如果startAngle 设置为0，endAngle 设置为2 * .pi，则它适用于clockwise: false。但是 clockwise: false 和 startAngle: -0.5 * .pi, endAngle: 1.5 * .pi 的组合不起作用。这是有原因的吗？我该如何解决？

这个有效：

let shapeLayer = CAShapeLayer()
let arcCenter = view.center
let circularPath = UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: false)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
shapeLayer.lineCap = .round
shapeLayer.fillColor = .none
view.layer.addSublayer(shapeLayer)

还有这个。结果看起来一样。

UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: -0.5 * .pi, endAngle: 1.5 * .pi, clockwise: true)

但不是这个：

UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: -0.5 * .pi, endAngle: 1.5 * .pi, clockwise: false)

Answer 1

用度数来考虑这个比较容易。

• -0.5 * .pi 弧度等于 -90 度数
• 1.5 * .pi 弧度等于 270 度数
• 0degrees 位于圆圈的右中

不过，仔细想想，-90 和 270 在圆圈上的位置相同。

---

clockwise = true:

UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: -0.5 * .pi, endAngle: 1.5 * .pi, clockwise: true)

clockwise = false:

UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: -0.5 * .pi, endAngle: 1.5 * .pi, clockwise: false)

那么clockwise 怎么会画很长的路，但逆时针没有呢？看看这个：

如果你在圆上选择两个点（或者你可以说是角度）并逐渐增加其中一个点，你可以看到环是如何根据它是否正在运行而延长/缩短的clockwise/counterclockwise。这些圆环相互补充——如果您将clockwise 圆环放在counterclockwise 圆环的顶部，它们就可以完美地组合成一个圆圈。

因此，当您增加结束点以使其与开始点 (start: -90, end: 270) 等效时：

• clockwise 环将满
• counterclockwise 环将为空

而当您切换负片时 (start: 90, end: -270)：

• clockwise 环将为空
• counterclockwise 环将满

---

另外，这里有一个方便的extension（感谢@Leo Dabus！），这样您就不必再处理弧度了：

extension BinaryInteger {
    var degreesToRadians: CGFloat { CGFloat(self) * .pi / 180 }
}

extension FloatingPoint {
    var degreesToRadians: Self { self * .pi / 180 }
    var radiansToDegrees: Self { self * 180 / .pi }
}

/// usage:
UIBezierPath(arcCenter: arcCenter, radius: 100, startAngle: -90.degreesToRadians, endAngle: 270.degreesToRadians, clockwise: true)