iOS 绘图技术
-
UIKit
- UIKit属于高级别图形接口，能够访问绘图、动画、字体、图片等
-
Quartz 2D
- Core Graphics (CG)
- 基于路径的绘图，透明度绘图，遮盖，阴影，透明度，色彩管理，防锯齿渲染，生成PDF，以及PDF元数据的相关处理
-
OpenGL ES
- 用于绘制高性能的2D、3D图片
绘制视图
绘制都是发生在UIView的区域内，如果实现了drawRect方法，那么就不会走系统提供的视图，最直观的就是实现了drawRect后，视图默认没有颜色。
尽量使用setNeedsDisplayInRect:只绘制需要重绘的部分,而不是绘制全部
// 描边
UIColor.red.setStroke()
UIRectFrame(CGRect.init(x: horizontal * 30, y: vertical * 30, width: 30, height: 30));
// 填充
UIColor.orange.setFill()
UIRectFill(CGRect.init(x: horizontal * 30, y: vertical * 30, width: 30, height: 30));
// 绘制图片
let img = UIImage.init(named: "icon")
img?.drawAsPattern(in: CGRect.init(x: 0, y: 0, width: 130, height: 130))
// img?.draw(at: CGPoint.init(x: 5, y: 5))
// img?.draw(in: CGRect.init(x: 0, y: 0, width: 100, height: 100))
// 绘制文字
let content:NSString = "内容"
let attr :[NSAttributedString.Key:Any] = [
NSAttributedString.Key.font:UIFont.systemFont(ofSize: 15),
NSAttributedString.Key.backgroundColor:UIColor.orange,
NSAttributedString.Key.foregroundColor:UIColor.white
]
// content.draw(at: CGPoint.init(x: 5, y: 5), withAttributes: attr)
content.draw(in: CGRect.init(x: 0, y: 0, width: 100, height: 100), withAttributes: attr)
图形上下文
- 图形上下文就相当于绘制视图的手
- 图形上下文包含了绘制所需要的信息，比如颜色、裁剪区域、线段、宽度、及风格
- 图形上下文对应于 CGContextRef 封装类型
- 图形上下文仅对当前的drawRect:方法调用有效
// 绘制图形
let context = UIGraphicsGetCurrentContext()
context?.move(to: CGPoint.init(x: 20, y: 20))
context?.addLine(to: CGPoint.init(x: 30, y: 40))
context?.addLine(to: CGPoint.init(x: 10, y: 40))
context?.closePath()
UIColor.red.setStroke()
UIColor.orange.setFill()
// 保存当前上下文
// context?.saveGState()
UIColor.purple.setStroke()
UIColor.white.setFill()
// 读取保存的上下文
// context?.restoreGState()
context?.drawPath(using: .fillStroke)
- 路径
- 用于描述矩形、圆、以及其他2D图形
- 基本图元：点、线段、弧、贝塞尔曲线
贝塞尔曲线，由四个点来描述一条曲线，分别是起点终点，然后两个描述曲线的点
// 绘制图形
let context = UIGraphicsGetCurrentContext()
var xx = 20;
let yy = 100
context?.move(to: CGPoint.init(x: xx, y: yy))
for _ in 0..<5 {
context?.addCurve(to: CGPoint.init(x: xx + 40, y: yy), control1: CGPoint.init(x: xx+15, y: yy - 10), control2: CGPoint.init(x: xx+25, y: yy+10));
xx = xx + 40
}
// context?.closePath()
UIColor.red.setStroke()
context?.drawPath(using: .stroke)
- Quartz 坐标系转换
// CTM变换矩阵，当前变换矩阵变换
let img = UIImage.init(named: "icon")
let imgRef = img?.cgImage
let context = UIGraphicsGetCurrentContext()
context?.saveGState()
context?.translateBy(x: 0, y: img!.size.height)
context?.scaleBy(x: 1, y: -1)
let rect = CGRect.init(x: 0, y: 0, width: img!.size.width, height: img!.size.height)
context?.draw(imgRef!, in: rect)
context?.restoreGState()
let img = UIImage.init(named: "icon")
let imgRef = img?.cgImage
let context = UIGraphicsGetCurrentContext()
context?.saveGState()
// 仿射变换
let myatt = CGAffineTransform.init(translationX: 50, y: 50)
context?.concatenate(myatt)
let scale = CGAffineTransform.init(scaleX: 0.5, y: 0.5)
context?.concatenate(scale)
let rect = CGRect.init(x: 0, y: 0, width: img!.size.width, height: img!.size.height)
context?.draw(imgRef!, in: rect)
context?.restoreGState()
