iOS開發，ios開發教程

iOS開發，ios開發教程
Quartz 2D簡介

是一個二維繪圖引擎，同時支援iOS和Mac系統
Quartz 2D能完成的工作
繪製圖形 : 線條\三角形\矩形\圓\弧等
繪製文字
繪製\產生圖片(映像)
讀取\產生PDF
\裁剪圖片
自訂UI控制項
… …

drawRect:方法的使用
常見圖形的繪製：線條、多邊形、圓
繪圖狀態的設定：文字顏色、線寬等
圖形上下文狀態的儲存與恢複
圖形上下文棧

為了便於搭建美觀的UI介面，iOS提供了UIKit架構，裡面有各種各樣的UI控制項
UILabel：顯示文字
UIImageView：顯示圖片
UIButton：同時顯示圖片和文字（能點擊）
… …

Quartz2D價值

利用UIKit架構提供的控制項，拼拼湊湊，能搭建和現實一些簡單、常見的UI介面

但是，有些UI介面極其複雜、而且比較個人化，用普通的UI控制項無法實現，這時可以利用Quartz2D技術將控制項內部的結構畫出來，自訂控制項的樣子
其實，iOS中大部分控制項的內容都是通過Quartz2D畫出來的
因此，Quartz2D在iOS開發中很重要的一個價值是：自訂view（自訂UI控制項

Quartz2D的API是純C語言的Quartz2D的API來自於Core Graphics架構資料類型和函數基本都以CG作為首碼CGContextRefCGPathRefCGContextStrokePath(ctx);……

圖形上下文（Graphics Context）

圖形上下文（Graphics Context）：是一個CGContextRef類型的資料

圖形內容相關的作用
儲存繪圖資訊、繪圖狀態
決定繪製的輸出目標（繪製到什麼地方去？）
（輸出目標可以是PDF檔案、Bitmap或者顯示器的視窗上）

相同的一套繪圖序列，指定不同的Graphics Context，就可將相同的映像繪製到不同的目標上

Quartz2D提供了以下幾種類型的Graphics Context：Bitmap Graphics ContextPDF Graphics ContextWindow Graphics ContextLayer Graphics ContextPrinter Graphics Context

Quartz2D自訂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繪圖的代碼步驟

//獲得圖形上下文CGContextRef ctx = UIGraphicsGetCurrentContext();//拼接路徑（下面代碼是搞一條線段）CGContextMoveToPoint(ctx, 10, 10);CGContextAddLineToPoint(ctx, 100, 100);//繪製路徑CGContextStrokePath(ctx); // CGContextFillPath(ctx);

Quartz2D常用拼接路徑函數

//建立一個起點void CGContextMoveToPoint(CGContextRef c, CGFloat 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 clockwise)

//Mode參數決定繪製的模式void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)//繪製空心路徑void CGContextStrokePath(CGContextRef c)//繪製實心路徑void CGContextFillPath(CGContextRef c)//提示：一般以CGContextDraw、CGContextStroke、CGContextFill開頭的函數，都是用來繪製路徑的

Quartz2D圖形上下文棧的操作

//將當前的上下文copy一份,儲存到棧頂(那個棧叫做”圖形上下文棧”)void CGContextSaveGState(CGContextRef c)//將棧頂的上下文出棧,替換掉當前的上下文void CGContextRestoreGState(CGContextRef c)

Quartz2D基本線條繪製執行個體

