什么是Quartz2D?
Quartz 2D是一個二維圖形繪制引擎,支持iOS環境和Mac OS X環境。我們可以使用Quartz 2D API來實現許多功能,如基本路徑的繪制、透明度、描影、繪制陰影、透明層、顏色管理、反鋸齒、PDF文檔生成和PDF元數據訪問。在需要的時候,Quartz 2D還可以借助圖形硬件的功能。
在Mac OS X中,Quartz 2D可以與其它圖形圖像技術混合使用,如Core Image、Core Video、OpenGL、QuickTime。例如,通過使用 QuickTime的GraphicsImportCreateCGImage函數,可以用 Quartz從一個 QuickTime圖形導入器中創建一個圖像。
1.Quartz 2D能完成的工作
繪制圖形 : 線條\三角形\矩形\圓\弧等
繪制文字
繪制\生成圖片(圖像)
讀取\生成PDF
截圖\裁剪圖片
自定義UI控件
涂鴉\畫板
手勢解鎖
… …
2.Quartz2D在iOS開發中的價值:
為了便于搭建美觀的UI界面,iOS提供了UIKit框架,里面有各種各樣的UI控件
UILabel:顯示文字
UIImageView:顯示圖片
UIButton:同時顯示圖片和文字(能點擊)
… …
利用UIKit框架提供的控件,拼拼湊湊,能搭建和現實一些簡單、常見的UI界面
但是,有些UI界面極其復雜、而且比較個性化,用普通的UI控件無法實現,這時可以利用Quartz2D技術將控件內部的結構畫出來,自定義控件的樣子
其實,iOS中大部分控件的內容都是通過Quartz2D畫出來的
因此,Quartz2D在iOS開發中很重要的一個價值是:自定義view(自定義UI控件)
3.Quartz2D須知
Quartz2D的API是純C語言的
Quartz2D的API來自于Core Graphics框架
需要導入CoreGraphics.framework
數據類型和函數基本都以CG作為前綴
CGContextRef
CGPathRef
CGContextStrokePath(ctx);
……
圖形上下文
圖形上下文(Graphics Context):是一個CGContextRef類型的數據
1.圖形上下文的作用:
- 保存繪圖信息、繪圖狀態
- 決定繪制的輸出目標(繪制到什么地方去?)(輸出目標可以是PDF文件、Bitmap或者顯示器的窗口上)
- 相同的一套繪圖序列,指定不同的Graphics Context,就可將相同的圖像繪制到不同的目標上
Quartz2D提供了以下幾種類型的Graphics Context:
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context
自定義view
如何利用Quartz2D自定義view?(自定義UI控件)
如何利用Quartz2D繪制東西到view上?
首先,得有圖形上下文,因為它能保存繪圖信息,并且決定著繪制到什么地方去
其次,那個圖形上下文必須跟view相關聯,才能將內容繪制到view上面
自定義view的步驟
新建一個類,繼承自UIView
實現- (void)drawRect:(CGRect)rect方法,然后在這個方法中
取得跟當前view相關聯的圖形上下文
繪制相應的圖形內容
利用圖形上下文將繪制的所有內容渲染顯示到view上面
draw
為什么要實現drawRect:方法才能繪圖到view上?
因為在drawRect:方法中才能取得跟view相關聯的圖形上下文
drawRect:方法在什么時候被調用?
當view第一次顯示到屏幕上時(被加到UIWindow上顯示出來)
調用view的setNeedsDisplay或者setNeedsDisplayInRect:時
drawRect三部曲:
1.獲取上線文
2.繪制圖形
3.渲染
繪制線:
// 1.取得和當前視圖相關聯的圖形上下文(因為圖形上下文決定繪制的輸出目標)/
// 如果是在drawRect方法中調用UIGraphicsGetCurrentContext方法獲取出來的就是Layer的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.繪圖(繪制直線), 保存繪圖信息
// 設置起點
CGContextMoveToPoint(ctx, 10, 100);
// 設置終點
CGContextAddLineToPoint(ctx, 100, 100);
// 設置繪圖狀態
// 設置線條顏色 紅色
CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
// 設置線條寬度
CGContextSetLineWidth(ctx, 10);
// 設置線條的起點和終點的樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
// 設置線條的轉角的樣式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
// 繪制一條空心的線
CGContextStrokePath(ctx);
/*------------------華麗的分割線---------------------*/
// 重新設置第二條線的起點
CGContextMoveToPoint(ctx, 150, 200);
// 設置第二條直線的終點(自動把上一條直線的終點當做起點)
CGContextAddLineToPoint(ctx, 100, 50);
// 設置第二條線的顏色 綠色
// [[UIColor greenColor] set];
CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
// 繪制圖形(渲染圖形到view上)
// 繪制一條空心的線
CGContextStrokePath(ctx);
繪制三角形:
// 1.獲取圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2. 繪制三角形
// 設置起點
CGContextMoveToPoint(ctx, 100, 10);
// 設置第二個點
CGContextAddLineToPoint(ctx, 50, 100);
// 設置第三個點
CGContextAddLineToPoint(ctx, 150, 100);
// 設置終點
// CGContextAddLineToPoint(ctx, 100, 10);
// 關閉起點和終點
CGContextClosePath(ctx);
// 3.渲染圖形到layer上
CGContextStrokePath(ctx);
繪制圓形:
// 畫圓
// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫圓
CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 50, 50));
[[UIColor greenColor] set];
// 3.渲染
// CGContextStrokePath(ctx);
CGContextFillPath(ctx);
繪制矩形:
// Drawing code
// 繪制四邊形
// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.繪制四邊形
CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));
// 如果要設置繪圖的狀態必須在渲染之前
// CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
// 繪制什么類型的圖形(空心或者實心).就要通過什么類型的方法設置狀態
// CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);
// 調用OC的方法設置繪圖的顏色
// [[UIColor purpleColor] setFill];
// [[UIColor blueColor] setStroke];
// 調用OC的方法設置繪圖顏色(同時設置了實心和空心)
// [[UIColor greenColor] set];
[[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set];
// 3.渲染圖形到layer上
CGContextStrokePath(ctx);
// CGContextFillPath(ctx);
繪制圓弧:
// 畫圓弧
// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫圓弧
// x/y 圓心
// radius 半徑
// startAngle 開始的弧度
// endAngle 結束的弧度
// clockwise 畫圓弧的方向 (0 順時針, 1 逆時針)
// CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
CGContextClosePath(ctx);
// 3.渲染
// CGContextStrokePath(ctx);
CGContextFillPath(ctx);
繪制餅圖
// 1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.畫餅狀圖
// 畫線
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 100, 150);
// 畫圓弧
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
// CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1);
// 關閉路徑
CGContextClosePath(ctx);
// 3.渲染 (注意, 畫線只能通過空心來畫)
CGContextFillPath(ctx);
// CGContextStrokePath(ctx);
參考資料:
黑馬教程第五期,高級UI-Quartz2D章節
http://blog.csdn.net/newjerryj/article/details/8181376
http://www.cocoachina.com/ios/20111111/3486.html