Get into the habit of writing together! This is the 11th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .
Foreword: Step by step, I have tried too much, but unfortunately I have not done one thing to the extreme. I like a character in an anime very much. I only know one trick, but I want to become such a person by practicing this trick to the pinnacle.
Word of the day: Investing in knowledge always pays off.
In this chapter, you'll learn how to use Path to draw lines, shapes, and other vector graphics.
First, the following figure is an example.
How are we drawing a rectangle?
If you have learned simple python before, you should know that python has a "python" drawing, that is, to establish a coordinate axis, and the positions of the "python" are connected to form a shape.
Similarly, our swift is also the same principle.
Start by creating a new project and name it SwiftUIPath.
Let's first try to describe the drawing process in words.
First, establish a coordinate axis. This coordinate axis is different from the mathematical coordinate axis. It is the coordinate axis used in the design. The upper left corner is the origin of the coordinate axis (0, 0).
The left side of the horizontal axis is the X axis, and the vertical axis down is the Y axis.
put a point at (0,0);
Draw a line from (0,0) to (0,200);
Draw a line from (0,200) to (300,200);
Draw a line from (300,200) to (300,0);
Draw a line from (300,0) to (0,0);
Finally fill it with blue.
Then convert it into code form.
// 绘制一个矩形
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)
复制代码Here we use path() to draw the path. In the path closure, move(to:) moves a point to the position of (0, 0).
Then use addLine(to:) to draw a line, and finally fill it with a color with .fill.
In this way, we have completed the drawing of the base image.
To sum up, first put the graph in a coordinate axis, get the position of each point of it, and then use path() in the closure (closure: the meaning of the code block, the code in the example belongs to the path) each time a point is drawn One line will do.
Ok, next, let's extend it, the following picture is an example:
In this case, only the border is needed, no fill color is needed.
Remember how we "stroked" an image or button from the previous lesson?
Yes, we used the .stroke() modifier to specify the width and color of the border.
如果是圆角再描边，我们还可以用.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)
复制代码A new knowledge point is introduced here, called addArc, which is an API for drawing arcs provided by SwiftUI for developers.
Its parameters are also relatively simple:
| parameter | name | describe |
|---|---|---|
| center | center point | The center point of the arc, example: 200,200 |
| radius | radius | The radius of the arc, example: 100 |
| startAngle | start angle | The starting angle of the arc, usually 0 |
| endAngle | end angle | The end angle of the arc, as shown in the figure, since we only need 2/3 of the arc, we can see that the end angle is 90 |
| clockwise | Is it clockwise | The default is true, if it is false, then the arc is drawn counterclockwise |
In fact, SwiftUI programming is very simple!
We need to understand what APIs are available to us provided by apple, what parameters are there, and what the parameters mean.
Later, you only need to adjust according to the actual business.
Ok, so far, the learning of the Path path is almost over.
If this column is helpful to you, please like, comment, and follow~