SwiftUI简明概念（3）:Path.addArc的clockwise方向问题

一、画个下半圆

SwiftUI中绘制下半圆的一个方法是使用Path.addArc，示例代码如下：

var body: some View {
    Path { path in
        path.addArc(center: CGPoint(x: 200, y: 370), radius: 50, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 180.0), clockwise: true)
        path.closeSubpath()
    }
}

Path.addArc的参数分别表示圆弧的中心点位置，圆弧半径，开始角度，结束角度以及圆弧方向（顺时针还是逆时针）。我们来看看最终的效果：

如果我们把时钟放在屏幕上，顺时针从0到180度，应该是从3点到9点的下半圆区域，跟我们实际绘制方向刚好相反。为什么呢？

二、原因

绘制系统默认使用的是笛卡尔坐标系，这个没有问题，就像下图所示：

但是这里有个问题，绘制的实际效果还要考虑当前图形上下文的变换矩阵。在一个翻转坐标系统，例如UIKit和SwiftUI中，顺时针方向在应用翻转后就会变成逆时针方向：

所以最终我们得到了一个和直觉相反的上半圆。

三、参考

Is clockwise of Path.addArc in SwiftUI wrong? - Stack Overflow

Apple文档：Core Graphics/CGContext/addArc