[Xcode 實際操做]9、實用進階-(19)重寫父類的繪圖方法，使用圖形上下文繪製自定義圖形

目錄：[Swift]Xcode實際操做

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

使用快捷鍵【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 }