一同养成写作习惯！这是我参与「日新方案 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途径的学习差不多就完毕了。
假如本专栏对你有协助，不妨点赞、谈论、关注～
