本章的內(nèi)容有兩個(gè)：
- 通過代碼詳細(xì)解讀上篇文章iOS繪圖(一)里面的概念贡未。
- 繪圖的步驟
概念詳解
-
首先在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 添加繪圖代碼：
// 重寫系統(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
繪圖步驟
繪圖萬變不離其宗的一點(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)行效果跟上面的一模一樣瓷患， 但是繪圖步驟不同。
這篇文章就寫到這里遣妥。
