Core Graphics

“CG”是 Core Graphics 的缩写,它提供了一系列基本图形,允许我们引用以下常用类型:

在幕后,SwiftUI 使用与 Apple 其余框架相同的绘图系统:Core AnimationMetal。大多数时候 Core Animation 负责绘图,无论是自定义路径和形状还是 UI 元素,例如 TextField ,但是当事情真的变得复杂时,我们可以转向 Metal – Apple 的低级框架针对复杂绘图进行了优化。 SwiftUI 的巧妙功能之一是这两者几乎可以互换:我们只需进行一个小小的更改即可从 Core Animation 迁移到 Metal


Path

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)

}

画直线 addLine(to: )

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()
    }
}

画曲线 addQuardCurve(to: , control: )


path.move(to: CGPoint(x: 20, y: 20))

// addQuadCurve 透过一个控制点 control 来画曲线
path.addQuadCurve(to: CGPoint(x: 20, y: 100), control:CGPoint(x: 125, y: 0))

画圆弧 addArc( CGRect )

path.addArc(
		// 圆心在哪
		center: CGPoint(x: rect.midX, y: rect.midY),
		// 设置半径 
		radius: rect.width / 2, 
		// 设置开始的角度
		startAngle: startAngle, 
		// 设置结束的角度
		endAngle: endAngle, 
		// 画圆弧的方向是否是顺时针
		clockwise: clockwise
)

画矩形 addRect( CGRect )

path.addRect( CGRect(x:0, y:0, width:200, height:40) )
// 前面的XY是矩形左上角原点,后面是宽和高