IOS用CGContextRef畫各種圖形

1. // 覆寫drawRect方法，你可以在此自定義繪畫和動畫  
2. - (void)drawRect:(CGRect)rect  
3. {  
4.     //An opaque type that represents a Quartz 2D drawing environment.  
5.     //一個不透明類型的Quartz 2D繪畫環境,相當于一個畫布,你可以在上面任意繪畫  
6.     CGContextRef context = UIGraphicsGetCurrentContext();  
7.     /*寫文字*/  
8.     CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);//設定填充顔色  
9.     UIFont  *font = [UIFont boldSystemFontOfSize:15.0];//設定  
10.     [@"畫圓：" drawInRect:CGRectMake(10, 20, 80, 20) withFont:font];  
11.     [@"畫線及孤線：" drawInRect:CGRectMake(10, 80, 100, 20) withFont:font];  
12.     [@"畫矩形：" drawInRect:CGRectMake(10, 120, 80, 20) withFont:font];  
13.     [@"畫扇形和橢圓：" drawInRect:CGRectMake(10, 160, 110, 20) withFont:font];  
14.     [@"畫三角形：" drawInRect:CGRectMake(10, 220, 80, 20) withFont:font];  
15.     [@"畫圓角矩形：" drawInRect:CGRectMake(10, 260, 100, 20) withFont:font];  
16.     [@"畫貝塞爾曲線：" drawInRect:CGRectMake(10, 300, 100, 20) withFont:font];  
17.     [@"圖檔：" drawInRect:CGRectMake(10, 340, 80, 20) withFont:font];  
18.     /*畫圓*/  
19.     //邊框圓  
20.     CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顔色  
21.     CGContextSetLineWidth(context, 1.0);//線的寬度  
22.     //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π 弧度   
23.     // x,y為圓點坐标，radius半徑，startAngle為開始的弧度，endAngle為 結束的弧度，clockwise 0為順時針，1為逆時針。  
24.     CGContextAddArc(context, 100, 20, 15, 0, 2*PI, 0); //添加一個圓  
25.     CGContextDrawPath(context, kCGPathStroke); //繪制路徑  
26.     //填充圓，無邊框  
27.     CGContextAddArc(context, 150, 30, 30, 0, 2*PI, 0); //添加一個圓  
28.     CGContextDrawPath(context, kCGPathFill);//繪制填充  
29.     //畫大圓并填充顔  
30.     UIColor*aColor = [UIColor colorWithRed:1 green:0.0 blue:0 alpha:1];  
31.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充顔色  
32.     CGContextSetLineWidth(context, 3.0);//線的寬度  
33.     CGContextAddArc(context, 250, 40, 40, 0, 2*PI, 0); //添加一個圓  
34.     //kCGPathFill填充非零繞數規則,kCGPathEOFill表示用奇偶規則,kCGPathStroke路徑,kCGPathFillStroke路徑填充,kCGPathEOFillStroke表示描線，不是填充  
35.     CGContextDrawPath(context, kCGPathFillStroke); //繪制路徑加填充  
36.     /*畫線及孤線*/  
37.     //畫線  
38.     CGPoint aPoints[2];//坐标點  
39.     aPoints[0] =CGPointMake(100, 80);//坐标1  
40.     aPoints[1] =CGPointMake(130, 80);//坐标2  
41.     //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)  
42.     //points[]坐标數組，和count大小  
43.     CGContextAddLines(context, aPoints, 2);//添加線  
44.     CGContextDrawPath(context, kCGPathStroke); //根據坐标繪制路徑  
45.     //畫笑臉弧線  
46.     //左  
47.     CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);//改變畫筆顔色  
48.     CGContextMoveToPoint(context, 140, 80);//開始坐标p1  
49.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  
50.     //x1,y1跟p1形成一條線的坐标p2，x2,y2結束坐标跟p3形成一條線的p3,radius半徑,注意, 需要算好半徑的長度,  
51.     CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);  
52.     CGContextStrokePath(context);//繪畫路徑  
53.     //右  
54.     CGContextMoveToPoint(context, 160, 80);//開始坐标p1  
57.     CGContextAddArcToPoint(context, 168, 68, 176, 80, 10);  
60.     CGContextMoveToPoint(context, 150, 90);//開始坐标p1  
63.     CGContextAddArcToPoint(context, 158, 102, 166, 90, 10);  
65.     //注，如果還是沒弄明白怎麼回事，請參考：http://donbe.blog.163.com/blog/static/138048021201052093633776/  
66.     /*畫矩形*/  
67.     CGContextStrokeRect(context,CGRectMake(100, 120, 10, 10));//畫方框  
68.     CGContextFillRect(context,CGRectMake(120, 120, 10, 10));//填充框  
69.     //矩形，并填棄顔色  
70.     CGContextSetLineWidth(context, 2.0);//線的寬度  
71.     aColor = [UIColor blueColor];//blue藍色  
73.     aColor = [UIColor yellowColor];  
74.     CGContextSetStrokeColorWithColor(context, aColor.CGColor);//線框顔色  
75.     CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//畫方框  
76.     CGContextDrawPath(context, kCGPathFillStroke);//繪畫路徑  
77.     //矩形，并填棄漸變顔色  
78.     //關于顔色參考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html  
79.     //http://blog.csdn.net/reylen/article/details/8622932  
80.     //第一種填充方式，第一種方式必須導入類庫quartcore并#import <QuartzCore/QuartzCore.h>，這個就不屬于在context上畫，而是将層插入到view層上面。那麼這裡就設計到Quartz Core 圖層程式設計了。  
81.     CAGradientLayer *gradient1 = [CAGradientLayer layer];  
82.     gradient1.frame = CGRectMake(240, 120, 60, 30);  
83.     gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,  
84.                         (id)[UIColor grayColor].CGColor,  
85.                         (id)[UIColor blackColor].CGColor,  
86.                         (id)[UIColor yellowColor].CGColor,  
87.                         (id)[UIColor blueColor].CGColor,  
88.                         (id)[UIColor redColor].CGColor,  
89.                         (id)[UIColor greenColor].CGColor,  
90.                         (id)[UIColor orangeColor].CGColor,  
91.                         (id)[UIColor brownColor].CGColor,nil];  
92.     [self.layer insertSublayer:gradient1 atIndex:0];  
93.     //第二種填充方式   
94.     CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  
95.     CGFloat colors[] =  
96.     {  
97.         1,1,1, 1.00,  
98.         1,1,0, 1.00,  
99.         1,0,0, 1.00,  
100.         1,0,1, 1.00,  
101.         0,1,1, 1.00,  
102.         0,1,0, 1.00,  
103.         0,0,1, 1.00,  
104.         0,0,0, 1.00,  
105.     };  
106.     CGGradientRef gradient = CGGradientCreateWithColorComponents  
107.     (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//形成梯形，漸變的效果   
108.     CGColorSpaceRelease(rgb);  
109.     //畫線形成一個矩形  
110.     //CGContextSaveGState與CGContextRestoreGState的作用  
111.     /* 
112.      CGContextSaveGState函數的作用是将目前圖形狀态推入堆棧。之後，您對圖形狀态所做的修改會影響随後的描畫操作，但不影響存儲在堆棧中的拷貝。在修改完成後，您可以通過CGContextRestoreGState函數把堆棧頂部的狀态彈出，傳回到之前的圖形狀态。這種推入和彈出的方式是回到之前圖形狀态的快速方法，避免逐個撤消所有的狀态修改；這也是将某些狀态（比如裁剪路徑）恢複到原有設定的唯一方式。 
113.      */  
114.     CGContextSaveGState(context);  
115.     CGContextMoveToPoint(context, 220, 90);  
116.     CGContextAddLineToPoint(context, 240, 90);  
117.     CGContextAddLineToPoint(context, 240, 110);  
118.     CGContextAddLineToPoint(context, 220, 110);  
119.     CGContextClip(context);//context裁剪路徑,後續操作的路徑  
120.     //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)  
121.     //gradient漸變顔色,startPoint開始漸變的起始位置,endPoint結束坐标,options開始坐标之前or開始之後開始漸變  
122.     CGContextDrawLinearGradient(context, gradient,CGPointMake  
123.                                 (220,90) ,CGPointMake(240,110),  
124.                                 kCGGradientDrawsAfterEndLocation);  
125.     CGContextRestoreGState(context);// 恢複到之前的context  
126.     //再寫一個看看效果  
128.     CGContextMoveToPoint(context, 260, 90);  
129.     CGContextAddLineToPoint(context, 280, 90);  
130.     CGContextAddLineToPoint(context, 280, 100);  
131.     CGContextAddLineToPoint(context, 260, 100);  
132.     CGContextClip(context);//裁剪路徑  
133.     //說白了，開始坐标和結束坐标是控制漸變的方向和形狀  
135.                                 (260, 90) ,CGPointMake(260, 100),  
138.     //下面再看一個顔色漸變的圓  
139.     CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 100), 0.0, CGPointMake(300, 100), 10, kCGGradientDrawsBeforeStartLocation);  
140.     /*畫扇形和橢圓*/  
141.     //畫扇形，也就畫圓，隻不過是設定角度的大小，形成一個扇形  
142.     aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];  
144.     //以10為半徑圍繞圓心畫指定角度扇形  
145.     CGContextMoveToPoint(context, 160, 180);  
146.     CGContextAddArc(context, 160, 180, 30,  -60 * PI / 180, -120 * PI / 180, 1);  
147.     CGContextClosePath(context);  
148.     CGContextDrawPath(context, kCGPathFillStroke); //繪制路徑  
149.     //畫橢圓  
150.     CGContextAddEllipseInRect(context, CGRectMake(160, 180, 20, 8)); //橢圓  
151.     CGContextDrawPath(context, kCGPathFillStroke);  
152.     /*畫三角形*/  
153.     //隻要三個點就行跟畫一條線方式一樣，把三點連接配接起來  
154.     CGPoint sPoints[3];//坐标點  
155.     sPoints[0] =CGPointMake(100, 220);//坐标1  
156.     sPoints[1] =CGPointMake(130, 220);//坐标2  
157.     sPoints[2] =CGPointMake(130, 160);//坐标3  
158.     CGContextAddLines(context, sPoints, 3);//添加線  
159.     CGContextClosePath(context);//封起來  
160.     CGContextDrawPath(context, kCGPathFillStroke); //根據坐标繪制路徑  
161.     /*畫圓角矩形*/  
162.     float fw = 180;  
163.     float fh = 280;  
164.     CGContextMoveToPoint(context, fw, fh-20);  // 開始坐标右邊開始  
165.     CGContextAddArcToPoint(context, fw, fh, fw-20, fh, 10);  // 右下角角度  
166.     CGContextAddArcToPoint(context, 120, fh, 120, fh-20, 10); // 左下角角度  
167.     CGContextAddArcToPoint(context, 120, 250, fw-20, 250, 10); // 左上角  
168.     CGContextAddArcToPoint(context, fw, 250, fw, fh-20, 10); // 右上角  
171.     /*畫貝塞爾曲線*/  
172.     //二次曲線  
173.     CGContextMoveToPoint(context, 120, 300);//設定Path的起點  
174.     CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//設定貝塞爾曲線的控制點坐标和終點坐标  
175.     CGContextStrokePath(context);  
176.     //三次曲線函數  
177.     CGContextMoveToPoint(context, 200, 300);//設定Path的起點  
178.     CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//設定貝塞爾曲線的控制點坐标和控制點坐标終點坐标  
180.     /*圖檔*/  
181.     UIImage *p_w_picpath = [UIImage p_w_picpathNamed:@"apple.jpg"];  
182.     [p_w_picpath drawInRect:CGRectMake(60, 340, 20, 20)];//在坐标中畫出圖檔  
183. //    [p_w_picpath drawAtPoint:CGPointMake(100, 340)];//保持圖檔大小在point點開始畫圖檔，可以把注釋去掉看看  
184.     CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), p_w_picpath.CGImage);//使用這個使圖檔上下颠倒了，參考http://blog.csdn.net/koupoo/article/details/8670024  
185. //    CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), p_w_picpath.CGImage);//平鋪圖  
186. }  
187. @end  

用法：

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