本章的內(nèi)容有兩個(gè)：

• 通過代碼詳細(xì)解讀上篇文章iOS繪圖(一)里面的概念。
• 繪圖的步驟

概念詳解

1. 首先在storyboard中拖一個(gè)視圖，設(shè)置藍(lán)色的背景顏色，寬高為300、300，創(chuàng)建一個(gè)類關(guān)聯(lián)storyboard中的視圖。

   顯示結(jié)果如下：

   
   
   Simulator Screen Shot - iPhone 8 Plus - 2018-06-09 at 19.31.57.png

2. 添加繪圖代碼：

// 重寫系統(tǒng)的drawRect方法，這個(gè)系統(tǒng)方法在后面會(huì)詳細(xì)講解
// 這里只需知道，view顯示時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)這個(gè)方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 獲取layer類型的上下文(草稿紙)，上下文是CGContextRef類型的
    // UIGraphicsGetCurrentContext這個(gè)函數(shù)，獲取到的上下文是layer類型的上下文，決定了輸出目標(biāo)只能是UIView中的layer， 不能是其它類型的上下文。
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 初學(xué)者先不要管這兩個(gè)函數(shù)什么意思，后面會(huì)詳細(xì)講解，這里只需要知道功能是
    // 繪制一條直線到上下文(草稿紙)中---這個(gè)直線就是繪圖路徑
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);

    // 設(shè)置繪圖狀態(tài)：顏色為紅色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 設(shè)置繪圖狀態(tài)：線寬為5
    CGContextSetLineWidth(context, 5);
    
    // 把上下文(草稿紙)里面的繪圖路徑渲染到view上面---輸出目標(biāo)是view
    CGContextStrokePath(context);

}

顯示結(jié)果如下：

Simulator Screen Shot - iPhone 8 Plus - 2018-06-09 at 20.04.45.png

繪圖步驟

繪圖萬(wàn)變不離其宗的一點(diǎn)就是它的步驟
1. 獲取上下文
2. 畫繪圖路徑
3. 把繪圖路徑渲染到輸出目標(biāo)

代碼講解如下：

// 重寫系統(tǒng)的drawRect方法，這個(gè)系統(tǒng)方法在后面會(huì)詳細(xì)講解
// 這里只需知道，view顯示時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)這個(gè)方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 1. 獲取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();

    // 2. 畫繪圖路徑
    CGContextMoveToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 200, 100);
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 5);
    
    // 3. 把繪圖路徑渲染到輸出目標(biāo)
    CGContextStrokePath(context);

}

其中的第二步可以分為兩種情況：

• 直接在上下文(草稿紙)上畫繪圖路徑，再渲染到輸出目標(biāo)
• 先把繪圖路徑畫好，再把繪圖路徑添加到上下文(草稿紙)中，再把上下文中的繪圖路徑渲染到輸出目標(biāo)

上面的代碼就屬于直接在上下文上畫繪圖路徑。
下面的代碼屬于把繪圖路徑畫好，再添加到上下文(草稿紙)中，再渲染到輸出目標(biāo)：

// 重寫系統(tǒng)的drawRect方法，這個(gè)系統(tǒng)方法在后面會(huì)詳細(xì)講解
// 這里只需知道，view顯示時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)這個(gè)方法
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 1. 獲取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // 2. 畫繪圖路徑
    // 創(chuàng)建繪圖路徑
    CGMutablePathRef path = CGPathCreateMutable();
    // 畫一條直線到繪圖路徑
    CGPathMoveToPoint(path, NULL, 100, 100);
    CGPathAddLineToPoint(path, NULL, 200, 100);
    
    // 把繪圖路徑添加到上下文中
    CGContextAddPath(context, path);
    
    // 設(shè)置繪圖狀態(tài)：顏色為紅色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 設(shè)置繪圖狀態(tài)：線寬為5
    CGContextSetLineWidth(context, 5);
    
    // 3. 把繪圖路徑渲染到輸出目標(biāo)
    CGContextStrokePath(context);

}

運(yùn)行效果跟上面的一模一樣， 但是繪圖步驟不同。

這篇文章就寫到這里。