用CGContextRef畫各類圖形(文字、圓、直線、弧線、矩形、扇形、橢圓、三角形、圓角矩形

首先了解一下CGContextRef:

An opaque type that represents a Quartz 2D drawing environment.

Graphics Context是圖形上下文,能夠將其理解爲一塊畫布,咱們能夠在上面進行繪畫操做,繪製完成後,將畫布放到咱們的view中顯示便可,view看做是一個畫框.

本身學習時實現的demo，但願對你們有幫助，具體的實現看代碼，並有完美的註釋解釋，還有一些對我幫助的博文供你們參考。都在代碼裏面。

看一下demo效果圖先：

自定義CustomView類,CustomView.h:

[cpp] view plaincopy

1. #import <UIKit/UIKit.h>  

2. #import <QuartzCore/QuartzCore.h>  

3. #define PI 3.14159265358979323846  

4. @interface CustomView : UIView  

5.   

6.   

7. @end  

實現類CustomView.m：

[cpp] view plaincopy

1. #import "CustomView.h"  

2.   

3. @implementation CustomView  

4.   

5. - (id)initWithFrame:(CGRect)frame  

6. {  

7.     self = [super initWithFrame:frame];  

8.     if (self) {  

9.     }  

10.     return self;  

11. }  

12.   

13.   

14. // 覆蓋drawRect方法，你能夠在此自定義繪畫和動畫  

15. - (void)drawRect:(CGRect)rect  

16. {  

17.     //An opaque type that represents a Quartz 2D drawing environment.  

18.     //一個不透明類型的Quartz 2D繪畫環境,至關於一個畫布,你能夠在上面任意繪畫  

19.   

20.     CGContextRef context = UIGraphicsGetCurrentContext();

21.     /*寫文字*/

22.     UIColor *color = [UIColor redColor];

23.     UIFont  *font = [UIFont boldSystemFontOfSize:15.0];

24.     NSDictionary *atDic = @{NSFontAttributeName:font,NSForegroundColorAttributeName:color};

25.     //設置

26.     [@"畫圓：" drawInRect:CGRectMake(10, 20, 80, 20) withAttributes: atDic];

27.     [@"畫線及孤線：" drawInRect:CGRectMake(10, 80, 100, 20) withAttributes: atDic];

28.     [@"畫矩形：" drawInRect:CGRectMake(10, 120, 80, 20) withAttributes: atDic];

29.     [@"畫扇形和橢圓：" drawInRect:CGRectMake(10, 160, 110, 20) withAttributes: atDic];

30.     [@"畫三角形：" drawInRect:CGRectMake(10, 220, 80, 20) withAttributes: atDic];

31.     [@"畫圓角矩形：" drawInRect:CGRectMake(10, 260, 100, 20) withAttributes: atDic];

32.     [@"畫貝塞爾曲線：" drawInRect:CGRectMake(10, 300, 100, 20) withAttributes: atDic];

33.     [@"圖片：" drawInRect:CGRectMake(10, 340, 80, 20) withAttributes: atDic];

34.     /*畫圓*/  

35.     //邊框圓  

36.     CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顏色  

37.     CGContextSetLineWidth(context, 1.0);//線的寬度  

38.     //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1弧度＝180°/π （≈57.3°） 度＝弧度×180°/π 360°＝360×π/180 ＝2π 弧度   

39.     // x,y爲圓點座標，radius半徑，startAngle爲開始的弧度，endAngle爲 結束的弧度，clockwise 0爲順時針，1爲逆時針。  

40.     CGContextAddArc(context, 100, 20, 15, 0, 2*PI, 0); //添加一個圓  

41.     CGContextDrawPath(context, kCGPathStroke); //繪製路徑  

42.       

43.     //填充圓，無邊框  

44.     CGContextAddArc(context, 150, 30, 30, 0, 2*PI, 0); //添加一個圓  

45.     CGContextDrawPath(context, kCGPathFill);//繪製填充  

46.       

47.     //畫大圓並填充顏  

48.     UIColor*aColor = [UIColor colorWithRed:1 green:0.0 blue:0 alpha:1];  

49.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

50.     CGContextSetLineWidth(context, 3.0);//線的寬度  

51.     CGContextAddArc(context, 250, 40, 40, 0, 2*PI, 0); //添加一個圓  

52.     //kCGPathFill填充非零繞數規則,kCGPathEOFill表示用奇偶規則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線，不是填充  

53.     CGContextDrawPath(context, kCGPathFillStroke); //繪製路徑加填充  

54.       

55.     /*畫線及孤線*/  

56.     //畫線  

57.     CGPoint aPoints[2];//座標點  

58.     aPoints[0] =CGPointMake(100, 80);//座標1  

59.     aPoints[1] =CGPointMake(130, 80);//座標2  

60.     //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)  

61.     //points[]座標數組，和count大小  

62.     CGContextAddLines(context, aPoints, 2);//添加線  

63.     CGContextDrawPath(context, kCGPathStroke); //根據座標繪製路徑  

64.       

65.     //畫笑臉弧線  

66.     //左  

67.     CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);//改變畫筆顏色  

68.     CGContextMoveToPoint(context, 140, 80);//開始座標p1  

69.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

70.     //x1,y1跟p1造成一條線的座標p2，x2,y2結束座標跟p3造成一條線的p3,radius半徑,注意, 須要算好半徑的長度,  

71.     CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);  

