Core Graphics 基本绘制操作

发表于 | 分类于

Core Graphics vs. UIKit

Core Graphics UIKit
基于 C 的 API UIBezierPath 类
面向过程 面向对象
UIKit 绘制的基石 构建在 Core Graphics 之上
可以通过参数接收 Context 绘制 只能基于当前 Context 绘制

坐标系

UIKit 坐标系和数学坐标系相反
Core Graphics 默认坐标系和数学坐标系一样
一般基于 UIKit 坐标系进行绘制

坐标系转换:

Swift:

1
2
context?.translateBy(x: 0, y: bounds.height)
context?.scaleBy(x: 1.0, y: -1.0)

OC:

1
2
CGContextTranslateCTM(context, 0, bounds.size.height)
CGContextScaleCTM(context, 1.0, -1.0)

绘制过程

  1. 获取上下文
  2. 设置区域
  3. 绘制所需图形
  4. 设置填充或线条颜色
  5. 填充或绘制线条

绘制代码

椭圆形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
func makeEllipse(_ context: CGContext?, _ rect: CGRect) {
    // 获取图形上下文
    
    let rectangle = CGRect(x: 20, y: 30, width: 280, height: 260)
    
    // 添加椭圆
    context?.addEllipse(in: rectangle)
    
    // 设置填充颜色
    context?.setFillColor(UIColor.orange.cgColor)
    
    // 填充路径
    context?.fillPath()
}

圆形和空心圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
func drawCircle(_ context: CGContext?, at point: CGPoint) {
    let context = UIGraphicsGetCurrentContext()
    
    let radius: CGFloat = 20.0
    
    // 绘制圆
    context?.addArc(center: point, radius: radius, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
    
    // 设置线条宽度颜色
    context?.setStrokeColor(UIColor.blue.cgColor)
    context?.setLineWidth(3.0)
    
    // 绘制空心圆
    context?.strokePath()
    
    // 绘制小圆形
    context?.addArc(center: point, radius: radius/2, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: false)
    
    context?.setFillColor(UIColor.blue.cgColor)
    
    context?.fillPath()
}

三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
func drawTriangle(_ context: CGContext?) {
    
    // 创建一个新的路径
    context?.beginPath()
    
    // 添加起始点
    context?.move(to: CGPoint(x: 160, y: 140))
    
    // 添加线条
    context?.addLine(to: CGPoint(x: 190, y: 190))
    context?.addLine(to: CGPoint(x: 130, y: 190))
    
    // 关闭并终止当前路径的子路径
    context?.closePath()
    
    context?.setFillColor(UIColor.brown.cgColor)
    
    context?.fillPath()
}

矩形

1
2
3
4
5
6
7
8
9
10
11
func drawRectangle(_ context: CGContext?) {
    
    let rectangle = CGRect(x: 100, y: 225, width: 120, height: 15)
    
    // 添加矩形路径
    context?.addRect(rectangle)
    
    context?.setFillColor(UIColor.red.cgColor)
    
    context?.fillPath()
}

贝塞尔曲线参考