前言
在Swift 的開發(fā)中圖形的繪制是一個基本工作。繪制圖形，路徑是不可少的。今天我們將要介紹的是CGMutablePath 和 CGPath 。
一、 CGMutablePath 的使用。
1》 CGMutablePath 的基本使用
1、 CGMutablePath 的對象創(chuàng)建
// 設置繪制的路徑
let paths = CGMutablePath.init()
2、設置其實畫筆的起始點
// 設置起始點
paths.move(to: CGPoint.init(x: 10, y: 10))
3、添加路徑
// 添加路徑
paths.addLine(to: CGPoint.init(x: 100, y: 10))
4、閉合路徑
// 閉合路徑（路徑最后一點到起始點）
paths.closeSubpath()
2》 CGMutablePath 一些形狀的繪制。
1、 繪制虛線
// MARK: 繪制虛線
func drawDottedLine(rect:CGRect,context:CGContext) -> Void {
// 設置繪制路徑
let paths = CGMutablePath.init()
paths.move(to: CGPoint.init(x: 120, y: 100))
paths.addLine(to: CGPoint.init(x: 320, y: 100))
// 添加路徑到上下文
context.addPath(paths)
// 設置顏色
UIColor.green.set()
// 設置畫筆的寬度
context.setLineWidth(5)
/**
設置間隔虛線
*/
var legth:[CGFloat]!
// 先繪制16像素，在跳過8像素，在繪制16像素，在跳過8像素這樣一直循環(huán)。
legth = [16,8]
// 先繪制20像素，在跳過10像素，在繪制5像素，在跳過20像素，在繪制10像素，在跳過5像素，在繪制20像素...這樣循環(huán)下去。
legth = [20,10,5]
// phase 是指先繪制的差值。 這個是先繪制 legth.first - phase 像素，在跳過5像素，在繪制20像素，在跳過5像素，這樣循環(huán)。
legth = [20,5]
context.setLineDash(phase: 10, lengths: legth)
// 繪制路徑
context.strokePath()
}
2、繪制單點或者兩點控制的曲線
// MARK: 單點和兩點控制曲線繪制
func drawQuadCurve(rect:CGRect,context:CGContext) -> Void {
// 設置繪制路徑
let paths = CGMutablePath.init()
paths.move(to: CGPoint.init(x: 20, y: 100))
/**
/**
單點控制曲線
to: CGPoint :曲線的繪制結束點。
control: CGPoint : 曲線繪制的控制點。
transform : 曲線繪制的旋轉角度。
*/
paths.addQuadCurve(to: CGPoint.init(x: 220, y: 200), control: CGPoint.init(x: 120, y: 100), transform: .identity)
*/
/**
雙點控制
to: CGPoint :曲線的繪制結束點。
control1: CGPoint : 曲線繪制的控制點一。
control2: CGPoint : 曲線繪制的控制點二。
transform : 曲線繪制的旋轉角度。
*/
paths.addCurve(to: CGPoint.init(x: 220, y: 300), control1: CGPoint.init(x: 80, y: 220), control2: CGPoint.init(x: 160, y: 150), transform: .identity)
// 添加路徑到上下文
context.addPath(paths)
// 設置顏色
UIColor.green.set()
// 設置畫筆的寬度
context.setLineWidth(5)
// 繪制路徑
context.strokePath()
}
3、繪制圓弧曲線
// MARK: 繪制圓弧曲線
func drawCircularArc(rect:CGRect,context:CGContext) {
let paths = CGMutablePath.init()
/**
/**
畫一個簡單的圓弧
center: 圓弧的中心點。
radius: 圓弧的半徑。
startAngle: 圓弧開始角度。
endAngle: 結束圓弧的角度。
clockwise: 是順時針還是逆時針繪制圓弧。true為順、false為逆。
*/
paths.addArc(center: self.center, radius: 40, startAngle: 0, endAngle: .pi * 2, clockwise: true)
/**
繪制一個圓弧，沒有結束的角度。
center: 圓弧的中心點。
radius: 圓弧的半徑。
startAngle: 圓弧開始角度。
delta: 向前或者向后繪制弧度的大小。
*/
paths.addRelativeArc(center: self.center, radius: 40, startAngle: 0, delta: .pi * 2)
*/
// 設置畫筆的起始點
paths.move(to: CGPoint.init(x: 10, y: 10))
/**
有兩個切點和半徑繪制特定的圓弧
tangent1End : 切點一。
tangent2End : 切點二。
radius : 圓的半徑。
*/
paths.addArc(tangent1End: CGPoint.init(x: 300, y: 100), tangent2End: CGPoint.init(x: 1, y: 200), radius: 40)
context.addPath(paths)
UIColor.red.set()
context.setLineWidth(1)
context.strokePath()
}
4、繪制橢圓
// MARK: 給定區(qū)域繪制橢圓
func drawEllipse(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
繪制橢圓的函數
CGRect: 繪制橢圓的大小。
*/
paths.addEllipse(in: CGRect.init(x: 10, y: 20, width: 130, height: 200))
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
5、繪制四邊形
// MARK: 繪制四邊形
func drawAddRects(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
繪制函數
// 另一種函數：
public func addRects(_ rects: [CGRect], transform: CGAffineTransform = default)
CGRect : 繪制四邊形的大小。
CGAffineTransform : 是指四邊形繪制后的旋轉。
*/
paths.addRect(CGRect.init(x: 10, y: 10, width: 100, height: 200))
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
6、 繪制點之間的線段
// MARK: 點之間繪制線段
func drawAddLines(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
繪制的函數
between : 是一個數組，里面存放的是多個點。
*/
paths.addLines(between: [CGPoint.init(x: 40, y: 100),CGPoint.init(x: 100, y: 200)])
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
7、繪制帶切角的四邊行
// MARk: 繪制帶切角的四邊形
func drawAddRoundedRect(rect:CGRect,context:CGContext) -> Void {
let paths = CGMutablePath.init()
/**
繪制函數
CGRect: 繪制四邊形的大小
cornerWidth : 切角的寬
cornerHeight: 切角的高
注意： cornerWidth 的寬度的 2 倍不能超過 CGRect 的寬度。
*/
paths.addRoundedRect(in: CGRect.init(x: 10, y: 20, width: 100, height: 100), cornerWidth: 3, cornerHeight: 2)
context.addPath(paths)
context.setLineWidth(2)
UIColor.red.set()
context.strokePath()
}
8、通過拷貝路徑繪制曲線
// MARK: 通過拷貝路徑繪制虛線
func pathCopys(rect:CGRect,context:CGContext) -> Void {
let paths1 = CGMutablePath.init()
paths1.move(to: CGPoint.init(x: 10, y: 10))
paths1.addLine(to: CGPoint.init(x: 200, y: 200))
paths1.closeSubpath()
/**
路徑拷貝函數
dashingWithPhase: 差度繪制。
lengths: 繪制長度集合數組。
*/
let path2 = paths1.copy(dashingWithPhase: 20, lengths: [20,30,80])
print(path2)
/**
路徑拷貝繪制
strokingWithWidth : 繪制路徑的寬度。
lineCap : 繪制路徑的尾端形狀。
lineJoin : 繪制路徑拐彎點的形狀。
miterLimit : 路徑繪制的切角最低限制。
*/
let path3 = paths1.copy(strokingWithWidth: 10, lineCap: .round, lineJoin: .miter, miterLimit: 10)
// 判斷路徑內是否包含某點。
let isContent = path3.contains(CGPoint.init(x: 60, y: 60))
print(isContent)
context.addPath(path3)
context.setLineWidth(5)
UIColor.red.set()
context.strokePath()
}
9 、一些其他知識點
func pathKnowledge() -> Void {
// 創(chuàng)建一個路徑
let paths = CGMutablePath.init()
// 判斷路徑是否為空
print(paths.isEmpty)
// 添加路徑
paths.move(to: CGPoint.init(x: 10, y: 200))
paths.addLine(to: CGPoint.init(x: 20, y: 100))
paths.addLine(to: CGPoint.init(x: 30, y: 50))
// 判斷路徑是否為空
print(paths.isEmpty)
// 獲取路徑當前的點
print(paths.currentPoint)
// 返回包含路徑的最小矩形（包含二次曲線）
print(paths.boundingBox)
// 返回包含路徑的最小矩形（不包含二次曲線）
print(paths.boundingBoxOfPath)
// 清楚路徑
paths.closeSubpath()
}
