在 iOS 应用程序中使用 UIBezierPath

创建用户界面是移动应用开发最重要的任务之一。苹果在创建 iOS 应用的过程中提供了多种方式来开发用户界面。作为 iOS 开发者，我们有多种选择来创建应用的 UI，包括 Storyboard 和 Swift UI。我们还可以使用 UIKit 提供的类以编程方式创建用户界面。

在开发移动应用时，有时我们需要创建复杂的 UI，其中可能包含不同类型的形状。这个问题可以通过使用苹果提供的 UIBezierPath 类来处理，该类用于创建矢量路径。使用这个类，我们可以创建不同类型的自定义路径，其中可以包含我们想要的任何形状。我们可以使用自定义路径来实现矩形、正方形、椭圆形和圆形等各种形状。使用 UIBezierPath，我们只需向一些路径添加线条即可创建高度复杂的形状。我们可以向任何路径添加直线和曲线。

UIBezierPath 需要一个 Core Graphics 上下文进行渲染。我们可以使用以下方法来创建 Core Graphics 上下文，以便在 iOS 应用中渲染 UIBezierPath。

1. 我们可以使用 CGContext 类实例。
2. 我们可以通过继承 UIView 类来实现，然后我们需要在其中绘制特定的形状。接着，我们可以重写 UIView 生命周期中的 draw() 方法来创建我们的 UIBezierPath。
3. CAShapeLayer 对象也可以用于创建 Core Graphics 上下文。

在本教程中，我们将创建一个 iOS 应用，了解如何使用 UIBezierPath 创建自定义形状。我们还将了解如何使用 CAShapeLayer 和 UIView 来获取 Core Graphics 上下文以渲染 UIBezierPath。

让我们在 XCode 中创建一个新的 iOS 项目，如下所示。

项目创建完成后，我们需要创建一个名为 DemoPathView 的 UIView 子类。

现在，将以下代码添加到 ViewController.swift 文件中。

上面的代码中的 viewDidAppear(_ animated: Bool) 方法将 demoView 添加到 View Controller 中，该 demoView 是 UIView 子类的实例。现在，我们需要将以下代码添加到 DemoPathView 类中。

如果我们运行代码在模拟器上，我们将看到模拟器上显示如下视图。

现在，让我们创建 UIBezierPath 的实例，以便在我们的 iOS 应用中创建路径和形状。让我们在下面的示例中创建一个矩形形状。

我们需要在 DemoPathView 类的 draw() 方法中调用 createRectangle()。

在上面的代码中，我们初始化了 UIBezierPath 对象，并向路径添加了线条以创建矩形，如下所示。

然而，我们在上面的例子中创建了矩形形状，但绘制一个形状来勾勒出视图的确切框架有点毫无意义。

创建三角形

到目前为止，我们应该注意到在本教程中，创建任何形状都需要向 UIBezierpath 指定适当的点。让我们在下面的示例中创建一个三角形。

将以下代码添加到 DemoPathView 类中以创建矩形。

它将在屏幕上显示如下三角形，如下所示。

创建椭圆形

我们也可以使用 UIBezierpath 创建椭圆形。但是，我们需要使用不同的 UIBezierpath() 初始化方法。

如以下所示，我们也可以在上述初始化方法中提供 CGRect 而不是 self.bounds。

创建带圆角的矩形

要创建带圆角的矩形，我们需要使用另一个初始化方法，如下所示。

上面的代码根据初始化方法中 cornerRadius 提供的值来圆角。

有时，我们需要圆角矩形的某个随机角。在下面的示例中，我们将只圆化视图的左上角和右下角。

上面的代码中的初始化方法接受以下参数。

1. roundedRect：这是将在视图上显示的矩形的框架。
2. byRoundingCorners：它代表将要圆角的角。但是，如果我们只需要圆角一个角，则不需要提供数组。
3. cornerRadii：它代表圆角半径。它需要一个 CGSize 值，该值接受宽度和高度参数。但是，只有宽度会被考虑，而高度会被忽略。

创建弧形

我们也可以使用 UIBezierPath 创建弧形；但是，使用 UIBezierPath 创建弧形很复杂。要创建弧形，我们需要使用以下初始化方法。

上述初始化方法接受以下参数。

