Quartz 2D繪圖

#Quartz 2D繪圖 ##Quartz 2D 概述

• 概述:
  Quartz 2D是一個⼆維圖形繪製引擎,支持iOS環境和Mac OS X環境。咱們可使⽤用 Quartz 2D API來實現許多功能,如基本路徑的繪製、透明度、描影、繪製陰影、透明層、 顏⾊色管理、反鋸齒、PDF⽂文檔⽣生成和PDF元數據訪問。在須要的時候,Quartz 2D還能夠借 助圖形硬件的功能。Quartz 2D 的API是Core Graphics框架的一部分,所以其中的不少 數據類型和⽅方法都是以CG開頭的。會常常⻅見到Quartz 2D(Quartz)和Core Graphics 兩個術語交互使⽤用。

##Graphics Context

• 概述:
  Core Graphics API全部的操做都在一個上下⽂文中進⾏行。因此在繪圖以前須要獲取該 上下⽂文並傳⼊入執⾏行渲染的函數中。若是你正在渲染一副在內存中的圖⽚片,此時就須要傳⼊入 圖⽚片所屬的上下⽂文。得到一個圖形上下⽂文是咱們完成繪圖任務的第一步,你能夠將圖形上 下⽂文理解爲⼀塊畫布。若是你沒有獲得這塊畫布,那麼你就⽆沒法完成任何繪圖操做。
• Page
  Quartz 2D在圖像中使⽤用了繪畫者模型(painter’s model)。在繪畫者模型中,每一個連續的繪製操做都是將 ⼀個繪製層(a layer of ‘paint’)放置於一個畫布 (‘canvas’),咱們一般稱這個畫布爲Page。 Page上的繪 圖能夠經過額外的繪製操做來疊加更多的繪圖。Page上 的圖形對象只能經過疊加更多的繪圖來改變。這個模型 容許咱們使⽤用⼩小的圖元來構建複雜的圖形。 Page能夠是一張紙(若是輸出設備是打印機),也能夠是 虛擬的紙張(若是輸出設備是PDF⽂文件),還能夠是bitmap 圖像。這根據實際使⽤用的graphics context⽽而定。

'畫布' 「page」

// 1. 將自定義視圖添加到視圖上顯示
- (void)viewDidLoad {
    [super viewDidLoad];
    
    CoreGraphicsView *cgView = [[CoreGraphicsView alloc] initWithFrame:self.view.bounds];
    cgView.backgroundColor = [UIColor blackColor];
    
    [self.view addSubview:cgView];
    
    // 2. 在自定義的DrawView 中繪圖，當視圖顯示時就會調用下面的代碼。
- (void)drawRect:(CGRect)rect
{

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddRect(ctx, CGRectMake(10, 20, 100, 100));
    CGContextSetFillColorWithColor(ctx, [UIColor grayColor].CGColor);
    CGContextDrawPath(ctx, kCGPathFill);
}
}

• 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 讀解

• 一個Graphics Context表示⼀個繪製目標。它包含繪製系統⽤用於完成繪製指令的繪製參 數和設備相關信息
• Graphics Context定義了基本的繪製屬性,如顏色、裁減區域、線條寬度和樣式信息、 字體信息、混合模式等
• 在iOS應⽤用程序中,若是要在屏幕上進⾏行繪製,須要建立一個UIView對象,並實現它的 drawRect:⽅法。視圖的drawRect:方法在視圖顯⽰在屏幕上及它的內容須要更新時被調用
• 在調⽤用⾃自定義的drawRect:後,視圖對象⾃自動配置繪圖環境以便能⽴即執行繪圖操做
• 做爲配置的⼀一部分,視圖對象將爲當前的繪圖環境建立⼀Graphics Context。經過調 ⽤用UIGraphicsGetCurrentContext()⽅法能夠獲取當前的Graphics Context

##Quartz 2D座標系

座標系統定義是被繪製到Page上的對象的位置及⼤小範圍,如圖所示。咱們在用戶空間座標系統(user-space coordination system,簡稱⽤戶空間)中指定圖形的位置及⼤小。座標值是⽤浮點數來定義的。

