iOS中 CoreGraphics快速绘图(详解)

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第一步：先科普一下基础知识：

Core Graphics是基于C的API，可以用于一切绘图操作

Core Graphics 和Quartz 2D的区别

quartz是一个通用的术语，用于描述在iOS和MAC OS X ZHONG 整个媒体层用到的多种技术 包括图形、动画、音频、适配。

Quart 2D 是一组二位绘图和渲染API，Core Graphic会使用到这组API 

Quartz Core 专指Core Animation用到的动画相关的库、API和类

点和像素的对比

系统拥有坐标系，如320*480 硬件有retain屏幕和非retain屏：如320*480、640*960

Core Graphics 使用的是系统的坐标系来绘制图片。在分辨率为640*960手机上绘制图片时，实际上Core Graphics 的坐标是320*480。这个时候每个坐标系上的点，实际上拥有两个像素。

图形上下文

Core Graphics 使用图形上下文进行工作，这个上下文的作用像画家的画布一样。

在图形上下文之外是无法绘图的，我们可以自己创建一个上下文，但是性能和内存的使用上，效率是非常低得。

我们可以通过派生一个UIView的子类，获得它的上下文。在UIView中调用drawRect：方法时，会自动准备好一个图形上下文，可以通过调用

UIGraphicsGetCurrentContext（）来获取。 因为它是运行期间绘制图片，我们可以动态的做一些额外的操作

Core Graphics的优点

快速、高效，减小应用的文件大小。同时可以自由地使用动态的、高质量的图形图像。 使用Core Graphics，可以创建直线、路径、渐变、文字与图像等内容，并可以做变形处理。

绘制自定义视图

drawRect:是系统的方法，不要从代码里面直接调用 drawRect：，而应该使用setNeedsDisplay重绘.

需要知道的术语

• 路径 path 
  
• 阴影 shadow 
  
• 笔画 stroke 
  
• 剪裁路径 Clip Path 
  
• 线条粗细 Line Width 
  
• 混合模式 Blend Mode 
  
• 填充色 Fill Color 
  
• 当前形变矩阵 Current Transform Matrix 
  
• 线条图案 Line Dash 
  

图形上下文栈

一个图形上下文好比是画布上的一副扁平的图画 执行绘画动作，这些动作是在同一个图层上完成的。 图形上下文不允许将内容分不到多个图层中，如果有需求在不同图层上画，可以考虑使用视图层次结构，创建多个UIView，并将他们作为父视图的子视图

图形上下文栈可以把图形上下文的当前状态保存下来，并在执行一些动作后再次恢复回来

CGContextSaveGState(); 

CGContextStoreGState(); 

路径、渐变、文字和图像

1. 使用UIBezierPath创建路径 

2. 手动创建路径 moveToPoint addLineToPoint addArcWithCenter addCurveToPoint

渐变，渐变可以在指定方向上，以可变的比率在一系列颜色之间转化 

线性渐变：沿着一条定义好了起点和重点的直线方向，呈线性变化。如果这条线有一定角度，线性渐变也会沿相同路径变化

放射渐变：颜色顺着两个原型之间的方向线性变化，这两个园为起始圆和终止圆，每隔圆都有自己的圆心和班级

文字 

darwAtPoint

drawInRect 

图像 

Core Graphics 不会保持图像的长宽比例，Core Graphics会将图像的边界设置为CGrect，不管图片是否变形 darwAtPoint drawInRect

第二步：代码部分：

基础画法就不多讲啦！都通用：

第一种绘图形式：在UIView的子类方法drawRect：中绘制一个蓝色圆，使用UIKit在Cocoa为我们提供的当前上下文中完成绘图任务。

 

[objc] view plain copy

 

1. - (void) drawRect: (CGRect) rect {   
2.    
3. UIBezierPath* p = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,100,100)];   
4.    
5. [[UIColor blueColor] setFill];   
6.    
7. [p fill];   
8.    
9. }   

 

第二种绘图形式：使用Core Graphics实现绘制蓝色圆。

 

[objc] view plain copy

 

1. - (void) drawRect: (CGRect) rect {   
2.    
3. CGContextRef con = UIGraphicsGetCurrentContext();   
4.    
5. CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));   
6.    
7. CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);   
8.    
9. CGContextFillPath(con);   
10.    
11. }   

 