72.     CGContextStrokePath(context);//繪畫路徑  

73.       

74.     //右  

75.     CGContextMoveToPoint(context, 160, 80);//開始座標p1  

76.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

77.     //x1,y1跟p1造成一條線的座標p2，x2,y2結束座標跟p3造成一條線的p3,radius半徑,注意, 須要算好半徑的長度,  

78.     CGContextAddArcToPoint(context, 168, 68, 176, 80, 10);  

79.     CGContextStrokePath(context);//繪畫路徑  

80.       

81.     //右  

82.     CGContextMoveToPoint(context, 150, 90);//開始座標p1  

83.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  

84.     //x1,y1跟p1造成一條線的座標p2，x2,y2結束座標跟p3造成一條線的p3,radius半徑,注意, 須要算好半徑的長度,  

85.     CGContextAddArcToPoint(context, 158, 102, 166, 90, 10);  

86.     CGContextStrokePath(context);//繪畫路徑  

87.     //注，若是仍是沒弄明白怎麼回事，請參考：http://donbe.blog.163.com/blog/static/138048021201052093633776/  

88.       

89.     /*畫矩形*/  

90.     CGContextStrokeRect(context,CGRectMake(100, 120, 10, 10));//畫方框  

91.     CGContextFillRect(context,CGRectMake(120, 120, 10, 10));//填充框  

92.     //矩形，並填棄顏色  

93.     CGContextSetLineWidth(context, 2.0);//線的寬度  

94.     aColor = [UIColor blueColor];//blue藍色  

95.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

96.     aColor = [UIColor yellowColor];  

97.     CGContextSetStrokeColorWithColor(context, aColor.CGColor);//線框顏色  

98.     CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//畫方框  

99.     CGContextDrawPath(context, kCGPathFillStroke);//繪畫路徑  

100.       

101.     //矩形，並填棄漸變顏色  

102.     //關於顏色參考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html  

103.     //http://blog.csdn.net/reylen/article/details/8622932  

104.     //第一種填充方式，第一種方式必須導入類庫quartcore並#import <QuartzCore/QuartzCore.h>，這個就不屬於在context上畫，而是將層插入到view層上面。那麼這裏就設計到Quartz Core 圖層編程了。  

105.     CAGradientLayer *gradient1 = [CAGradientLayer layer];  

106.     gradient1.frame = CGRectMake(240, 120, 60, 30);  

107.     gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,  

108.                         (id)[UIColor grayColor].CGColor,  

109.                         (id)[UIColor blackColor].CGColor,  

110.                         (id)[UIColor yellowColor].CGColor,  

111.                         (id)[UIColor blueColor].CGColor,  

112.                         (id)[UIColor redColor].CGColor,  

113.                         (id)[UIColor greenColor].CGColor,  

114.                         (id)[UIColor orangeColor].CGColor,  

115.                         (id)[UIColor brownColor].CGColor,nil];  

116.     [self.layer insertSublayer:gradient1 atIndex:0];  

117.     //第二種填充方式   

118.     CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  

119.     CGFloat colors[] =  

120.     {  

121.         1,1,1, 1.00,  

122.         1,1,0, 1.00,  

123.         1,0,0, 1.00,  

124.         1,0,1, 1.00,  

125.         0,1,1, 1.00,  

126.         0,1,0, 1.00,  

127.         0,0,1, 1.00,  

128.         0,0,0, 1.00,  

129.     };  

130.     CGGradientRef gradient = CGGradientCreateWithColorComponents  