• Quartz中默認的座標系統是:原點(0, 0) 在左下角。沿着X軸從左到右座標值逐漸增大;沿着Y軸從下到上座標值逐漸增大
• 有一些技術在設置它們的graphicscontext時使⽤了不一樣於Quartz的默認座標系統。最多見的一種修改的座標系統是原點位於左上角,而沿着Y軸從上到下座標值逐漸 增大。 **例如:**UIView中的 UIGraphicsGetCurrentContext方法返回的圖 形上下文就是用的是這種座標系

###UIKit座標系:

• 原點(0,0)在屏幕的左上角,X軸向右正向延伸,Y軸向下正向延伸
• iOS的像素分辨率會隨設備的硬件而變化,iPhone4第一次引入了視網膜屏幕,像素分辨率爲960 * 640,恰好是前⼀代iPod和iPhone像素分辨率( 480 * 320)的兩倍
• 在繪圖時,須要使用「點」的概念來思考問題,⽽不是像素。也就是說在點座標系中繪圖,不是硬件的像素座標系
• 雖然這些設備的像素分辨率不一樣,但⽤到的座標系保持不變(以點爲單位)。在iPhone4 上,⼀個點會⽤2像素寬度來繪製

###座標系的轉換:

• CGContextRotateCTM(CGContextRef c, CGFloat angle)⽅法能夠相對原點旋轉上下文座標系
• CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)方法能夠相對原點平移上下文座標系
• CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)⽅法能夠縮放上下⽂座標系

注意:
轉換座標系前,使用CGContextSaveGState(CGContextRef c)保存當前上下文狀態 座標系轉換後,使用CGContextRestoreGState(CGContextRef c)能夠恢復以前保存的上下⽂狀態 ##基本繪圖 ###Quartz 2D繪圖流程:

1. 獲取上下⽂
2. 保存上下⽂
3. 建立及設置路徑
4. 將路徑添加到上下文設置上下⽂狀態(邊框顏色,填充顏色,線條寬度,線段鏈接式,線段首尾樣式,虛線樣式等)
5. 繪製路徑
6. 釋放路徑
7. 恢復上下⽂

繪製簡單圖形代碼

- (void)drawGraphics {
    
    CGContextRef cxt =  UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(cxt, [UIColor redColor].CGColor);
    CGContextSetLineWidth(cxt, 5);
    
    // 一、繪製矩形
    CGContextAddRect(cxt, CGRectMake(20, 100, 320, 150));
    CGContextDrawPath(cxt, kCGPathStroke);
    
    // 保存上下文狀態（入棧）
    CGContextSaveGState(cxt);
    
    // 二、繪製內切橢圓、圓
    CGContextAddEllipseInRect(cxt, CGRectMake(20, 260, 320, 150));
    CGContextSetStrokeColorWithColor(cxt, [UIColor orangeColor].CGColor);
    CGContextSetLineWidth(cxt, 10);
    CGContextDrawPath(cxt, kCGPathStroke);
    
    // 恢復上下文狀態（出棧）
    CGContextRestoreGState(cxt);
    
    
    // 三、繪製圓弧
    CGContextMoveToPoint(cxt, 250, 500);
    CGContextAddArc(cxt, 200, 500, 50, 0, M_PI_2, NO);
    
    // 四、繪製貝塞爾曲線
    // cpx、cpy: 控制點的座標， x、y目標點的座標
    // CGContextAddQuadCurveToPoint(cxt, <#CGFloat cpx#>, <#CGFloat cpy#>, <#CGFloat x#>, <#CGFloat y#>)
    
    // CGContextAddCurveToPoint(<#CGContextRef  _Nullable c#>, <#CGFloat cp1x#>, <#CGFloat cp1y#>, <#CGFloat cp2x#>, <#CGFloat cp2y#>, <#CGFloat x#>, <#CGFloat y#>)
    
    CGContextDrawPath(cxt, kCGPathStroke);
    
}

###路徑:

1. 路徑定義了一個或多個形狀,或是子路徑。
2. ⼀個⼦路徑可由直線,曲線,或者同時由二者構成。
3. 它能夠是開放的,也能夠是閉合的。
4. ⼀個子路徑能夠是簡單的形狀,如線、圓、矩形、星形;
5. 也能夠是複雜的形狀,如⼭脈的輪廓或者是塗鴉。
6. 路徑能夠是開放的,也能夠是封閉的;對於封閉路徑能夠空⼼的也能夠是實心的 ###繪製文字

