[Xcode10 實際操作]九、實用進階-(19)重寫父類的繪圖方法,使用圖形上下文繪製自定義圖形
阿新 • • 發佈:2018-12-09
本文將演示如何使用圖形上下文,繪製自定義圖形。
使用快捷鍵【Command】+【N】建立一個新的類檔案。
(在專案資料夾【DemoApp】上點選滑鼠右鍵【New File】建立)
->【Cocoa Touch Class】->【Next】->
【Class】:QuartzView。輸入類名。
【Subclass of】:UIView,父類名稱
【Language】:Swift,類檔案的預設語言
->【Next】->儲存預設的儲存位置點選【Create】
首先重寫父類的繪圖方法,開啟程式碼檔案QuartzView.swift
1 import UIKit2 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 }