drawRect 方法的使用

常見圖形的繪制:線條、多邊形、圓

繪圖狀態的設置:文字顏色、線寬等

圖形上下文狀態的保存與恢復

圖形上下文棧

Quartz 2D是一個二維繪圖引擎,同時支持IOS和MAC系統

Quartz 2D能完成的工作

繪制圖形:線條、三角形、矩形、圓、弧等

繪制文字

繪制、生成圖片(圖像)

讀取、生成PDF

截圖、裁剪圖片

自定義UI控件

為了便于搭建美觀的UI界面,IOS提供了UIKit框架,里面有各種各樣的UI控件

UILabel:顯示文字

UIImageView:顯示圖片

UIButton:同時顯示圖片和文字(能點擊)

利用UIKit框架提供的控件,拼拼湊湊,能搭建和現實一些簡單、常見的UI界面

但是,有些UI界面極其復雜、而且比較個性化,用普通的UI控件無法實現,這時可以利用Quartz2D技術將控件內部的結構畫出來,自定義控件的樣子

其實,IOS中大部分控件的內容都是通過Quartz2D畫出來的

因此,Quartz2D在IOS開發中很重要的一個價值是:自定義view(自定義UI控件)

案例一:剪裁圖片

案例二:畫圖板

案例三:手勢解鎖

圖形上下文

1 圖形上下文(Graphics Context):是一個CGContextRef類型的數據
2 圖形上下文的作用
3 保存繪圖信息、繪圖狀態
4 決定繪制的輸出目標(繪制到什么地方去?)
5 (輸出目標可以是PDF文件、Bitmap或者顯示器的窗口上)
6 相同的一套繪圖序列,指定不同的Graphics Context,就可將相同的圖形繪制到不同的目標上

自定義View

如何利用Quartz2D自定義view?(自定義UI控件)

如果利用Quartz2D繪制東西到view上?

首先,得有圖形上下文,因為它能保存繪圖信息,并且決定著繪制到什么地方去

其次,那個圖形上下文必須跟view相關聯,才能將內容繪制到view上面

自定義view的步驟

新建一個類,繼承自UIView

實現-(void)drawRect:(CGRect)rect方法,然后在這個方法中

取得跟當前view相關聯的圖形上下文

繪制相應的圖形內容

利用圖形上下文將繪制的所有內容渲染顯示到view上面

drawRect:

為什么要實現drawRect:方法才能繪圖到view上？

因為在drawRect:方法中才能取得跟view相關聯的圖形上下文

drawRect:方法在什么時候被調用?

當view第一次顯示到屏幕上時(被加到UIWindow上顯示出來)

調用view的setNeedsDisplay 或者setNeedsDisplayInRect:時

Quartz2D須知

Quartz2D的API是純C語言的

Quartz2D的API來自于Core Graphics框架

　　CoreGraphics.framework

數據類型和函數基本都以CG作為前綴

CGContextRef

CGPahtPef

CGContextStrokePaht(ctx);

在drawRect:方法中取得上下文后,就可以繪制東西到view上

view內部有個layer(圖層)屬性,drawRect:方法中取得的是一個Layer Graphics Context，因此,繪制的東西其實是繪制到view得layer上去了

View之所以能顯示東西,完全是因為它內部的layer

Quartz2D繪圖的代碼步驟

1.獲得圖形上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

2.拼接路徑(下面代碼是搞一條線段)

CGContextMoveToPoint(ctx,10,10);

CGContextAddLineToPoint(ctx,100,100);

3.繪制路徑

CGContextStrokePaht(ctx);// CGContextFillPaht(ctx);

常用拼接路徑函數

新建一個起點

void CGContextMoveToPoint(CGContextRef c,CGFloar x,CGFloat y);

添加新的線段到某個點

void CGContextAddLineToPoint(CGContextRef c,CGFloat x,CGFloat y);

添加一個矩形

void CGContextAddRect(CGContextRef c,CGRect rect)

添加一個橢圓

void CGContextAddEllipseInRect(CGContextRef context,CGRect rect);

添加一個圓弧

void CGContextAddArc(CGContextRef c,CGFloat x,CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle,int clockwisclockwise);

Mode參數決定繪制的模式

void CGContextDrawPath(CGContextRef c,CGPahtDrawingMode mode)

繪制空心路徑

void CGContextStrokePath(CGContextRef c)

繪制實心路徑

void CGContexxtFillPath(CGContextRef c)

一般以CGContextDrwa、CGContextStroke、CGContextFill 開頭的函數,都是用來繪制路徑的

將當前的上下文copy一份,保存到棧頂(那個棧叫做"圓形上下文棧")

void CGContextSaveGState(CGContextRef c)

將棧頂得上下文出棧,替換掉當前的上下文

void CGContextRestoreGState(CGContextRef c)

矩陣操作

利用矩陣操作,能讓繪制到上下文中的所有路徑一起發生變化

縮放

void CGContextScaleCTM(CGContextRef c,CGFloat sx,CGFloat sy);

旋轉

void CGContextRotateCTM(CGContextRef c,CGFloat angle)

平移

void CGContxtTranslateCTM(CGContextRef c,CGFloat tx,CGFloat ty);

Quartz2D的內存管理

使用含有Create 或 Copy的函數創建的對象,使用完后必須釋放,否則將導致內存泄露

使用不含有 create 或 copy的函數獲取的對象,則不需要釋放

如果retain了一個對象,不再使用時,需要將其release掉

可以使用Quartz 2D的函數來指定retain和release一個對象,例如,如果創建了一個CGColorSpace對象,則使用函數CGColorSpaceRetain和CGColorSpaceRelease來 retain和release對象

也可以使用Core Foundation的CFRetain和CFRelease.注意不能傳遞NULL值給這些函數

圖片水印

核心代碼

//開啟一個基于位圖的圖片上下文

void UIGraphicsBeginImageContextWithOptions(CGSize size,BOOL opaque,CGFloat scale);

//從上下文中取得圖片(UIImage)

UIImage * UIGraphicsGetImageFromCurrentImageContext();

//結束基于位圖的圖形上下文

void UIGraphicsEndImageContext();

圖片裁剪

核心代碼

//將當前上下所繪制的路徑裁剪出來(超出這個裁剪區域的都不能顯示)

void CGContextClip(CGContextRef c)

屏幕截圖

核心代碼:

-(void)renderInContext:(CGContextRef ) ctx;

調用某個view的layer的renderInContext:方法即可