iOS:quartz2D绘图

简介:

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变换。

 

 
 
 
 
 
   

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
分类:  iOS高级

本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/4867802.html,如需转载请自行联系原作者
相关文章
|
iOS开发
iOS开发UI篇—Quartz2D(自定义UIImageView控件)
iOS开发UI篇—Quartz2D(自定义UIImageView控件) 一、实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View。
809 0
|
图形学 iOS开发 C语言
iOS开发UI篇—Quartz2D使用(绘制基本图形)
iOS开发UI篇—Quartz2D使用(绘制基本图形) 一、简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息、绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件、Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上。
762 0
|
iOS开发
iOS开发UI篇—Quartz2D使用(信纸条纹)
iOS开发UI篇—Quartz2D使用(信纸条纹) 一、前导程序 新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺。 1 #import "YYViewController.
772 0
|
iOS开发
iOS开发UI篇—Quartz2D使用(截屏)
iOS开发UI篇—Quartz2D使用(截屏) 一、简单说明 在程序开发中,有时候需要截取屏幕上的某一块内容,比如捕鱼达人游戏。如图:   完成截屏功能的核心代码:- (void)renderInContext:(CGContextRef)ctx;调用某个view的layer的renderI...
829 0
|
iOS开发
iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇—Quartz2D简单使用(二) 一、画文字 代码: 1 // 2 // YYtextview.m 3 // 04-写文字 4 // 5 // Created by 孔医己 on 14-6-10.
694 0
|
iOS开发
iOS开发UI篇—Quartz2D使用(图形上下文栈)
iOS开发UI篇—Quartz2D使用(图形上下文栈) 一、qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法。
732 0
|
iOS开发
iOS开发UI篇—Quartz2D使用(矩阵操作)
iOS开发UI篇—Quartz2D使用(矩阵操作) 一、关于矩阵操作 1.画一个四边形 通过设置两个端点(长和宽)来完成一个四边形的绘制。 代码: 1 - (void)drawRect:(CGRect)rect 2 { 3 //画四边形 4 //获取图...
723 0
|
iOS开发
iOS开发UI篇—Quartz2D使用(图片剪切)
iOS开发UI篇—Quartz2D使用(图片剪切) 一、使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上。按照原始大小,把图片绘制到一个点上。 代码: 1 - (void)drawRect:(CGRect)rect 2 { 3 ...
783 0