Quartz-2D:绘图
一、介绍:
•Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境
•Quartz 2D API可以实现许多功能,如基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成和PDF元数据访问等
•Quartz 2D API是Core Graphics框架的一部分,因此其中的很多数据类型和方法都是以CG开头的。会经常见到Quartz 2D(Quartz)和Core Graphics两个术语交互使用
•Quartz 2D与分辨率和设备无关,因此在使用Quartz 2D绘图时,无需考虑最终绘图的目标设备
二、Core Graphics框架:
•Core Graphic框架是一组基于C的API,可以用于一切绘图操作,这个框架的重要性,仅次于UIKit和Foundation
•
•当使用UIKit创建按钮、标签或者其他UIView的子类时,UIKit会用Core Graphics将这些元素绘制在屏幕上。此外,UIEvent(UIKit中的事件处理类)也会使用Core Graphics,用来帮助确定触摸事件在屏幕上所处的位置
•
•因为UIKit依赖于Core Graphics,所以当引入<UIKit/Uikit.h>时,Core Graphics框架会被自动引入,即UIKit内部已经引入了Core Graphics框架的主头文件:<CoreGraphics/CoreGraphics.h>
•
•为了让开发者不必触及底层的Core Graphics的C接口,UIKit内部封装了Core Graphics的一些API,可以快速生成通用的界面元素。但是,有时候直接利用Core Graphics的C接口是很有必要和很有好处的,比如创建一个自定义的界面元素
•
三、Quartz 2D的几个重要概念:
概念:
•在哪里绘图?
1.图形上下文(Graphics Context)
•
•如何绘图?
1.Quartz 2D坐标系
2.绘图顺序
3.UIView的drawRect:方法
4.Quartz 2D的内存管理
图形上下文(Graphics Context)的介绍:
•Graphics Context是一个数据类型(CGContextRef),封装了Quartz绘制图像到输出设备的信息。输出设备可以是PDF文件、Bitmap或者显示器的窗口上、打印机。
•
•Quartz中所有的对象都是绘制到一个Graphics Context中
•
•当用Quartz绘图时,所有设备相关的特性都包含在Graphics Context中。换句话说,我们可以简单地给Quartz绘图序列指定不同的Graphics Context,就可将相同的图像绘制到不同的设备上。而不需要任何设备相关的计算,这些都由Quartz替我们完成
图形上下文(Graphics Context)的几种类型:
•Quartz提供了以下几种类型的Graphics Context:
•
1.Bitmap Graphics Context
2.PDF Graphics Context
3.Window Graphics Context
4.Layer Graphics Context
5.Printer Graphics Context
截图显示:
图形上下文(Graphics Context)——绘制目标
三、坐标系:
Quartz 2D坐标系:
•Quartz中默认的坐标系统是:原点(0, 0)在左下角。沿着X轴从左到右坐标值逐渐增大;沿着Y轴从下到上坐标值逐渐增大
•
•有一些技术在设置它们的graphics context时使用了不同于Quartz的默认坐标系统。最常见的一种修改的坐标系统是原点位于左上角,而沿着Y轴从上到下坐标值逐渐增大。例如:UIView中的UIGraphicsGetCurrentContext方法返回的图形上下文就是用的是这种坐标系
截图显示:
UIKit坐标系:
•原点(0,0)在屏幕的左上角,X轴向右正向延伸,Y轴向下正向延伸
•
•iOS的像素分辨率会随设备的硬件而变化,iPhone4第一次引入了视网膜屏幕,像素分辨率为960 * 640,刚好是前一代iPod和iPhone像素分辨率( 480 * 320)的两倍
•
•在绘图时,需要使用“点”的概念来思考问题,而不是像素。也就是说在点坐标系中绘图,不是硬件的像素坐标系
•
•虽然这些设备的像素分辨率不同,但用到的坐标系保持不变(以点为单位)。在iPhone4上,一个点会用2像素宽度来绘制
•
•提示:如果绘图的上下文,是使用UIGraphicsGetCurrentContext或者其他以UI开头的方法获取到的,在绘图时无需进行坐标转换
•
Quartz 2D坐标系——坐标系的转换:
1.CGContextRotateCTM(CGContextRef c, CGFloat angle)方法可以相对原点旋转上下文坐标系
2.CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)方法可以相对原点平移上下文坐标系
3.CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)方法可以缩放上下文坐标系
•
•注意:
–转换坐标系前,使用CGContextSaveGState(CGContextRef c)保存当前上下文状态
–坐标系转换后,使用CGContextRestoreGState(CGContextRef c)可以恢复之前保存的上下文状态
四、Quartz 2D绘图:
Quartz 2D的绘图顺序和步骤:
顺序截图显示:
执行步骤:
•1. 获取与视图相关联的上下文对象
–UIGraphicsGetCurrentContext
•2. 创建及设置路径 (path)
–2.1 创建路径
–2.2 设置路径起点
–2.3 增加路径内容……
•3. 将路径添加到上下文
•4. 设置上下文状态
–边线颜色、填充颜色、线宽、线段连接样式、线段首尾样式、虚线样式…
•5. 绘制路径
•6. 释放路径
利用Quartz 2D绘制UIView:
•当在UIView子类中重写drawRect:方法时,iOS会自动准备好一个图形上下文,可以通过调用UIGraphicsGetCurrentContext()来获取
•
•只要一个UIView需要被刷新或者重绘,drawRect:方法就会被调用,所以drawRect:的调用频率很高
•
•需要注意的是:重绘时应该调用setNeedsDisplay,而不能直接调用drawRect:,setNeedsDisplay会自动调用drawRect:
drawRect:注意事项:
•drawRect:是在UIViewController的loadView和viewDidLoad两方法之后调用的
•
•如果在UIView初始化时没有设置CGRect,drawRect:将不会被自动调用
•
•如果设置UIView的contentMode属性值为UIViewContentModeRedraw,那么将在每次更改frame时自动调用drawRect:
•
•如果使用UIView绘图,只能在drawRect:方法中获取相应的CGContextRef并绘图。而在其他方法中获取的CGContextRef不能用于绘图
Quartz内存管理:
•使用含有“Create”或“Copy”的函数创建的对象,使用完后必须释放,否则将导致内存泄露
•
•使用不含有“Create”或“Copy”的函数获取的对象,则不需要释放
•
•如果retain了一个对象,不再使用时,需要将其release掉。可以使用Quartz 2D的函数来指定retain和release一个对象。例如,如果创建了一个CGColorSpace对象,则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数
Quartz 2D绘图的基础元素——路径:
•路径定义了一条或者或多条形状或子路径
•子路径可以包含一条或者多条直线或曲线
•子路径也可以是一些简单的形状,例如线、圆形、矩形或者星型等
•子路径还可以包含复杂的形状,例如地图轮廓或者涂鸦等
•路径可以是开放的,也可以是封闭的;对于封闭路径可以空心的也可以是实心的
截图显示:
路径的创建与绘制:
•路径的创建和绘制是各自独立的任务
•可以绘制空心路径、实心路径,或者即绘制路径的边线又填充路径的内容
•还可以将路径作为剪切区域,用于将其他对象的绘制约束在路径的区域范围之内
截图显示:
五、Quantz基本绘图方法——构建路径:
函数
|
方法
|
CGContextBeginPath
|
开始一个新路径
|
CGContextMoveToPoint
|
设置路径的起点
|
CGContextClosePath
|
关闭路径
|
CGContextAddPath
|
添加路径
|
CGContextAddLineToPoint
|
在指定点添加线
|
CGContextAddLines
|
添加多条线
|
CGContextAddRect
|
添加矩形
|
CGContextAddRects
|
添加多个矩形
|
CGContextAddEllipseInRect
|
在矩形区域中添加椭圆
|
CGContextAddArc
|
添加圆弧
|
CGContextAddArcToPoint
|
在指定点添加圆弧
|
CGContextAddCurveToPoint
|
在指定点添加曲线
|
六、Quantz基本绘图方法——绘制路径:
函数
|
方法
|
CGContextDrawPath
|
绘制路径
|
CGContextFillPath
|
实心路径
|
CGContextFillRect
|
实心矩形
|
CGContextFillRects
|
多个实心矩形
|
CGContextFillEllipseInRect
|
在矩形区域中绘制实心椭圆
|
CGContextStrokePath
|
空心路径
|
CGContextStrokeRect
|
空心矩形
|
CGContextStrokeRectWithWidth
|
使用宽度绘制空心矩形
|
CGContextStrokeEllipseInRect
|
在矩形区域中绘制空心椭圆
|
七、Quantz基本绘图方法——绘图状态参数:
函数
|
方法
|
CGContextSetLineWidth
|
设置线宽
|
CGContextSetBlendMode
|
设置混合模式
|
CGContextSetShouldAntialias
|
设置抗锯齿效果
|
CGContextSetLineCap
|
设置线条收尾点样式
|
CGContextSetLineJoin
|
设置线条连接点样式
|
CGContextSetLineDash
|
设置虚线
|
八、补充概念:图形&图像:
•Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,Core Graphic框架是一组基于C的API
•Quartz 2D的绘图顺序是叠加的
•可以使用Quartz 2D API来实现许多功能,如基本路径的绘制、透明度、阴影、颜色管理、反锯齿、PDF文档生成和PDF元数据访问等
•使用UIGraphicsGetCurrentContext获取到的上下文坐标系方向与UIKit的坐标系方向是一致的 OpenGL
•UIKit内部封装了Core Graphics的一些API,可以快速生成通用的界面元素
•UIView重绘时应该调用setNeedsDisplay,而不能直接调用drawRect:
九、2D图形基本变换:
有平移变换、缩放变换、旋转变换、x轴对称变换、y轴对称变换、坐标原点对称变换。
CTM变换矩阵: current transform Martix的简称
CTM主要涉及的函数有:
CGContextRotateCTM:旋转变换
CGContextScaleCTM:缩放变换
CGContextTranslateCTM:平移变换
仿射变换(Affine):
也是一种2D变换,他可以重用变换,经过多次变换,每一种变换都可以用矩阵表示,通过多次矩阵相乘得到最后结果。
下面是一些访射变换函数:
CGAffineMakeRotation:创建新的旋转变换矩阵
CGAffineMakeScale:创建新的 缩放矩阵函数
CGAffineMakeTranslation:创建新的平移矩阵
CGAffineTransformRotate:旋转矩阵
CGAffineTransformScale:缩放矩阵
CGAffineTransformTranslate:平移矩阵
CGContextConcatCTM:连接到CTM变换。