1. arcCenter：它代表将要绘制弧形的圆的圆心。此参数始终为 CGPoint 值。
2. radius：它代表将要绘制弧形的圆的半径。由于圆的直径是视图的高度，所以半径是它的一半。
3. startAngle：它代表将要绘制的弧的起始角度。可以将其视为弧线开始绘制的点。角度始终以弧度（而不是度）为单位传递。
4. endAngle：它代表正在显示的弧的结束点。与 startAngle 类似，endAngle 也应以弧度为单位传递。
5. clockwise：这是一个布尔值，表示弧是顺时针绘制还是逆时针绘制。

让我们创建一个绘制弧形的示例。为此，请将以下代码添加到 DemoPathView 类中。

它将在模拟器上显示如下视图。

使用 CAShapeLayer 创建 UIBezierPath

在本教程中，我们创建了 UIView 的子类并在子类中重写了 draw(_ : ) 方法。但是，我们并不总是需要每次想在 iOS 应用中使用 UIBezierPath 时都重写 draw() 方法。正如我们在教程中已经指出的，我们需要 Core Graphics 上下文来渲染 UIBezierPath。

与其在 UIView 子类中重写 draw() 方法，不如使用 CAShapeLayer 对象，它们的渲染速度更快，并且提供了灵活性。CAShapeLayer 类是 CALayer 的一个子类，我们可以使用它向视图添加额外的层。它提供了各种属性，可以设置以自定义视图的输出。CAShapeLayer 的大多数属性都是可动画的，即这些属性的值可以以动画方式更改。

我们每次实例化 CAShapeLayer 时都必须为其提供路径。为此，我们可以先创建一个 UIBezierPath，然后将其分配给 CAShapeLayer 对象。我们将在本教程中使用此方法。

除了为 CAShapeLayer 设置路径之外，我们还需要设置其他属性，如填充颜色、描边颜色、线宽和位置。有两种方法可以将形状层对象用作视图的层：作为子层或作为蒙版。

让我们先创建一个简单的 CAShapeLayer 对象，它也将位于我们的 DemoPathView.swift 类中。我们还需要注释掉本教程前面实现的整个 draw() 方法，并创建一个如下所示的 CAshapeLayer 对象。

上面实现的 simpleShapeLayer() 方法将从我们的 DemoPathView 初始化器中调用。在此方法中，我们首先调用本教程前面实现的 createTraingle() 方法。

这里，为创建三角形定义的路径将被设置为 CAShapeLayer 的 path 属性。接下来，在此方法中，我们创建 CAShapeLayer 对象，并将创建的 UIBezier path 分配给其 path 属性。我们还需要使用 addSubLayer() 方法将这个创建的 CAShapeLayer 添加到我们的视图层。现在，让我们从初始化器中调用这个方法，并查看它在模拟器上显示的输出。

将形状层用作蒙版或子层

正如我们在教程前面提到的，CAShapeLayer 可以用作视图的蒙版或子层。让我们再次创建我们的 CAShapeLayer 对象，但这次，让我们将视图的背景颜色设置为黑色而不是透明，看看有什么区别。

让我们看看模拟器上显示的输出。

这里，我们必须注意到，未用填充颜色填充的路径保持黑色。但是，让我们注释掉 simpleShapeLayer() 方法中的最后一条语句，而是添加以下代码。

现在，它将在模拟器上显示如下输出。

通过查看两种情况下显示的输出，我们必须注意到，一旦我们将视图层的 mask 属性设置为 shapeLayer，我们就会看到一个完整的黑色三角形，尽管我们为三角形设置了填充颜色。我们还应该注意到，视图中未被路径覆盖的部分没有显示出来。

然而，蒙版就是这样工作的。视图中不被路径包含的任何部分都会被裁剪。在这里，整个视图采用了路径提供的形状。在这里，形状层显示了视图的背景颜色，目前是黑色。如果我们想更改图层的颜色，我们需要更改视图的背景颜色。

使用 CATextLayer

CATextLayer 类与 CAShapeLayer 类类似，尽管它用于显示在图层上的文本。使用这个类是为了创建一个图层（类似于 CAShapeLayer）来显示一些文本。

大多数 iOS 应用开发者使用 UILabels 在 iOS 应用中显示文本。在某些情况下，使用 UILabel 不起作用；我们可以使用 CATextLayer，其中多个子层被添加到包含标签的视图的层上。

使用 CAtextLayer，我们可以将文本层添加到任何视图的顶部。让我们创建以下示例，其中我们创建一个文本层并将其添加到视图层的顶部。

让我们将以下代码添加到我们项目的 ViewController.swift 文件中。

它将在模拟器上显示如下输出。