一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
前言：一步一步走来，做过太多地尝试，遗憾的是没有把一件事情做到极致。很喜欢一部动漫里的人物，只会一招，但把这一招练到登峰造极，我也想成为这样的人。
今日职言：知识的投资总会带来回报。
在本章中，你将学会如何使用Path路径来绘制直线、形状和其他矢量图。
首先，以下图做一个例子。
我们在是如何绘制一个矩形的？
如果大家以前学过简单的python应该了解过，python有个“蟒蛇”画图，即建立坐标轴，“蟒蛇”走过的位置连线起来，就是一个形状。
同理，我们swift也是这个原理。
首先创建一个新项目，命名为SwiftUIPath。
我们先尝试用文字描述这个画图的过程。
首先建立一个坐标轴，这个坐标轴和数学的坐标轴不同，是设计使用的坐标轴，左上角为坐标轴原点（0，0）。
横轴向左为X轴，纵轴向下为Y轴。
放一个点在(0,0)；
从(0,0)到(0,200)画一条线；
从(0,200)到(300,200)画一条线；
从(300,200)到(300,0)画一条线；
从(300,0)到(0,0)画一条线；
最后把里面填充为蓝色。
然后再转化为代码的形式。
// 绘制一个矩形
Path() { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x:0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
}
.fill(Color.blue)
复制代码在这里我们使用到了path()路径绘图，在path闭包中，move(to:)移动了一个点到了（0，0）的位置。
再使用addLine(to:)画线，最后用.fill填充一个颜色。
这样，我们就完成了基础图像的绘制。
总结一下，先把图形放在一个坐标轴中，得到它每个点的位置，然后用path()在闭包中（闭包：代码块的意思，例子中的代码属于path）每经过一个点画一条线就行了。
好，接下来，我们延伸一下，以下图为例：
这时只需要边框，不需要填充颜色。
还记起之前的课程中，我们如何给图片或者按钮“描边”的吗？
是的，我们用到了.stroke()修饰符，指定边框的宽度和颜色。
如果是圆角再描边，我们还可以用.overlay()覆盖一层，详情见【SwiftUI第六天】。
因为我们图例是直角，只需要用到.stroke()修饰符。
// 绘制一个矩形
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
}
.stroke(Color.blue,lineWidth: 10)
复制代码我们发现好像少了一段线段。
因为我们没有指定一个步骤来绘制到原始点的直线，所以它显示了一个开放端点路径。
要关闭路径，可以在path闭包的末尾调用closeSubpath()的方法，该方法将自动将当前点与起点连接起来。
// 绘制一个矩形
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
path.closeSubpath()
}
.stroke(Color.blue,lineWidth: 10)
复制代码恭喜你，你学会了如何使用直线绘制简单的图形！
下一步，我们尝试绘制难度高一点的，带有曲线和圆弧的图形。
以下图为例：
在矩形的基础上，加了一个圆弧。
我们还是用坐标轴画出来，定好每一个点的坐标。
和画直角图形不一样的时，我们弧线用的是贝塞尔曲线，它需要控制1个控制点，确定它的弧度。
以下图为例，贝塞尔曲线的控制点为(150,0)。
我们先尝试用文字表示出来。
先放一个点在(0,40)；
从(0,40)到(15,40)画一条线；
从(15,40)到(285,40)画一条贝塞尔曲线，控制点是(150,0)；
从(285,40)到(300,40)画一条线；
从(300,40)到(300,100)画一条线；
从(300,100)到(0,100)画一条线；
最后填充颜色为蓝色。
不要怕，虽然分析起来有点麻烦，但之后用习惯了就快很多。
不要心急，慢慢来。
接下来，我们用代码的方式实现它。
//绘制一个圆弧
Path() { path in
path.move(to: CGPoint(x: 0, y: 40))
path.addLine(to: CGPoint(x: 15, y: 40))
path.addQuadCurve(to: CGPoint(x: 285, y: 40), control: CGPoint(x: 150, y: 0))
path.addLine(to: CGPoint(x: 300, y: 40))
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 0, y: 100))
}
.fill(Color.blue)
复制代码在这里，我们用到的是.addQuadCurve(to:)的方法。
它可以帮助我们绘制一条贝塞尔曲线，从而实现圆弧的效果。
和上面例子同理，我们可以将填充颜色的.fill变为.stroke，把图形变成线段。
//绘制一个圆弧
Path() { path in
path.move(to: CGPoint(x: 0, y: 40))
path.addLine(to: CGPoint(x: 15, y: 40))
path.addQuadCurve(to: CGPoint(x: 285, y: 40), control: CGPoint(x: 150, y: 0))
path.addLine(to: CGPoint(x: 300, y: 40))
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 0, y: 100))
}
.stroke(Color.blue, lineWidth: 10)
复制代码当我们的形状既有图形，又有描边时，我们可以用ZStack将两个path闭包包裹在一起。
实现以下的效果：
最后，缺口部分可以调用closeSubpath()的方法闭合线段路径。
恭喜你，又掌握了一个知识点！
好，下面，我们继续。
这一次，尝试画一个半圆弧，如下图所示:
和上面的分析方法一样，我们把这个圆放在一个坐标轴上。
这里，我们画一个半径为200的圆，把圆的圆心坐标放中间一点，比如(200,200)。
//绘制半圆弧
Path { path in
path.move(to: CGPoint(x: 200, y: 200))
path.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 90), clockwise: true)
}
.fill(Color.green)
复制代码这里引入了一个新的知识点，叫做addArc，是SwiftUI为开发人员提供的一个绘制圆弧的API。
它的参数也比较简单：
| 参数 | 名称 | 描述 |
|---|---|---|
| center | 中心点 | 圆弧的中心点，示例：200,200 |
| radius | 半径 | 圆弧的半径，示例：100 |
| startAngle | 开始角度 | 圆弧的开始角度，一般为0 |
| endAngle | 结束角度 | 圆弧的结束角度，像图中，由于我们只需要2/3的圆弧，所以结束角度我们可以看到为90 |
| clockwise | 是否为顺时针 | 默认为true，如果为false，那么这个圆弧是逆时针画的 |
其实SwiftUI编程很简单！
我们要了解apple提供了哪些可用的API给到我们，里面有哪些参数，参数是什么意思。
后面只需要根据实际业务调整就行了。
好的，至此，Path路径的学习差不多就结束了。
如果本专栏对你有帮助，不妨点赞、评论、关注～