/** *  在view第一次顯示到螢幕上的時候會調用一次 */- (void)drawRect:(CGRect)rect {    //1.獲得圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //2.拼接圖形路徑    //設定線段寬度    CGContextSetLineWidth(ctx, 5);    //設定線段頭尾部的樣式    CGContextSetLineCap(ctx, kCGLineCapRound);    //設定線段轉折點的樣式    CGContextSetLineJoin(ctx, kCGLineJoinRound);    //第一條線 (設定顏色)    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);    //設定一個起點    CGContextMoveToPoint(ctx, 10, 10);    //添加一條線段到（100，100）    CGContextAddLineToPoint(ctx, 100, 100);    //渲染    CGContextStrokePath(ctx);    //第二條線    CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);    CGContextMoveToPoint(ctx, 30, 30);    CGContextAddLineToPoint(ctx, 140, 40);    CGContextAddLineToPoint(ctx, 180, 150);    CGContextStrokePath(ctx);    //第三條線    CGContextSetRGBStrokeColor(ctx, 0, 1, 1, 1);    CGContextMoveToPoint(ctx, 160, 260);    CGContextAddLineToPoint(ctx, 100, 40);    CGContextAddLineToPoint(ctx, 100, 200);    CGContextAddLineToPoint(ctx, 50, 100);    CGContextSetLineWidth(ctx, 10);    CGContextStrokePath(ctx);    //第四條線    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);    CGContextMoveToPoint(ctx, 90, 340);    CGContextAddLineToPoint(ctx, 200, 340);    CGContextSetLineWidth(ctx, 2);    CGContextStrokePath(ctx);}@end

Quartz2D形狀繪製執行個體

- (void)drawRect:(CGRect)rect {    drawTriangle();    drawQuadrilateral();}/** *  四邊形 */void drawQuadrilateral(){    //1.獲得圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //2.畫圖形    CGContextAddRect(ctx, CGRectMake(50, 150, 150, 200));    [[UIColor orangeColor]set];    //3.繪製圖形    //CGContextFillPath(ctx); //填充    CGContextStrokePath(ctx); //非填充};/** *  三角形 */void drawTriangle(){    //1.獲得圖形上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //2.畫三角形    CGContextMoveToPoint(ctx, 125,20);    CGContextAddLineToPoint(ctx, 10, 120);    CGContextAddLineToPoint(ctx, 250, 120);    //關閉路徑    CGContextClosePath(ctx);    CGContextSetLineWidth(ctx, 8);    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);    //3.繪製圖形    CGContextStrokePath(ctx);}

- (void)drawRect:(CGRect)rect {    drawCircle();    drawArc();}/** *  畫圓弧 */void drawArc(){    // 1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    // 2.畫圓弧    // x/y : 圓心    // radius : 半徑    // startAngle : 開始角度    // endAngle : 結束角度    // clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針)    CGContextAddArc(ctx, 100, 300, 50, M_PI_2, M_PI, 0);    CGContextSetRGBStrokeColor(ctx, 1, 1, 0, 0.8);    // 3.顯示繪製    CGContextStrokePath(ctx);    //畫1/4圓    CGContextMoveToPoint(ctx, 100, 100);    CGContextAddLineToPoint(ctx, 100, 150);    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);    CGContextClosePath(ctx);    [[UIColor redColor] set];    CGContextFillPath(ctx);}/** *  畫圓 */void drawCircle(){    //1.獲得上下文    CGContextRef ctx=UIGraphicsGetCurrentContext();    //2.畫圓    CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 150, 150));    CGContextSetLineWidth(ctx, 10);    CGContextSetRGBStrokeColor(ctx, 1, 0, 1, 1);    //3.顯示繪畫    CGContextStrokePath(ctx);}

Quartz2D圖片、文字繪製執行個體

/** *  繪製圖片 */void drawImage(){    //1.取得圖片    UIImage *image=[UIImage imageNamed:@"square"];    //[image drawAtPoint:CGPointMake(50, 50)];    //[image drawInRect:CGRectMake(0, 0, 150, 150)];    [image drawAsPatternInRect:CGRectMake(10, 10, 240, 240)];    //添加浮水印    NSString * str=@"作者: W先生";    [str drawInRect:CGRectMake(160, 200, 100, 30) withAttributes:nil];}/** *  繪製文字 */void drawText(){    //1.獲得上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //設定一個背景    CGRect bgRect = CGRectMake(80, 300, 100, 100);    CGContextAddRect(ctx, bgRect);    CGContextFillPath(ctx);    //繪製文字    NSString * str=@"愛編程,愛繪圖,不解釋!!";    NSMutableDictionary *attrs=[NSMutableDictionary dictionary];    //設定文字顏色    attrs[NSForegroundColorAttributeName]=[UIColor orangeColor];    //設定文字字型    attrs[NSFontAttributeName]=[UIFont systemFontOfSize:25];    [str drawInRect:bgRect withAttributes:attrs];}

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。