SwiftUI极简教程11:Path路径的使用

在本章中，你将学会如何使用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。

它的参数也比较简单：

其实SwiftUI编程很简单！

我们要了解apple提供了哪些可用的API给到我们，里面有哪些参数，参数是什么意思。

后面只需要根据实际业务调整就行了。

好的，至此，Path路径的学习差不多就结束了。