131.     (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//造成梯形，漸變的效果   

132.     CGColorSpaceRelease(rgb);  

133.     //畫線造成一個矩形  

134.     //CGContextSaveGState與CGContextRestoreGState的做用  

135.     /* 

136.      CGContextSaveGState函數的做用是將當前圖形狀態推入堆棧。以後，您對圖形狀態所作的修改會影響隨後的描畫操做，但不影響存儲在堆棧中的拷貝。在修改完成後，您能夠經過CGContextRestoreGState函數把堆棧頂部的狀態彈出，返回到以前的圖形狀態。這種推入和彈出的方式是回到以前圖形狀態的快速方法，避免逐個撤消全部的狀態修改；這也是將某些狀態（好比裁剪路徑）恢復到原有設置的惟一方式。 

137.      */  

138.     CGContextSaveGState(context);  

139.     CGContextMoveToPoint(context, 220, 90);  

140.     CGContextAddLineToPoint(context, 240, 90);  

141.     CGContextAddLineToPoint(context, 240, 110);  

142.     CGContextAddLineToPoint(context, 220, 110);  

143.     CGContextClip(context);//context裁剪路徑,後續操做的路徑  

144.     //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)  

145.     //gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結束座標,options開始座標以前or開始以後開始漸變  

146.     CGContextDrawLinearGradient(context, gradient,CGPointMake  

147.                                 (220,90) ,CGPointMake(240,110),  

148.                                 kCGGradientDrawsAfterEndLocation);  

149.     CGContextRestoreGState(context);// 恢復到以前的context  

150.       

151.     //再寫一個看看效果  

152.     CGContextSaveGState(context);  

153.     CGContextMoveToPoint(context, 260, 90);  

154.     CGContextAddLineToPoint(context, 280, 90);  

155.     CGContextAddLineToPoint(context, 280, 100);  

156.     CGContextAddLineToPoint(context, 260, 100);  

157.     CGContextClip(context);//裁剪路徑  

158.     //說白了，開始座標和結束座標是控制漸變的方向和形狀  

159.     CGContextDrawLinearGradient(context, gradient,CGPointMake  

160.                                 (260, 90) ,CGPointMake(260, 100),  

161.                                 kCGGradientDrawsAfterEndLocation);  

162.     CGContextRestoreGState(context);// 恢復到以前的context  

163.       

164.     //下面再看一個顏色漸變的圓  

165.     CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 100), 0.0, CGPointMake(300, 100), 10, kCGGradientDrawsBeforeStartLocation);  

166.       

167.     /*畫扇形和橢圓*/  

168.     //畫扇形，也就畫圓，只不過是設置角度的大小，造成一個扇形  

169.     aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];  

170.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顏色  

171.     //以10爲半徑圍繞圓心畫指定角度扇形  

172.     CGContextMoveToPoint(context, 160, 180);  

173.     CGContextAddArc(context, 160, 180, 30,  -60 * PI / 180, -120 * PI / 180, 1);  

174.     CGContextClosePath(context);  

175.     CGContextDrawPath(context, kCGPathFillStroke); //繪製路徑  

176.   

177.     //畫橢圓  

178.     CGContextAddEllipseInRect(context, CGRectMake(160, 180, 20, 8)); //橢圓  

179.     CGContextDrawPath(context, kCGPathFillStroke);  

180.       

181.     /*畫三角形*/  

182.     //只要三個點就行跟畫一條線方式同樣，把三點鏈接起來  

183.     CGPoint sPoints[3];//座標點  

184.     sPoints[0] =CGPointMake(100, 220);//座標1  

185.     sPoints[1] =CGPointMake(130, 220);//座標2  

186.     sPoints[2] =CGPointMake(130, 160);//座標3  

187.     CGContextAddLines(context, sPoints, 3);//添加線  

188.     CGContextClosePath(context);//封起來  

189.     CGContextDrawPath(context, kCGPathFillStroke); //根據座標繪製路徑  

190.       

191.     /*畫圓角矩形*/  

192.     float fw = 180;  

193.     float fh = 280;  

194.       

195.     CGContextMoveToPoint(context, fw, fh-20);  // 開始座標右邊開始  

196.     CGContextAddArcToPoint(context, fw, fh, fw-20, fh, 10);  // 右下角角度  

197.     CGContextAddArcToPoint(context, 120, fh, 120, fh-20, 10); // 左下角角度  

198.     CGContextAddArcToPoint(context, 120, 250, fw-20, 250, 10); // 左上角  

199.     CGContextAddArcToPoint(context, fw, 250, fw, fh-20, 10); // 右上角  

200.     CGContextClosePath(context);  

201.     CGContextDrawPath(context, kCGPathFillStroke); //根據座標繪製路徑  

202.       

203.     /*畫貝塞爾曲線*/  

204.     //二次曲線  

205.     CGContextMoveToPoint(context, 120, 300);//設置Path的起點  

206.     CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//設置貝塞爾曲線的控制點座標和終點座標  

207.     CGContextStrokePath(context);  

208.     //三次曲線函數  

209.     CGContextMoveToPoint(context, 200, 300);//設置Path的起點  

210.     CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//設置貝塞爾曲線的控制點座標和控制點座標終點座標  

211.     CGContextStrokePath(context);  

212.       

213.       

214.     /*圖片*/  

215.     UIImage *image = [UIImage imageNamed:@"apple.jpg"];  

216.     [image drawInRect:CGRectMake(60, 340, 20, 20)];//在座標中畫出圖片  

217. //    [image drawAtPoint:CGPointMake(100, 340)];//保持圖片大小在point點開始畫圖片，能夠把註釋去掉看看  

218.     CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), image.CGImage);//使用這個使圖片上下顛倒了，參考http://blog.csdn.net/koupoo/article/details/8670024  

219.       

220. //    CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), image.CGImage);//平鋪圖  

221.   

222. }  

223.   

224.   

225. @end  

用法：

[cpp] view plaincopy

1. CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 320, self.view.frame.size.height)];  

2.     [self.view addSubview:customView];