屏幕快照 2017-03-07 下午3.58.21.png
本文demo下載
ios常見的圖形繪制
- 畫線
- 畫圓、圓弧
- 畫矩形,畫橢圓，多邊形
- 畫圖片
- 畫文字
1:ios繪圖基礎(chǔ)
幾個(gè)基本的概念
context：上下文，ios繪圖的方法都需要傳一個(gè)上下文context，這個(gè)context在重寫uiview的drawRect的方法里調(diào)用UIGraphicsGetCurrentContext()獲取
path：路徑，ios繪圖可以想象為你拿著一支筆去畫圖，畫幾條線或幾個(gè)點(diǎn)從而形成一個(gè)路徑，之后可以利用理解去填色或者描邊
stroke,fill 描邊和填充，每個(gè)路徑都需要填充或者描邊后才能在視圖中看見，他們都各自有很多樣式可以設(shè)置，常見的有顏色、粗細(xì)、漸變，連接樣式等等。
畫圖可以使用默認(rèn)路徑畫，或者單獨(dú)創(chuàng)建path畫圖，對應(yīng)畫圖的api并不完全相同，是兩組名稱相似的api，兩組pi常用的方法如下
CGContextMoveToPoint設(shè)置起點(diǎn)
CGContextClosePath 連接起點(diǎn)和當(dāng)前點(diǎn)
CGPathCreateMutable 類似于 CGContextBeginPath
CGPathMoveToPoint 類似于 CGContextMoveToPoint
CGPathAddLineToPoint 類似于 CGContextAddLineToPoint
CGPathAddCurveToPoint 類似于 CGContextAddCurveToPoint
CGPathAddEllipseInRect 類似于 CGContextAddEllipseInRect
CGPathAddArc 類似于 CGContextAddArc
CGPathAddRect 類似于 CGContextAddRect
CGPathCloseSubpath 類似于 CGContextClosePath
CGContextAddPath函數(shù)把一個(gè)路徑添加到graphics
畫圖步驟 1：獲取context，2：設(shè)置路徑 3：填充或描邊路徑
關(guān)于填充顏色 填充顏色有3種模式，分別是1：填充筆觸，就是只給路徑描邊，2：根據(jù)路徑填充顏色 3：填充筆觸和顏色。填充顏色也分為非零繞數(shù)規(guī)則和奇偶規(guī)則，這個(gè)概念比較復(fù)雜難以解釋，大家可以百度看看或者花幾個(gè)圖試試就明白。
CGContextStrokePath(ctx); //描出路徑
CGContextFillPath(ctx) 使用非零繞數(shù)規(guī)則填充當(dāng)前路徑
CGContextDrawPath 兩個(gè)參數(shù)決定填充規(guī)則，kCGPathFill表示用非零繞數(shù)規(guī)則，kCGPathEOFill表示用奇偶規(guī)則，kCGPathFillStroke表示填充，kCGPathEOFillStroke表示描線，不是填充
CGContextEOFillPath 使用奇偶規(guī)則填充當(dāng)前路徑
CGContextFillRect 填充指定的矩形
CGContextFillRects 填充指定的一些矩形
CGContextFillEllipseInRect 填充指定矩形中的橢圓
2:ios常見的圖形繪制
(1）新建一個(gè)文件，繼承UIView
（2）重寫-(void)drawRect:(CGRect)rect； 方法
-(void)drawRect:(CGRect)rect{
[super drawRect:rect];
//獲取ctx
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設(shè)置畫圖相關(guān)樣式參數(shù)
//設(shè)置筆觸顏色
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);//設(shè)置顏色有很多方法，我覺得這個(gè)方法最好用
//設(shè)置筆觸寬度
CGContextSetLineWidth(ctx, 2);
//設(shè)置填充色
CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
//設(shè)置拐點(diǎn)樣式
// 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];
}
2.1:畫線
第一個(gè)方法我寫的比較詳細(xì)，寫了使用path的方式和直接畫線的方式。推薦使用path的方式畫線。 另外，第一個(gè)方法也寫了移動(dòng)筆觸畫線和用點(diǎn)集合畫線。后面方法只會涉及其中一種，因?yàn)榉椒ǘ急容^類似。
//畫線
-(void)drawLine:(CGContextRef)ctx{
//畫一條簡單的線
CGPoint points1[] = {CGPointMake(10, 30),CGPointMake(300, 30)};
CGContextAddLines(ctx,points1, 2);
//畫線方法1，使用CGContextAddLineToPoint畫線，需要先設(shè)置一個(gè)起始點(diǎn)
//設(shè)置起始點(diǎn)
CGContextMoveToPoint(ctx, 50, 50);
//添加一個(gè)點(diǎn)
CGContextAddLineToPoint(ctx, 100,50);
//在添加一個(gè)點(diǎn)，變成折線
CGContextAddLineToPoint(ctx, 150, 100);
//畫線方法2
//構(gòu)造線路徑的點(diǎn)數(shù)組
CGPoint points2[] = {CGPointMake(60, 60),CGPointMake(80, 120),CGPointMake(20, 300)};
CGContextAddLines(ctx,points2, 3);
//利用路徑去畫一組點(diǎn)（推薦使用路徑的方式，雖然多了幾行代碼，但是邏輯更清晰了）
//第一個(gè)路徑
CGMutablePathRef path1 = CGPathCreateMutable();
CGPathMoveToPoint(path1, &CGAffineTransformIdentity, 0, 200);
//CGAffineTransformIdentity 類似于初始化一些參數(shù)
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 100, 250);
CGPathAddLineToPoint(path1, &CGAffineTransformIdentity, 310, 210);
//路徑1加入context
CGContextAddPath(ctx, path1);
//path同樣有方法CGPathAddLines(),和CGContextAddLines()差不多用戶，可以自己試下
//描出筆觸
CGContextStrokePath(ctx);
}
2.2:畫矩形,畫橢圓，多邊形
//畫矩形,畫橢圓，多邊形
-(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);
}
2.3:畫圖
//畫圖片
-(void)drawPicture:(CGContextRef)context{
/*圖片*/
UIImage *image = [UIImage imageNamed:@"head.jpeg"];
[image drawInRect:CGRectMake(10, 300, 100, 100)];//在坐標(biāo)中畫出圖片
}
2.4:畫文字
//畫文字
-(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];
}
2.5:畫圓、圓弧、貝塞爾曲線
畫圓和圓弧是一回事，只是起點(diǎn)和終點(diǎn)位置不同，畫圓畫弧線主要依賴于這幾個(gè)方法 CGContextAddArc,CGContextAddArcToPoint, CGContextAddCurveToPoint,CGContextAddQuadCurveToPoint 后面兩個(gè)方法是貝塞爾二次曲線和三次曲線
//畫圓、圓弧
-(void)drawCircle:(CGContextRef)ctx{
CGContextSetStrokeColorWithColor(ctx, [UIColor purpleColor].CGColor);
/* 繪制路徑 方法一
void CGContextAddArc (
CGContextRef c,
CGFloat x, //圓心的x坐標(biāo)
CGFloat y, //圓心的x坐標(biāo)
CGFloat radius, //圓的半徑
CGFloat startAngle, //開始弧度
CGFloat endAngle, //結(jié)束弧度
int clockwise //0表示順時(shí)針，1表示逆時(shí)針
);
*/
//圓
CGContextAddArc (ctx, 100, 100, 50, 0, M_PI* 2 , 0);
CGContextStrokePath(ctx);
//半圓
CGContextAddArc (ctx, 100, 200, 50, 0, M_PI*2, 0);
CGContextStrokePath(ctx);
//繪制路徑 方法二，這方法適合繪制弧度 ，端點(diǎn)p1和p2是弧線的控制點(diǎn)，類似photeshop中鋼筆工具控制曲線，還不明白請去了解貝塞爾曲線
// void CGContextAddArcToPoint(
// CGContextRef c,
// CGFloat x1, //端點(diǎn)1的x坐標(biāo)
// CGFloat y1, //端點(diǎn)1的y坐標(biāo)
// CGFloat x2, //端點(diǎn)2的x坐標(biāo)
// CGFloat y2, //端點(diǎn)2的y坐標(biāo)
// 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);
//三次曲線函數(shù)
//void CGContextAddCurveToPoint (
// CGContextRef c,
// CGFloat cp1x, //控制點(diǎn)1 x坐標(biāo)
// CGFloat cp1y, //控制點(diǎn)1 y坐標(biāo)
// CGFloat cp2x, //控制點(diǎn)2 x坐標(biāo)
// CGFloat cp2y, //控制點(diǎn)2 y坐標(biāo)
// CGFloat x, //直線的終點(diǎn) x坐標(biāo)
// CGFloat y //直線的終點(diǎn) y坐標(biāo)
// );
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 0, 300, 200, 400, 100);
CGContextStrokePath(ctx);
//三次曲線可以畫圓弧，比如這里畫一條之前用CGContextAddArcToPoint構(gòu)成的圓弧
CGContextMoveToPoint(ctx, 200, 200);
CGContextAddCurveToPoint(ctx, 200, 100, 300, 100, 300 ,100);
CGContextStrokePath(ctx);
//二次曲線函數(shù)
//void CGContextAddQuadCurveToPoint (
// CGContextRef c,
// CGFloat cpx, //控制點(diǎn) x坐標(biāo)
// CGFloat cpy, //控制點(diǎn) y坐標(biāo)
// CGFloat x, //直線的終點(diǎn) x坐標(biāo)
// CGFloat y //直線的終點(diǎn) y坐標(biāo)
// );
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddQuadCurveToPoint(ctx, 200, 0, 300, 150);
CGContextStrokePath(ctx);
}
