我們在搭建UI界面時，有很多時候，我們會用到iOS自帶的繪圖功能來完成一些界面的效果，很常用也很方便。今天我們在這里就一起討論一下iOS的繪圖功能。
CoreGraphics也稱為Quartz 2D 是UIKit下的主要繪圖系統，頻繁的用于繪制自定義視圖。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics數據結構和函數可以通過前綴CG來識別。
視圖可以通過子視圖、圖層或實現drawRect：方法來表現內容，如果說實現了drawRect：方法，那么最好就不要混用其他方法了，如圖層和子視圖。自定義繪圖大部分是由UIKit或者Core Graphics來實現的。
由于像素是依賴于目標的，所以2D繪圖并不能操作單獨的像素，我們可以從上下文（Context）讀取它。
繪圖就好比在畫布上拿著畫筆機械的進行畫畫，通過制定不同的參數來進行不同的繪制。
iOS常見的圖形繪制
- 畫線
- 畫圓、圓弧、貝塞爾曲線
- 畫矩形、橢圓形、多邊形
- 繪制圖片
- 繪制文字
iOS繪圖基礎
在繪圖之前，我們先來了解一下幾個基本的概念
context：上下文，ios繪圖的方法都需要傳一個上下文context，這個context在重寫uiview的drawRect的方法里調用UIGraphicsGetCurrentContext()獲取
path：路徑，ios繪圖可以想象為你拿著一支筆去畫圖，畫幾條線或幾個點從而形成一個路徑，之后可以利用理解去填色或者描邊
stroke,fill 描邊和填充，每個路徑都需要填充或者描邊后才能在視圖中看見，他們都各自有很多樣式可以設置，常見的有顏色、粗細、漸變，連接樣式等等。
畫圖可以使用默認路徑畫，或者單獨創建path畫圖，對應畫圖的api并不完全相同，是兩組名稱相似的api，兩組api常用的方法如下
CGContextMoveToPoint //設置起點
CGContextClosePath //連接起點和當前點
CGPathCreateMutable //類似于 CGContextBeginPath
CGPathMoveToPoint //類似于 CGContextMoveToPoint
CGPathAddLineToPoint //類似于 CGContextAddLineToPoint
CGPathAddCurveToPoint //類似于 CGContextAddCurveToPoint
CGPathAddEllipseInRect //類似于 CGContextAddEllipseInRect
CGPathAddArc //類似于 CGContextAddArc
CGPathAddRect //類似于 CGContextAddRect
CGPathCloseSubpath //類似于 CGContextClosePath
CGContextAddPath //函數把一個路徑添加到graphics
畫圖步驟
- 獲取context
- 設置Path
- 填充或描邊路徑
關于填充顏色 有三種方式
- 填充筆觸，就是只給路徑描邊
- 根據路徑填充顏色
- 填充筆觸和顏色
填充顏色也分為非零繞數規則和奇偶規則，這個概念比較復雜難以解釋，大家可以百度看看或者畫幾個圖試試就明白。
CGContextStrokePath(ctx); //描出路徑
CGContextFillPath(ctx) //使用非零繞數規則填充當前路徑
CGContextDrawPath //兩個參數決定填充規則，kCGPathFill表示用非零繞數規則，kCGPathEOFill表示用奇偶規則，kCGPathFillStroke表示填充，kCGPathEOFillStroke表示描線，不是填充
CGContextEOFillPath //使用奇偶規則填充當前路徑
CGContextFillRect //填充指定的矩形
CGContextFillRects //填充指定的一些矩形
CGContextFillEllipseInRect //填充指定矩形中的橢圓
常見的圖形繪制
準備工作
- 新建一個文件，繼承UIView
- 重寫
-(void)drawRect:(CGRect)rect方法
-(void)drawRect:(CGRect)rect{
[super drawRect:rect];
//獲取ctx
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設置畫圖相關樣式參數
//設置筆觸顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);//設置顏色有很多方法，我覺得這個方法最好用
//設置筆觸寬度
CGContextSetLineWidth(ctx, 2);
//設置填充色
CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
//設置拐點樣式
// enum CGLineJoin {
// kCGLineJoinMiter, //尖的，斜接
// kCGLineJoinRound, //圓
// kCGLineJoinBevel //斜面
// };
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//Line cap 線的兩端的樣式
// enum CGLineCap {
// kCGLineCapButt,
// kCGLineCapRound,
// kCGLineCapSquare
// };
CGContextSetLineCap(ctx, kCGLineCapRound);
//虛線線條樣式
//CGFloat lengths[] = {10,10};
//畫線
[self drawLine:ctx];
//畫圓、圓弧
[self drawCircle:ctx];
//畫矩形,畫橢圓，多邊形
[self drawShape:ctx];
//畫圖片
[self drawPicture:ctx];
//畫文字
[self drawText:ctx];
}
畫線
第一個方法我寫的比較詳細，寫了使用path的方式和直接畫線的方式。推薦使用path的方式畫線。 另外，第一個方法也寫了移動筆觸畫線和用點集合畫線。后面方法只會涉及其中一種，因為方法都比較類似。
//畫線
-(void)drawLine:(CGContextRef)ctx{
//畫一條簡單的線
CGPoint points1[] = {CGPointMake(10, 30),CGPointMake(300, 30)};
CGContextAddLines(ctx,points1, 2);
//畫線方法1，使用CGContextAddLineToPoint畫線，需要先設置一個起始點
//設置起始點
CGContextMoveToPoint(ctx, 50, 50);
//添加一個點
CGContextAddLineToPoint(ctx, 100,50);
//在添加一個點，變成折線
CGContextAddLineToPoint(ctx, 150, 100);
//畫線方法2
//構造線路徑的點數組
CGPoint points2[] = {CGPointMake(60, 60),CGPointMake(80, 120),CGPointMake(20, 300)};
CGContextAddLines(ctx,points2, 3);
//利用路徑去畫一組點（推薦使用路徑的方式，雖然多了幾行代碼，但是邏輯更清晰了）
//第一個路徑
CGMutablePathRef path1 = CGPathCreateMutable();
CGPathMoveToPoint(path1, &CGAffineTransformIdentity, 0, 200);
//CGAffineTransformIdentity 類似于初始化一些參數
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 100, 250);
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 310, 210);
//路徑1加入context
CGContextAddPath(ctx, path1);
//path同樣有方法CGPathAddLines(),和CGContextAddLines()差不多用戶，可以自己試下
//描出筆觸
CGContextStrokePath(ctx);
}
畫矩形、橢圓形、多邊形
//畫矩形,畫橢圓，多邊形
-(void)drawSharp:(CGContextRef)ctx{
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
//畫橢圓，如果長寬相等就是圓
CGContextAddEllipseInRect(ctx, CGRectMake(0, 250, 50, 50));
//畫矩形,長寬相等就是正方形
CGContextAddRect(ctx, CGRectMake(70, 250, 50, 50));
//畫多邊形，多邊形是通過path完成的
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, &CGAffineTransformIdentity, 120, 250);
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 200, 250);
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, 180, 300);
CGPathCloseSubpath(path);
CGContextAddPath(ctx, path);
//填充
CGContextFillPath(ctx);
}
畫圖
//畫圖片
-(void)drawPicture:(CGContextRef)context{
/*圖片*/
UIImage *image = [UIImage imageNamed:@"head.jpeg"];
[image drawInRect:CGRectMake(10, 300, 100, 100)];//在坐標中畫出圖片
}
畫文字
//畫文字
-(void)drawText:(CGContextRef)ctx{
//文字樣式
UIFont *font = [UIFont systemFontOfSize:18];
NSDictionary *dict = @{NSFontAttributeName:font,
NSForegroundColorAttributeName:[UIColor whiteColor]};
[@"hello world" drawInRect:CGRectMake(120 , 350, 500, 50) withAttributes:dict];
}
畫圓、圓弧、貝塞爾曲線
** 畫圓和圓弧是一回事，只是起點和重點位置不同，畫圓畫弧線主要依賴于這幾個方法 CGContextAddArc, CGContextAddArcToPoint, CGContextAddCurveToPoint, CGContextAddQuadCurveToPoint 后面兩個方法是貝塞爾二次曲線和三次曲線 **
//畫圓、圓弧
-(void)drawCircle:(CGContextRef)ctx{
CGContextSetStrokeColorWithColor(ctx, [UIColor purpleColor].CGColor);
/* 繪制路徑 方法一
void CGContextAddArc (
CGContextRef c,
CGFloat x, //圓心的x坐標
CGFloat y, //圓心的x坐標
CGFloat radius, //圓的半徑
CGFloat startAngle, //開始弧度
CGFloat endAngle, //結束弧度
int clockwise //0表示順時針，1表示逆時針
);
*/
//圓
CGContextAddArc (ctx, 100, 100, 50, 0, M_PI* 2 , 0);
CGContextStrokePath(ctx);
//半圓
CGContextAddArc (ctx, 100, 200, 50, 0, M_PI*2, 0);
CGContextStrokePath(ctx);
//繪制路徑 方法二，這方法適合繪制弧度 ，端點p1和p2是弧線的控制點，類似photeshop中鋼筆工具控制曲線，還不明白請去了解貝塞爾曲線
// void CGContextAddArcToPoint(
// CGContextRef c,
// CGFloat x1, //端點1的x坐標
// CGFloat y1, //端點1的y坐標
// CGFloat x2, //端點2的x坐標
// CGFloat y2, //端點2的y坐標
// CGFloat radius //半徑
// )；
//1/4弧度 * 4
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddArcToPoint(ctx, 200, 100,300, 100, 100);
CGContextAddArcToPoint(ctx, 400, 100,400, 200, 100);
CGContextAddArcToPoint(ctx, 400, 300,300, 300, 100);
CGContextAddArcToPoint(ctx, 200, 300,200, 200, 100);
CGContextStrokePath(ctx);
//貝塞爾曲線
CGContextSetStrokeColorWithColor(ctx, [UIColor orangeColor].CGColor);
//三次曲線函數
//void CGContextAddCurveToPoint (
// CGContextRef c,
// CGFloat cp1x, //控制點1 x坐標
// CGFloat cp1y, //控制點1 y坐標
// CGFloat cp2x, //控制點2 x坐標
// CGFloat cp2y, //控制點2 y坐標
// CGFloat x, //直線的終點 x坐標
// CGFloat y //直線的終點 y坐標
// );
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 0, 300, 200, 400, 100);
CGContextStrokePath(ctx);
//三次曲線可以畫圓弧，比如這里畫一條之前用CGContextAddArcToPoint構成的圓弧
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 100, 300, 100, 300 ,100);
CGContextStrokePath(ctx);
//二次曲線函數
//void CGContextAddQuadCurveToPoint (
// CGContextRef c,
// CGFloat cpx, //控制點 x坐標
// CGFloat cpy, //控制點 y坐標
// CGFloat x, //直線的終點 x坐標
// CGFloat y //直線的終點 y坐標
// );
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddQuadCurveToPoint(ctx, 200, 0, 300, 150);
CGContextStrokePath(ctx);
}
因為代碼可以直接拷貝下去用，也就不上傳到Github上的demo里了。