第三种绘图形式：我将在UIView子类的drawLayer:inContext：方法中实现绘图任务。drawLayer:inContext：方法是一个绘制图层内容的代理方法。为了能够调用drawLayer:inContext：方法，我们需要设定图层的代理对象。但要注意，不应该将UIView对象设置为显示层的委托对象，这是因为UIView对象已经是隐式层的代理对象，再将它设置为另一个层的委托对象就会出问题。轻量级的做法是：编写负责绘图形的代理类。在MyView.h文件中声明如下代码：

 

[objc] view plain copy

 

1. @interface MyLayerDelegate : NSObject   
2.    
3. @end   

 

然后MyView.m文件中实现接口代码：

 

[objc] view plain copy

 

1. @implementation MyLayerDelegate   
2.    
3. - (void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx {   
4.    
5.   UIGraphicsPushContext(ctx);   
6.    
7.   UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];   
8.    
9.   [[UIColor blueColor] setFill];   
10.    
11.   [p fill];   
12.    
13.   UIGraphicsPopContext();   
14.    
15. }   
16.    
17. @end   

 

直接将代理类的实现代码放在MyView.m文件的#import代码的下面，这样感觉好像在使用私有类完成绘图任务（虽然这不是私有类）。需要注意的是，我们所引用的上下文并不是当前上下文，所以为了能够使用UIKit，我们需要将引用的上下文转变成当前上下文。

 

因为图层的代理是assign内存管理策略，那么这里就不能以局部变量的形式创建MyLayerDelegate实例对象赋值给图层代理。这里选择在MyView.m中增加一个实例变量，因为实例变量默认是strong:

 

[objc] view plain copy

 

1. @interface MyView () {   
2.    
3. MyLayerDelegate* _layerDeleagete;   
4.    
5. }   
6.    
7. @end   

 

使用该图层代理：

 

[objc] view plain copy

 

1. MyView *myView = [[MyView alloc] initWithFrame: CGRectMake(0, 0, 320, 480)];   
2.    
3. CALayer *myLayer = [CALayer layer];   
4.    
5. _layerDelegate = [[MyLayerDelegate alloc] init];   
6.    
7. myLayer.delegate = _layerDelegate;   
8.    
9. [myView.layer addSublayer:myLayer];   
10.    
11. [myView setNeedsDisplay]; // 调用此方法，drawLayer: inContext:方法才会被调用。   

 

第四种绘图形式： 使用Core Graphics在drawLayer:inContext：方法中实现同样操作，代码如下：

 

[objc] view plain copy

 

1. - (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con {   
2.    
3. CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));   
4.    
5. CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);   
6.    
7. CGContextFillPath(con);   
8.    
9. }   

 

最后，演示UIGraphicsBeginImageContextWithOptions的用法，并从上下文中生成一个UIImage对象。生成UIImage对象的代码并不需要等待某些方法被调用后或在UIView的子类中才能去做。

 

第五种绘图形式： 使用UIKit实现：

 

[objc] view plain copy

 

1. UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);   
2.    
3. UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];   
4.    
5. [[UIColor blueColor] setFill];   
6.    
7. [p fill];   
8.    
9. UIImage* im = UIGraphicsGetImageFromCurrentImageContext();   
10.    
11. UIGraphicsEndImageContext();   

 

解释一下UIGraphicsBeginImageContextWithOptions函数参数的含义：第一个参数表示所要创建的图片的尺寸；第二个参数用来指定所生成图片的背景是否为不透明，如上我们使用YES而不是NO，则我们得到的图片背景将会是黑色，显然这不是我想要的；第三个参数指定生成图片的缩放因子，这个缩放因子与UIImage的scale属性所指的含义是一致的。传入0则表示让图片的缩放因子根据屏幕的分辨率而变化，所以我们得到的图片不管是在单分辨率还是视网膜屏上看起来都会很好。

 

第六种绘图形式： 使用Core Graphics实现：

 

[objc] view plain copy

 

1. UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);   
2.    
3. CGContextRef con = UIGraphicsGetCurrentContext();   
4.    
5. CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));   
6.    
7. CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);   
8.    
9. CGContextFillPath(con);   
10.    
11. UIImage* im = UIGraphicsGetImageFromCurrentImageContext();   
12.    
13. UIGraphicsEndImageContext();   

第三步：实践部分：

第一种：基本图形绘制

[objc] view plain copy

 

1. /** 
2.  *  什么调用：当你视图第一次显示的时候就会调用 
3.  *  作用：绘图 
4.  *  @param rect = self.bounds 
5.  */  
6. - (void)drawRect:(CGRect)rect  
7. {  
8.     // 1.获取上下文  
9.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
10.       
11.     // 2.拼接路径  
12.     UIBezierPath *path = [UIBezierPath bezierPath];  
13.       
14.     CGPoint startP = CGPointMake(10, 125);  
15.     CGPoint endP = CGPointMake(240, 125);  
16.     CGPoint controlP = CGPointMake(125, 0);  
17.     [path moveToPoint:startP];  
18.     [path addQuadCurveToPoint:endP controlPoint:controlP];  
19.       
20.     // 3.把路径添加到上下文  
21.     CGContextAddPath(ctx, path.CGPath);  
22.       
23.     // 4.渲染上下文到视图  
24.     CGContextStrokePath(ctx);  
25. }  
26.   
27. - (void)drawLine  
28. {  
29.     // 1.获取上下文  
30.     // CGContextRef CG CoreGraphics Ref 引用  
31.     // 目前学的上下文都跟UIGraphics有关，以后想直接获取上下文，直接敲一个UIGraphics  
32.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
33.       
34.     // 2.设置绘图信息(拼接路径)  
35.     UIBezierPath *path = [UIBezierPath bezierPath];  
36.       
37.     // 设置起点  
38.     [path moveToPoint:CGPointMake(10, 10)];  
39.       
40.     // 添加一条线到某个点  
41.     [path addLineToPoint:CGPointMake(125, 125)];  
42.     [path addLineToPoint:CGPointMake(240, 10)];  
43.     // 3.把路径添加到上下文  
44.     // 直接把UIKit的路径转换成CoreGraphics，CG开头就能转  
45.     CGContextAddPath(ctx, path.CGPath);  
46.       
47.     // 4.把上下文渲染到视图  
48.     // Stroke描边  
49.     CGContextStrokePath(ctx);  
50. }  
51.   
52. - (void)draw2Line  
53. {  
54.     // 1.获取上下文  
55.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
56.       
57.     // 2.拼接路径  
58.     UIBezierPath *path = [UIBezierPath bezierPath];  
59.       
60.     // 设置起点  
61.     [path moveToPoint:CGPointMake(10, 125)];  
62.       
63.     // 添加一条线到某个点  
64.     [path addLineToPoint:CGPointMake(230, 125)];  
65.       
66.     //    // 设置起点  
67.     //    [path moveToPoint:CGPointMake(10, 10)];  
68.     //  
69.     //    // 添加一条线到某个点  
70.     //    [path addLineToPoint:CGPointMake(125, 100)];  
71.       
72.     UIBezierPath *path1 = [UIBezierPath bezierPath];  
73.       
74.     [path1 moveToPoint:CGPointMake(10, 10)];  
75.       
76.     [path1 addLineToPoint:CGPointMake(125, 100)];  
77.       
78.       
79.     // 3.把路径添加到上下文  
80.     CGContextAddPath(ctx, path.CGPath);  
81.     CGContextAddPath(ctx, path1.CGPath);  
82.       
83.     // 设置绘图状态  
84.     // 设置线宽  
85.     CGContextSetLineWidth(ctx, 10);  
86.     CGContextSetLineCap(ctx, kCGLineCapRound);  
87.     //    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);  
88.     [[UIColor redColor] set];  
89.       
90.     // 4.渲染上下文到视图  
91.     CGContextStrokePath(ctx);  
92.   
93. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第二种：下载进度条：

[objc] view plain copy

 

1. - (void)setProgress:(CGFloat)progress  
2. {  
3.     _progress = progress;  
4.     self.myLabel.text = [NSString stringWithFormat:@"%.2f%%",progress*100];  
5.     //    [self drawRect:self.bounds];  
6.     // 重新绘制  
7.     // 在view上做一个重绘的标记，当下次屏幕刷新的时候，就会调用drawRect.  
8.     [self setNeedsDisplay];  
9. }  
10.   
11.   
12. // Only override drawRect: if you perform custom drawing.  
13. // An empty implementation adversely affects performance during animation.  
14.   
15.  // 当视图显示的时候会调用 默认只会调用一次  
16. - (void)drawRect:(CGRect)rect  
17. {  
18.      // 1.获取上下文  
19.      CGContextRef ctx = UIGraphicsGetCurrentContext();  
20.        
21.      // 2.拼接路径  
22.      CGPoint center = CGPointMake(50, 50);  
23.      CGFloat radius = 50 - 2;  
24.      CGFloat startA = -M_PI_2;  
25.      CGFloat endA = -M_PI_2 + _progress * M_PI * 2;  
26.      UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];  
27.        
28.      // 3.把路径添加到上下文  
29.      CGContextAddPath(ctx, path.CGPath);  
30.        
31.      // 4.把上下文渲染到视图  
32.      CGContextStrokePath(ctx);  
33.    
34. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第三种：饼图

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     // Drawing code  
4.       
5.     NSArray *data = @[@25,@25,@50];  
6.       
7.     // 1.获取上下文  
8.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
9.       
10.     // 2.拼接路径  
11.     CGPoint center = CGPointMake(125, 125);  
12.     CGFloat radius = 120;  
13.     CGFloat startA = 0;  
14.     CGFloat angle = 0;  
15.     CGFloat endA = 0;  
16.       
17.     for (NSNumber *number in data) {  
18.         // 2.拼接路径  
19.         startA = endA;  
20.         angle = number.intValue / 100.0 * M_PI * 2;  
21.         endA = startA + angle;  
22.         UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];  
23.         [path addLineToPoint:center];  
24.           
25.         [[UIColor randomColor] set];  
26.         // 把路径添加上下文  
27.         CGContextAddPath(ctx, path.CGPath);  
28.           
29.         // 渲染  
30.         CGContextFillPath(ctx);  
31.           
32.     }  
33. }  
34.   
35. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
36. {  
37.     CGFloat a = arc4random_uniform(6);  
38.     //CGFloat a =  arc4random()%6;  
39.     NSLog(@"随机数--%f",a);  
40.       
41.       
42.     [self setNeedsDisplay];  
43. }  
44.   
45. - (void)drawPie  
46. {  
47.     // 1.获取上下文  
48.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
49.       
50.     // 2.拼接路径  
51.     CGPoint center = CGPointMake(125, 125);  
52.     CGFloat radius = 120;  
53.     CGFloat startA = 0;  
54.     CGFloat angle = 0;  
55.     CGFloat endA = 0;  
56.       
57.     // 第一个扇形  
58.     angle = 25 / 100.0 * M_PI * 2;  
59.     endA = startA + angle;  
60.     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];  
61.     [path addLineToPoint:center];  
62.     // 添加到上下文  
63.     CGContextAddPath(ctx, path.CGPath);  
64.     [[UIColor redColor] set];  
65.       
66.       
67.     // 渲染  
68.     CGContextFillPath(ctx);  
69.       
70.       
71.       
72.     // 第二个扇形  
73.     startA = endA;  
74.     angle = 25 / 100.0 * M_PI * 2;  
75.     endA = startA + angle;  
76.     UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];  
77.     [path1 addLineToPoint:center];  
78.     // 添加到上下文  
79.     CGContextAddPath(ctx, path1.CGPath);  
80.     [[UIColor greenColor] set];  
81.     // 渲染  
82.     CGContextFillPath(ctx);  
83.       
84.     // 第三个扇形  
85.     startA = endA;  
86.     angle = 50 / 100.0 * M_PI * 2;  
87.     endA = startA + angle;  
88.     UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];  
89.     [path2 addLineToPoint:center];  
90.     // 添加到上下文  
91.     CGContextAddPath(ctx, path2.CGPath);  
92.     [[UIColor blueColor] set];  
93.     // 渲染  
94.     CGContextFillPath(ctx);  
95.       
96. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第四种：柱形图

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.      NSArray *data = @[@25,@25,@50];  
4.      NSInteger count = data.count;  
5.        
6.      CGFloat w = rect.size.width / (22 * count - 1);  
7.      CGFloat h = 0;  
8.      CGFloat x = 0;  
9.      CGFloat y = 0;  
10.      CGFloat viewH = rect.size.height;  
11.      // 1.获取上下文  
12.      CGContextRef ctx = UIGraphicsGetCurrentContext();  
13.        
14.      for (int i = 0; i < count; i++) {  
15.      h = viewH * [data[i] intValue] / 100.0;  
16.      x = 22 * w * i;  
17.      y = viewH - h;  
18.      // 2.拼接路径  
19.      UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];  
20.        
21.      // 3.添加路径到上下文  
22.      CGContextAddPath(ctx, path.CGPath);  
23.        
24.      [[UIColor randomColor] set];  
25.        
26.      // 4.渲染  
27.      CGContextFillPath(ctx);  
28.      }  
29. }  
30.    
31. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
32. {  
33.      [self setNeedsDisplay];  
34. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第五种：模仿UIImageView

[objc] view plain copy

 

1. - (void)setImage:(UIImage *)image  
2.  {  
3.      _image = image;  
4.      [self setNeedsDisplay];  
5. }  
6.    
7.  // Only override drawRect: if you perform custom drawing.  
8.  // An empty implementation adversely affects performance during animation.  
9. - (void)drawRect:(CGRect)rect  
10. {  
11.  // Drawing code  
12.    
13.      [_image drawInRect:rect];  
14. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第六种：图形上下文线

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     // Drawing code  
4.       
5.     // 1.获取上下文  
6.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
7.       
8.     // 把ctx拷贝一份放在栈中  
9.     CGContextSaveGState(ctx);  
10.       
11.     // 2.拼接路径（绘图的信息）  
12.     UIBezierPath *path = [UIBezierPath bezierPath];  
13.     [path moveToPoint:CGPointMake(10, 125)];  
14.     [path addLineToPoint:CGPointMake(240, 125)];  
15.       
16.     // 3.路径添加到上下文  
17.     CGContextAddPath(ctx, path.CGPath);  
18.       
19.     // 设置绘图的状态  
20.     [[UIColor redColor] set];  
21.     CGContextSetLineWidth(ctx, 10);  
22.     CGContextSetLineCap(ctx, kCGLineCapRound);  
23.       
24.     // 4.渲染  
25.     CGContextStrokePath(ctx);  
26.       
27.       
28.     // 第二根线  
29.     UIBezierPath *path1 = [UIBezierPath bezierPath];  
30.     [path1 moveToPoint:CGPointMake(125, 10)];  
31.     [path1 addLineToPoint:CGPointMake(125, 240)];  
32.     CGContextAddPath(ctx, path1.CGPath);  
33.       
34.     // 把栈顶上下文取出来，替换当前上下文  
35.     CGContextRestoreGState(ctx);  
36.       
37.     // 设置绘图的状态  
38.     //    [[UIColor blackColor] set];  
39.     //    CGContextSetLineWidth(ctx, 1);  
40.     //    CGContextSetLineCap(ctx, kCGLineCapButt);  
41.       
42.       
43.     // 4.渲染  
44.     CGContextStrokePath(ctx);  
45.       
46. }  

每日更新关注:http://weibo.com/hanjunqiang  新浪微博

第七种：矩形操作

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     // Drawing code  
4.       
5.     // 1.获取上下文  
6.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
7.       
8.     // 注意：你的路径一定放在上下文矩阵操作之后  
9.     // 平移上下文  
10.     CGContextTranslateCTM(ctx, 50, 100);  
11.       
12.     // 旋转上下文  
13.     CGContextRotateCTM(ctx, M_PI_4);  
14.       
15.     // 缩放上下文  
16.     CGContextScaleCTM(ctx, 0.5, 1.2);  
17.       
18.     // 2.拼接路径  
19.     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-50, -100, 150, 200)];  
20.       
21.     // 3.把路径添加到上下文  
22.     CGContextAddPath(ctx, path.CGPath);  
23.       
24.       
25.       
26.     [[UIColor redColor] set];  
27.       
28.     // 4.渲染  
29.     CGContextFillPath(ctx);  
30.       
31. }