Swift - Core Graphics绘图框架详解1（绘制线条）
作者：hangge | 2016-11-17 09:00
一、Core Graphics介绍
1，什么是Core Graphics
（1）Core Graphics Framework 是一套基于 C 的 API 框架，使用了 Quartz 作为绘图引擎，可用于一切绘图操作。它提供了低级别、轻量级、高保真度的 2D 渲染。（2）Quartz 2D 是 Core Graphics Framework 的一部分，是一个强大的二维图像绘制引擎。
（3）我们使用的 UIKit 库中所有 UI 组件其实都是由 CoreGraphics 绘制实现的。所以使用 Core Graphics 可以实现比 UIKit 更底层的功能。
（4）当我们引入 UIKit 框架时系统会自动引入 Core Graphics 框架，同时在 UIKit 内部还对一些常用的绘图 API 进行了封装，方便我们使用。 (比如：CGMutablePath 是 Core Graphics 的底层API，而 UIBezierPath 就是对 CGMutablePath 的封装。)
2，绘图的一般步骤
（1）获取绘图上下文
（2）创建并设置路径
（3）将路径添加到上下文
（4）设置上下文状态（如笔触颜色、宽度、填充色等等）
（5）绘制路径
二、线条的绘制
1，绘制直线
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let frame = CGRect(x: 30, y: 30, width: 250, height: 100)
let cgView = CGView(frame: frame)
self.view.addSubview(cgView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
class CGView:UIView {
override init(frame: CGRect) {
super.init(frame: frame)
//设置背景色为透明，否则是黑色背景
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
//获取绘图上下文
guard let context = UIGraphicsGetCurrentContext() else {
return
}
//创建一个矩形，它的所有边都内缩3
let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let path = CGMutablePath()
path.move(to: CGPoint(x:drawingRect.minX, y:drawingRect.minY))
path.addLine(to:CGPoint(x:drawingRect.maxX, y:drawingRect.minY))
path.addLine(to:CGPoint(x:drawingRect.maxX, y:drawingRect.maxY))
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(UIColor.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//绘制路径
context.strokePath()
}
}
2，设置端点的样式
通过 setLineCap 可以设置线条端点（顶点）的样式，使用的是 CGLineCap 枚举，内容如下：
- .butt：不绘制端点， 线条结尾处直接结束。（默认值）
- .round：绘制圆形端点， 线条结尾处绘制一个直径为线条宽度的半圆
- .square：线条结尾处绘制半个边长为线条宽度的正方形。这种形状的端点与“butt”形状的端点十分相似，只是线条略长一点而已。
//设置顶点样式（圆角） context.setLineCap(.round)
3，设置连接点的样式
通过 setLineJoin 可以设置线条拐点的样式，使用的是 CGLineJoin 枚举，内容如下：
- .mitre：锐角斜切（默认值）
- .round：圆头
- .bevel：平头斜切
//设置连接点样式（圆角） context.setLineJoin(CGLineJoin.round)
4，设置阴影
我们可以设置阴影的偏移量、模糊度和颜色。
//设置阴影
context.setShadow(offset: CGSize(width:3, height:3), blur: 0.6,
color: UIColor.lightGray.cgColor)
5，绘制虚线
class CGView:UIView {
override init(frame: CGRect) {
super.init(frame: frame)
//设置背景色为透明，否则是黑色背景
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
//获取绘图上下文
guard let context = UIGraphicsGetCurrentContext() else {
return
}
//创建一个矩形，它的所有边都内缩3
let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let path = CGMutablePath()
path.move(to: CGPoint(x:drawingRect.minX, y:drawingRect.minY))
path.addLine(to:CGPoint(x:drawingRect.maxX, y:drawingRect.minY))
path.addLine(to:CGPoint(x:drawingRect.maxX, y:drawingRect.maxY))
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(UIColor.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//虚线每个线段的长度与间隔
let lengths: [CGFloat] = [15,4]
//设置虚线样式
context.setLineDash(phase: 0, lengths: lengths)
//绘制路径
context.strokePath()
}
}
当然我们也可以设置虚线的顶点和连接点的样式（这里我都使用圆形）：
6，绘制圆弧
圆弧就是圆上的一部分。要绘制圆弧必须确定：圆形中点的坐标、圆的半径、圆弧的起点角度和终点角度。
其中起点角度和终点角度都要用弧度表示，即常量 pi 的倍数（1pi 是半圆，2pi 是整个圆形）。
class CGView:UIView {
override init(frame: CGRect) {
super.init(frame: frame)
//设置背景色为透明，否则是黑色背景
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
//获取绘图上下文
guard let context = UIGraphicsGetCurrentContext() else {
return
}
//创建一个矩形，它的所有边都内缩3
let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let path = CGMutablePath()
//圆弧半径
let radius = min(drawingRect.width, drawingRect.height)/2
//圆弧中点
let center = CGPoint(x:drawingRect.midX, y:drawingRect.midY)
//绘制圆弧
path.addArc(center: center, radius: radius, startAngle: 0,
endAngle: CGFloat.pi * 1.5, clockwise: false)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(UIColor.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//绘制路径
context.strokePath()
}
}
7，贝塞尔曲线绘制
在 Quartz 2D 中曲线绘制分为：二次贝塞尔曲线和三次贝塞尔曲线。二次曲线只有一个控制点，而三次曲线有两个控制点。
（1）二次贝塞尔曲线绘制
class CGView:UIView {
override init(frame: CGRect) {
super.init(frame: frame)
//设置背景色为透明，否则是黑色背景
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
//获取绘图上下文
guard let context = UIGraphicsGetCurrentContext() else {
return
}
//创建一个矩形，它的所有边都内缩3点
let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let path = CGMutablePath()
//移动起点
path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.maxY))
//二次贝塞尔曲线终点
let toPoint = CGPoint(x: drawingRect.maxX, y: drawingRect.maxY)
//二次贝塞尔曲线控制点
let controlPoint = CGPoint(x: drawingRect.midX, y: drawingRect.minY)
//绘制二次贝塞尔曲线
path.addQuadCurve(to: toPoint, control: controlPoint)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(UIColor.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//绘制路径
context.strokePath()
}
}
（2）三次贝塞尔曲线绘制
class CGView:UIView {
override init(frame: CGRect) {
super.init(frame: frame)
//设置背景色为透明，否则是黑色背景
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
//获取绘图上下文
guard let context = UIGraphicsGetCurrentContext() else {
return
}
//创建一个矩形，它的所有边都内缩3
let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)
//创建并设置路径
let path = CGMutablePath()
//移动起点
path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.maxY))
//三次贝塞尔曲线终点
let toPoint = CGPoint(x: drawingRect.maxX, y: drawingRect.minY)
//三次贝塞尔曲线第1个控制点
let controlPoint1 = CGPoint(x: (drawingRect.minX+drawingRect.midX)/2, y: drawingRect.minY)
//三次贝塞尔曲线第2个控制点
let controlPoint2 = CGPoint(x: (drawingRect.midX+drawingRect.maxX)/2, y: drawingRect.maxY)
//绘制三次贝塞尔曲线
path.addCurve(to: toPoint, control1: controlPoint1, control2: controlPoint2)
//添加路径到图形上下文
context.addPath(path)
//设置笔触颜色
context.setStrokeColor(UIColor.orange.cgColor)
//设置笔触宽度
context.setLineWidth(6)
//绘制路径
context.strokePath()
}
}
全部评论（9）
hangge，我已经绘制好了一个view，当我想改变绘制的内容，也就是情况原有的view，为该view重新绘制内容，该怎么做？
站长回复：要动态改变view里绘制的内容，这样参考我之前写的这篇文章：Swift - 制作一个带动画效果的环形进度条。 它们的原理都差不多的。
Error: this application, or a library it uses, has passed an invalid numeric value (NaN, or not-a-number) to CoreGraphics API and this value is being ignored. Please fix this problem.
If you want to see the backtrace, please set CG_NUMERICS_SHOW_BACKTRACE environmental variable.
没有显示出来，然后就打印这两句出来，也没有崩溃
站长回复：运行的是我文章中的代码吗？看样子像是参数传递有误，你再检查下。
看你的东西很受益，谢谢你的贡献！
我想问问我想画一条直线，已知两个点的坐标但是没有画出来，不知道是什么原因，下面是代码，请指教一下：
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let drawline = DrawLine()
self.view.addSubview(drawline)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
class DrawLine:UIView {
let lineW:CGFloat = 1
let startP:CGPoint = CGPoint(x:CGFloat(50),y:CGFloat(50))
let endP:CGPoint = CGPoint(x:CGFloat(150),y:CGFloat(150))
override func draw(_ rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
context?.setLineCap(.round)
context?.setLineJoin(.round)
context?.beginPath()
context?.move(to: startP)
context?.addLine(to: endP)
context?.setLineWidth(lineW)
context?.strokePath()
}
}
站长回复：（1）你没有给drawline设置位置和尺寸:
感谢你的分享，真干货，给了我很大帮助
站长回复：不客气，能帮助到你我也很高兴。
请问有木有
//移动起点
path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.maxY))
//二次贝塞尔曲线终点
let toPoint = CGPoint(x: drawingRect.maxX, y: drawingRect.maxY)
//二次贝塞尔曲线控制点
let controlPoint = CGPoint(x: drawingRect.midX, y: drawingRect.minY)
这里这些数组变化的详细文章呀?
站长回复：我觉得这个已经就是关于Core Graphics绘图详细的文章了啊。
学习了.谢谢
站长回复：不客气。
文章很棒！
對CG得理解很淺，只能大略看懂，能有這種圖文並茂又用Swift3實現的文章，對理解上，幫了大忙！
十分感謝！
站长回复：不客气。我的文章能对你有所帮助，我也很高兴。
十分感谢，受益匪浅。一直找不到 swift 的 cg教程，找到的话也不是 swift3的，十分感谢航歌。
站长回复：不客气，我的文章能帮助到你，我也很高兴。
为什么我写这个就报错
//创建并设置路径 let path = CGMutablePath()
只能用CGPathCreateMutable() ？用上面的就报错，说没有初始化那意思
站长回复：我测试了下是没问题的啊，是不是你Xcode版本太低，升级成最新的试试。