- (void)drawText {
    
    CGRect rect = CGRectMake(20, 30, 200, 20);
    [text drawInRect:rect withAttributes:@{NSForegroundColorAttributeName : [UIColor redColor],
                                           NSBackgroundColorAttributeName:[UIColor whiteColor],
                                           NSFontAttributeName : [UIFont systemFontOfSize:20]}];
}

###繪製圖形的基本屬性

- (void)drawLines {
    
    // 一、獲取當前繪圖上下文(繪圖環境)、能夠理解爲建立一塊畫布
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    
    // 二、移動到某個點
    CGContextMoveToPoint(cxt, 20, 100);
    
    // 三、添加一條直線到某個點
    CGContextAddLineToPoint(cxt, 300, 100);
    CGContextAddLineToPoint(cxt, 160, 300);
    
    // 閉合路徑
    CGContextClosePath(cxt);

    // 四、設置描邊和填充顏色
    CGContextSetStrokeColorWithColor(cxt, [UIColor redColor].CGColor);
    //CGContextSetRGBStrokeColor(cxt, 200/255.0, 300/255.0, 10/255.0, 1);
    // CGContextSetCMYKStrokeColor(cxt, 0.1, 0.3, 0.5, 0.8, 1);
    CGContextSetFillColorWithColor(cxt, [UIColor whiteColor].CGColor);

    // 五、設置線條寬度
    CGContextSetLineWidth(cxt, 5);
    
    // 六、設置線頭樣式
    CGContextSetLineCap(cxt, kCGLineCapRound);
    
    // 七、設置線條鏈接點的樣式
    CGContextSetLineJoin(cxt, kCGLineJoinRound);
    
    // 八、設置虛線
    // CGFloat lengths[] = {2,10,2};
    // CGContextSetLineDash(cxt, 0, lengths, 3);
    
    // 九、是否開啓抗鋸齒
    CGContextSetShouldAntialias(cxt, YES);
    
    
    // 十、繪製描邊
    // CGContextStrokePath(cxt);
    // 十一、繪製填充
    // CGContextFillPath(cxt);
    
    // 十二、繪製描邊、填充、描邊和填充、奇偶填充：kCGPathFill,kCGPathEOFill,kCGPathStroke,kCGPathFillStroke, kCGPathEOFillStroke
    CGContextDrawPath(cxt, kCGPathFillStroke);
    
}

###構建路徑的函數說明:

• CGContextBeginPath // 開始一個新路徑
• CGContextMoveToPoint // 設置路徑的起點
• CGContextClosePath // 關閉路徑
• CGContextAddPath // 添加路徑
• CGContextAddLineToPoint // 在指定點添加線
• CGContextAddLines // 添加多條線
• CGContextAddRect // 添加矩形
• CGContextAddRects // 添加多個矩形
• CGContextAddEllipseInRect // 在矩形中添加橢圓
• CGContextAddArc // 添加弧線
• CGContextAddArcToPoint // 在指定點添加弧線
• CGContextAddCurveToPoint // 在指定點添加曲線

###繪製路徑的函數說明:

• CGContextDrawPath// 繪製路徑
• CGContextFillPath // 實心路徑
• CGContextFillRect // 實心矩形
• CGContextFillRects // 多個實心矩形
• CGContextFillEllipseInRect // 在矩形區域中繪製實⼼橢圓
• CGContextStrokePath // 空⼼心路徑
• CGContextStrokeRect // 空⼼心矩形
• CGContextStrokeRectWithWidth // 使⽤用寬度繪製空⼼矩形
• CGContextStrokeEllipseInRect// 在矩形區域中繪製空⼼橢圓

###繪圖狀態參數說明:
CGContextSetLineWidth// 線條寬度 CGContextSetBlendMode // 設置混合模式 CGContextSetShouldAntialias // 設置抗鋸齒效果 CGContextSetLineCap // 設置線條收尾點樣式 CGContextSetLineJoin // 設置線條鏈接點樣式 CGContextSetLineDash// 設置虛線

##繪圖實戰 Demo下載
簡單的繪圖

Bezier繪圖Demo

繪圖練習