绘制徽章背景 #

用 SwiftUI 中的图形 API 绘制自定义的徽章形状。

第 1 步 #

打开 File > New > File 在 Views 目录创建一个新文件，这次从 iOS 模板表中选择 SwiftUI View。点击 Next，然后将文件命名为 BadgeBackground.swift。

第 2 步 #

在 BadgeBackground.swift 文件中，为徽章添加一个 Path 形状，并用 fill() 修饰符填充该形状。

我们可以使用路径组合直线、曲线和其他绘图单元来形成更复杂的形状，比如这里徽章的六边形背景。

第 3 步 #

在路径上添加一个起点，假设是一个大小为 100 x 100 px 的容器。

move(to:) 方法把绘制光标移动到一个形状的边上，就像钢笔或铅笔悬停在该位置，等待开始绘制。

第 4 步 #

绘制形状数据中的每一个点，创建一个大致的六边形形状。

addLine(to:) 方法从一个点开始绘制。连续调用 addLine(to:) 方法从上一个点开始绘制线条，并继续画到新的点。

现在我们的六角形看起来不对劲，但这是正常的。在接下来的几个步骤中，我们会让六边形看起来更像本开文头所示的徽章形状。

第 5 步 #

使用 addQuadCurve(to:control:) 方法来给徽章的角绘制贝塞尔曲线。

第 6 步 #

把徽章的形状包装在一个 GeometryReader 中，这样徽章就不会用硬编码的大小（100），而是使用其所包含视图的大小。

当包含徽章的视图不是正方形时，使用最小的几何二维可以保留徽章的长宽比。

第 7 步 #

使用 xScale 和 xOffset 调整变量将徽章置于其几何体中心。

第 8 步 #

根据设计稿要求，把徽章背景的纯黑色改成渐变色。

第 9 步 #

把 aspectRatio(_:contentMode:) 修饰符添加到图形上。

即使徽章的父项不是正方形，也可以通过保持 1：1 的宽高比，让徽章处于视图中心的位置。