前言
上下文（CGContext） 是圖形繪制前媳溺，場景的布置對象细办。在App的開發(fā)中昼弟，圖形的繪制也是基本的技能。圖形繪制的選擇要求開發(fā)者根據(jù)實際情況選擇不同的繪制方式普办。今天我們帶來的是 CGContext的繪制工扎。
CGContext 的繪制圖形
1、繪制虛線
// MARK: 繪制虛線
func drawDottedLine(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(10)
// 設(shè)置起始點
context.move(to: CGPoint.init(x: 10, y: 50))
// 添加繪制路徑點
context.addLine(to: CGPoint.init(x: 200, y: 50))
/**
繪制虛線
@phase : 虛線起始線段的長度偏差,則第一段的長度為: lengths[0] - phase
@lengths : 一個存放虛線間隔和繪制長度的數(shù)組
*/
context.setLineDash(phase: 10, lengths: [10,20,30])
// 必和路徑
context.strokePath()
}
效果如下圖：
88F0F6A3-F801-4456-9AD2-4C7C46873024.png
2衔蹲、繪制曲線
// MARK: 繪制曲線
func drawCurve(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
// 設(shè)置起始點
context.move(to: CGPoint.init(x: 10, y: 50))
/**
兩點控制曲線
to : 曲線的結(jié)束點
control1 : 曲線控制點一肢娘。
control2 : 曲線控制點二
例子：
context.addCurve(to: CGPoint.init(x: 250, y: 180), control1: CGPoint.init(x: 100, y: 200), control2: CGPoint.init(x: 200, y: 70))
*/
/**
單點控制曲線
to : 曲線的結(jié)束點
control: 曲線的控制點
*/
context.addQuadCurve(to: CGPoint.init(x: 250, y: 180), control: CGPoint.init(x: 100, y: 200))
// 必和路徑
context.strokePath()
}
效果圖如下
A9079F58-0173-410B-915D-FB2E2FE8A149.png
A978A3FF-9108-4ABD-870B-04BCB170F78C.png
3、 繪制四變形
// MARK: 繪制四變形
func drawRect(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
/**
設(shè)置繪制四邊形的大小，通過控制長和寬繪制長方形和正方形
@ x : 四邊形的起點X軸的位置蔬浙。
@ y : 四邊形的起點Y軸的位置猪落。
@ width : 繪制四邊形的寬度。
@ height : 繪制四邊形的高度畴博。
注意： width = height 繪制的是正方形
*/
context.addRect(CGRect.init(x: 60, y: 20, width: 160, height: 160))
// 必和路徑
context.strokePath()
}
效果圖如下：
E3722BA7-B7CA-4C5D-BD6C-BF42BE4DB786.png
46E8A830-2248-4F21-A539-DB2FB02C4E0B.png
4笨忌、繪制多點之間的連線
// MAKR: 繪制多點之間的連線
func drawLines(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
/**
繪制各點之間的線段
@ between : 存放的點的數(shù)組。
*/
context.addLines(between: [CGPoint.init(x: 10, y: 50),CGPoint.init(x: 20, y: 30),CGPoint.init(x: 100, y: 150),CGPoint.init(x: 200, y: 20),CGPoint.init(x: 250, y: 70)])
// 必和路徑
context.strokePath()
}
效果圖如下：
B15F9520-C2CE-4A94-88FB-B8747911ED39.png
5俱病、繪制圓弧
// MARK: 繪制圓弧
func drawArc(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
/**
繪制圓弧
@center : 圓弧的中心點官疲。
@radius : 圓弧的半徑。
@startAngle : 圓弧開始的角度亮隙。
@endAngle : 圓弧結(jié)束的角度途凫。
@clockwise: 繪制圓弧的方向。true為順時針溢吻，false為逆時針维费。
// 例子
context.addArc(center: CGPoint.init(x: rect.size.width * 0.5, y: rect.size.height * 0.5), radius: 80, startAngle: 0, endAngle: .pi * 2, clockwise: true)
*/
// 移動起始點
context.move(to: CGPoint.init(x: 100, y: 19))
/**
有兩個切點和半徑繪制圓弧
@tangent1End : 切點一。
@tangent2End : 切點二促王。
@radius : 圓弧的半徑犀盟。
*/
context.addArc(tangent1End: CGPoint.init(x: 100, y: 200), tangent2End: CGPoint.init(x: 200, y: 100), radius: 80)
// 閉合路徑
context.strokePath()
}
效果圖如下：
7DF988D6-4C69-4BD6-A849-44678DB42DF0.png
BF7AABAD-503E-4E2D-8859-37223F7EDFE3.png
6、路徑繪制的填充
// MARK: 路徑繪制的填充
func drawFillPath(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
// 繪制四邊形
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
/**
填充路徑
CGPathFillRule 的參數(shù)有兩個：
@.evenOdd
@.winding
*/
context.fillPath(using: .winding)
context.strokePath()
}
7蝇狼、裁剪繪制區(qū)域為可繪制的區(qū)域
// MARK: 裁剪繪制區(qū)域為可繪制的區(qū)域
func drawClip(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
// 設(shè)置裁剪后可繪制的區(qū)域
context.clip(to: CGRect.init(x: 40, y: 40, width: 60, height: 60))
/**
裁剪繪制的圖形
1阅畴、裁剪所有的區(qū)域為可繪制區(qū)域。
context.clip()
2迅耘、多區(qū)域裁剪
context.clip(to: [CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
3贱枣、單區(qū)域裁剪
context.clip(to: CGRect.init(x: 40, y: 40, width: 60, height: 60))
*/
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
context.strokePath()
}
效果如下：
57E01384-8C93-4103-A1B7-8B0BE0DEB06F.png
B94F12EB-3158-44B0-8F3F-8EC18B565105.png
8、設(shè)置填充區(qū)域
// MARK: 設(shè)置填充區(qū)域
func drawFill(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
// 繪制四邊形
context.addRect(CGRect.init(x: 50, y: 50, width: 150, height: 100))
/**
區(qū)域填充
1颤专、指定單區(qū)域的填充
context.fill(CGRect.init(x: 40, y: 40, width: 30, height: 30))
2纽哥、多區(qū)域的填充
context.fill([CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
*/
context.fill([CGRect.init(x: 40, y: 40, width: 30, height: 30),CGRect.init(x: 100, y: 40, width: 100, height: 100),CGRect.init(x: 40, y: 120, width: 40, height: 40)])
// 閉合路徑繪制圖形
context.strokePath()
}
效果如圖：
EF159CD3-D8B9-43E4-A8E1-08356FF144A9.png
9、繪制兩點之間的連線
// MARK:繪制兩點之間的連線
func drawStrokeLineSegments(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
/**
繪制兩點之間的線段
@between: 是要繪制點的數(shù)組集合栖秕。
注意: 如果 between 里面的點的個數(shù)是偶數(shù)昵仅，那就是每兩點之間的連線。如果為奇數(shù)累魔，在最后一個點將和（0摔笤，0）點組成一組的連線。
*/
context.strokeLineSegments(between: [CGPoint.init(x: 10, y: 20),CGPoint.init(x: 20, y: 70),CGPoint.init(x: 100, y: 120),CGPoint.init(x: 220, y: 70)])
// 閉合路徑
context.strokePath()
}
效果如下圖所示：
0DB5D06E-033B-42B8-9B9E-DCC5D477E3FE.png
10垦写、圖像的繪制
// MARK:圖像的繪制
func drawImage(rect: CGRect,context:CGContext) -> Void {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
/**
圖像的繪制
@image : 是要繪制的圖像是一個CGImage對象吕世。
@in : 繪制圖像的大小區(qū)域。
注意：圖像繪制出來是倒立的梯投。
*/
context.draw((UIImage.init(named: "2.jpg")?.cgImage!)!, in:CGRect.init(x: 50, y: 10, width: 200, height: 180))
// 閉合路徑的繪制
context.strokePath()
}
效果如下圖所示
ED199368-ED32-4AE2-8A00-4CF827A34295.png
11命辖、 繪制橢圓
// MARK: 繪制橢圓
func drawEllipse(rect: CGRect,context:CGContext) {
// 設(shè)置繪制的顏色
UIColor.red.set()
// 設(shè)置寬度
context.setLineWidth(5)
context.addEllipse(in: rect)
context.strokePath()
}
效果如下圖：
00485C5F-1252-48CE-9AD5-F2C7398990DE.png
CGContext的一些其他知識點
// MARK: CGContext 的一些參數(shù)的介紹
func introduceContext(context:CGContext) -> Void {
// 獲取typeID
let typeID = CGContext.typeID
print(typeID)
// 存儲上下文况毅，便于恢復(fù)
context.saveGState()
// 恢復(fù)上下文
context.restoreGState()
// 繪制路徑的縮放比例
context.scaleBy(x: 1, y: 1)
// 繪制圖形的旋轉(zhuǎn) 。by 的取值范圍是 -1.0~1.0
context.rotate(by: 1)
// 獲取當(dāng)前旋轉(zhuǎn)對象
let ctm = context.ctm
print(ctm)
// 更改上當(dāng)前的旋轉(zhuǎn)對象數(shù)據(jù)
context.concatenate(CGAffineTransform.init(rotationAngle: 0.5))
// 再獲取當(dāng)前旋轉(zhuǎn)對象
let ctm1 = context.ctm
print(ctm1)
// 設(shè)置繪制路徑的線寬
context.setLineWidth(6)
/**
設(shè)置線的頭部形狀
可選的參數(shù)
@ butt 和 square 基本一樣尔艇，屬于粗狂的端頭尔许。（矩形）
@ round 半圓形的線頭
@ square
*/
context.setLineCap(.butt)
/**
設(shè)置繪制路徑拐角處的形狀
可以選擇的參數(shù)
@ miter 切角形
@ round 圓角形
@ bevel 斜切角形
*/
context.setLineJoin(.bevel)
// 設(shè)置切角的大小
context.setMiterLimit(3)
// 清楚所有繪制的路徑圖形
context.closePath()
// 設(shè)置繪制圖形的透明度
context.setAlpha(0.6)
// 開啟新的路徑，丟棄老的路徑
context.beginPath()
// 繪制路徑的替換终娃，用于剪切圖形
context.replacePathWithStrokedPath()
/**
判斷給定的點是否在繪制圖形上
@point: 給定的點
@mode: 判斷點的規(guī)則
CGPathDrawingMode 路徑繪制的模型
@ fill ：表示用非零繞數(shù)規(guī)則味廊。
@ eoFill： 表示用奇偶規(guī)則
@ stroke ：表示填充。
@ fillStroke ：表示描線棠耕，填充余佛。
@ eoFillStroke ：表示描線，不是填充窍荧。
*/
let isSave = context.pathContains(CGPoint.init(x: 101, y: 52), mode: .stroke)
print(isSave)
// 繪制四邊形
context.addRect(CGRect.init(x: 100, y: 50, width: 150, height: 100))
// 切除某一區(qū)域繪制的圖形
context.clear(CGRect.init(x: 120, y: 50, width: 50, height: 30))
// 設(shè)置畫筆的顏色
UIColor.red.set()
context.setFillColor(UIColor.red.cgColor)
// 閉合路徑
context.strokePath()
}
