“CG”是 Core Graphics 的缩写,它提供了一系列基本图形,允许我们引用以下常用类型:
CGPoint
)CGSize
)CGRect
)在幕后,SwiftUI 使用与 Apple 其余框架相同的绘图系统:Core Animation
和 Metal
。大多数时候 Core Animation
负责绘图,无论是自定义路径和形状还是 UI 元素,例如 TextField
,但是当事情真的变得复杂时,我们可以转向 Metal – Apple 的低级框架针对复杂绘图进行了优化。 SwiftUI 的巧妙功能之一是这两者几乎可以互换:我们只需进行一个小小的更改即可从 Core Animation
迁移到 Metal
。
SwiftUI 提供了专用的 Path
类型来绘制自定义形状。Path
是一个包含 2D 形状轮廓的结构体。其基本声明语法为:
// Path() 是实作一个路径对象,后面的闭包是路径的详细说明
Path(){ path in
...
// 自动封闭图形:画边框时容易画成开放路径,只需在 Path 闭包结尾处加以下代码即可自动封闭
path.closeSubpath()
}
// 用fill填充背景色
.fill(Color.green)
// 用stroke画边框
.stroke(Color.green, lineWidth:10)
// 还可以设置边线连接的样式:圆角 或 尖角
.stroke(.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
// 如果希望画的图形又有边框,又有背景色,可以用 ZStack 建立两个Path物件,分别应用 fill 和 stroke
ZStack{
Path(){ path in
...
}.fill(Color.green)
Path(){ path in
...
}.stroke(Color.green, lineWidth:8)
}
VStack(alignment: .center) {
Path(){ path in
//移动路径起点:画路径,首先需要移动到一个起始位置
path.move(to: CGPoint(x: 20, y: 20))
//画线
path.addLine(to: CGPoint(x: 20, y: 100))
path.addLine(to: CGPoint(x: 200, y: 100))
path.addLine(to: CGPoint(x: 200, y: 20))
//连接回起点
path.closeSubpath()
}
}
path.move(to: CGPoint(x: 20, y: 20))
// addQuadCurve 透过一个控制点 control 来画曲线
path.addQuadCurve(to: CGPoint(x: 20, y: 100), control:CGPoint(x: 125, y: 0))
path.addArc(
// 圆心在哪
center: CGPoint(x: rect.midX, y: rect.midY),
// 设置半径
radius: rect.width / 2,
// 设置开始的角度
startAngle: startAngle,
// 设置结束的角度
endAngle: endAngle,
// 画圆弧的方向是否是顺时针
clockwise: clockwise
)
path.addRect( CGRect(x:0, y:0, width:200, height:40) )
// 前面的XY是矩形左上角原点,后面是宽和高