本文將演示如何使用圖形上下文，繪製自定義圖形。

使用快捷鍵【Command】+【N】建立一個新的類檔案。

(在專案資料夾【DemoApp】上點選滑鼠右鍵【New File】建立)

->【Cocoa Touch Class】->【Next】->

【Class】:QuartzView。輸入類名。

【Subclass of】：UIView,父類名稱

【Language】:Swift，類檔案的預設語言

->【Next】->儲存預設的儲存位置點選【Create】

首先重寫父類的繪圖方法，開啟程式碼檔案QuartzView.swift

 1 import UIKit
 
 2 
 3 class QuartzView: UIView {
 4     // Only override drawRect: if you perform custom drawing.
 5     // An empty implementation adversely affects performance during animation.
 6     override func draw(_ rect: CGRect) {
 7         // Drawing code
 8         
 9         //在繪製圖形前，一般先要活兒當前繪圖環境的圖形上下文
 
10         //獲得當前檢視的圖形上下文
11         let context = UIGraphicsGetCurrentContext()
12         
13         //在圖形上下文中，建立和設定背景填充顏色為紫色
14         context?.setFillColor(red: 1.0, green: 0.0, blue: 1.0, alpha: 1.0)
15         //使用紫色填充圖形區域，作為圖形的背景色
16         context?.fill(rect)
17         //建立和設定邊框顏色為黑色，透明度為1(不透明)
 

18         context?.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1.0)
19         
20         //建立一個位置在(40,80)，尺寸為(240,40)的顯示區域
21         let rect2 = CGRect(x: 40, y: 80, width: 240, height: 40)
22         //設定矩形物件的位置及尺寸，並將矩形邊框新增至上下文，作為繪製矩形的準備工作
23         context?.addRect(rect2)
24         //設定對矩形進行描邊的寬度值為5
25         context?.setLineWidth(5.0)
26         //在圖形上下文中，繪製矩形邊框
27         context?.strokePath()
28         
29         //接著在矩形邊框內，繪製一行文字
30         //首先建立一個字號為32的粗字型
31         let font = UIFont.boldSystemFont(ofSize: 32)
32         //設定需要繪製的文字內容
33         let text:NSString = "Hello"
34         //設定文字的顯示位置在(50,80)，尺寸為(80,30)
35         let rect3 = CGRect(x: 50, y: 80, width: 80, height: 30)
36         //然後將文字以指定的字型樣式，繪製在設定的目標區域內
37         text.draw(in: rect3, withAttributes: [NSAttributedString.Key.font:font])
38         
39         //設定繪圖描邊的寬度為5
40         context?.setLineWidth(5.0)
41 
42         //繼續繪製一個三角形
43         //設定線條的掛角樣式為圓角樣式
44         context?.setLineCap(CGLineCap.round)
45         //設定線條描邊的顏色為白色，透明度為不透明
46         context?.setStrokeColor(red: 1, green: 1, blue: 1, alpha: 1)
47         
48         //建立一個座標陣列，作為線條各個錨點的座標
49         let points = [CGPoint(x: 40, y: 200), CGPoint(x: 40, y: 300),
50                       CGPoint(x: 280, y: 300), CGPoint(x: 40, y: 200)]
51         //將錨點座標的連線，置入圖形上下文
52         context?.addLines(between: points)
53         //執行上下文的描邊操作
54         context?.strokePath()
55     }
56 }

在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】

在檢視控制器內，建立剛剛自定義的檢視。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4     
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         // Do any additional setup after loading the view, typically from a nib.
 8         
 9         //獲得當前根檢視的顯示區域
10         let rect = self.view.bounds
11         //初始化自定義檢視物件
12         let view = QuartzView()
13         //並將自定義檢視的顯示區域，設定為與根檢視相同
14         view.frame = rect
15         
16         //將自定義檢視，新增到當前檢視控制器的根檢視
17         self.view.addSubview(view)
18     }
19     
20     override func didReceiveMemoryWarning() {
21         super.didReceiveMemoryWarning()
22         // Dispose of any resources that can be recreated.
23     }
24 }