Swift中的UIBezierPath是什么？

最新推荐文章于 2021-12-27 21:11:46 发布

weixin_26638123

最新推荐文章于 2021-12-27 21:11:46 发布

阅读量264

点赞数

文章标签： python

原文链接：https://medium.com/better-programming/what-is-a-uibezierpath-in-swift-3e024af92e3d

版权

In this article, we will create a pie chart using the UIBezierPath class that helps us create custom geometries.

在本文中，我们将使用UIBezierPath类创建一个饼图，该类可帮助我们创建自定义几何。

In just 100 lines of code, we will create our own UI element that you can reuse in your future applications.

仅用100行代码，我们将创建我们自己的UI元素，您可以在以后的应用程序中重用。

The source code of the project is available at the bottom of the article.

该项目的源代码位于文章底部。

开始吧 (Let’s Start)

First, let’s create a UIView subclass called PieChartView:

首先，让我们创建一个名为PieChartView的UIView子类：

We mark it as @IBDesignable to be able to easily debug it without needing to build and run the project. If you are not familiar with the declaration, feel free to quickly familiarize yourself with it in my article “What are @IBDesignable and @IBInspectable in Swift?”

我们将其标记为@IBDesignable ，以便能够轻松调试它，而无需构建和运行项目。如果您不熟悉该声明，请随时在我的文章“ Swift中的@IBDesignable和@IBInspectable是什么？ ”

Our pie chart will have colored segments, so we need to create a property to manage them:

我们的饼图将带有彩色的细分，因此我们需要创建一个属性来对其进行管理：

Here we have the Segment struct conforming to Comparable. (We will want to figure out later which segment takes a higher percentage of the available space.) We also define the segments property as having a didSet property observer to trigger updates whenever the property changes.

在这里，我们的Segment结构符合Comparable 。 (我们稍后将要弄清楚哪个段占用了更多的可用空间。)我们还将segments属性定义为具有didSet属性观察器，以便在属性更改时触发更新。

Let’s now jump straight into the core of this tutorial: drawing the pie chart’s geometry:

现在，让我们直接进入本教程的核心：绘制饼图的几何：

We do two things here:

我们在这里做两件事：

Create the drawSegments(_ segments:) method that calculates the starting and ending angle of all segments and draws each one sequentially
创建drawSegments(_ segments:)方法，该方法计算所有段的开始和结束角度，并依次绘制每个段
Override the draw(_ rect:) method and call the drawSegments(_ segments:) method
重写draw(_ rect:)方法并调用drawSegments(_ segments:)方法

Let’s take a closer look at the drawSegments(_ segments:) method implementation:

让我们仔细看看drawSegments(_ segments:)方法的实现：

To draw a segment, we need the following things:

要绘制线段，我们需要满足以下条件：

Center of the pie chart
饼图的中心
Radius of the pie chart
饼图的半径
The starting angle (in radians) of the segment
段的起始角度(弧度)
The ending angle (in radians) of the segment
段的终止角度(以弧度为单位)

We can see how we easily obtain the center and the radius. The starting and ending angles are, however, more tricky.

我们可以看到如何轻松获得中心和半径。但是，开始和结束角度比较棘手。

This is our logic for finding angles of each segment:

这是找到每个线段角度的逻辑：

Start with 3 * .pi / 2 angle. This is going to be the beginning of the first segment.
从3 * .pi / 2角开始。这将是第一部分的开始。
Iterate over segments.
遍历段。
Calculate the ending angle of each segment, taking into account the ratio of the segment.
计算每个线段的终止角度，并考虑线段的比率。
Draw the current segment using the obtained properties.
使用获得的属性绘制当前线段。
Set the startAngle property to the endAngle of the last-drawn segment.
将startAngle属性设置为最后绘制的线段的endAngle 。
Repeat from step 3 until all segments are drawn.
从第3步开始重复，直到绘制完所有线段。