本文将演示如何使用图形上下文,绘制自定义图形。
使用快捷键【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, 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, 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 }