iOS绘图教程

转自：http://www.maxiaoguo.com/clothes/252.html

基本图形的绘制 包括： 代码画线，画文字 图片 裁剪 重绘  简单动画

当自定义view的时候 系统会自动调用drawRect 方法

画线

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     // Drawing code  
4.     // 1.获得图形上下文  
5.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
6.       
7.     // 2.拼接图形(路径)  
8.     // 设置线段宽度  
9.     CGContextSetLineWidth(ctx, 10);  
10.       
11.     // 设置线段头尾部的样式  
12.     CGContextSetLineCap(ctx, kCGLineCapRound);  
13.       
14.     // 设置线段转折点的样式  
15.     CGContextSetLineJoin(ctx, kCGLineJoinRound);  
16.       
17.     /**  第1根线段  **/  
18.     // 设置颜色  
19.     CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);  
20.     // 设置一个起点  
21.     CGContextMoveToPoint(ctx, 10, 10);  
22.     // 添加一条线段到(100, 100)  
23.     CGContextAddLineToPoint(ctx, 100, 100);  
24.       
25.     // 渲染一次  
26.     CGContextStrokePath(ctx);  
27.       
28.       
29.     /**  第2根线段  **/  
30.     // 设置颜色  
31.     CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);  
32.     // 设置一个起点  
33.     CGContextMoveToPoint(ctx, 200, 190);  
34.     // 添加一条线段到(150, 40)  
35.     CGContextAddLineToPoint(ctx, 150, 40);  
36.     CGContextAddLineToPoint(ctx, 120, 60);  
37.       
38.       
39.     // 3.渲染显示到view上面  
40.     CGContextStrokePath(ctx);  
41. }  

画圆弧

[objc] view plain copy

 

1. /** 
2.  *  画圆弧 
3.  */  
4. void drawArc()  
5. {  
6.     // 1.获得上下文  
7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
8.       
9.     // 2.画圆弧  
10.     // x\y : 圆心  
11.     // radius : 半径  
12.     // startAngle : 开始角度  
13.     // endAngle : 结束角度  
14.     // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)  
15.     CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);  
16.       
17.       
18.     // 3.显示所绘制的东西  
19.     CGContextFillPath(ctx);  
20. }  

画圆

[objc] view plain copy

 

1. /** 
2.  *  画圆 
3.  */  
4. void drawCircle()  
5. {  
6.     // 1.获得上下文  
7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
8.       
9.     // 2.画圆  
10.     CGContextAddEllipseInRect(ctx, CGRectMake(50, 10, 100, 100));  
11.       
12.     CGContextSetLineWidth(ctx, 10);  
13.       
14.     // 3.显示所绘制的东西  
15.     CGContextStrokePath(ctx);  
16. }  

画矩形

[objc] view plain copy

 

1. /** 
2.  *  画四边形 
3.  */  
4. void draw4Rect()  
5. {  
6.     // 1.获得上下文  
7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
8.       
9.     // 2.画矩形  
10.     CGContextAddRect(ctx, CGRectMake(10, 10, 150, 100));  
11.       
12.     // set : 同时设置为实心和空心颜色  
13.     // setStroke : 设置空心颜色  
14.     // setFill : 设置实心颜色  
15.     [[UIColor whiteColor] set];  
16.       
17. //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);  
18.       
19.     // 3.绘制图形  
20.     CGContextFillPath(ctx);  
21. }  

画三角形

[objc] view plain copy

 

1. /** 
2.  *  画三角形 
3.  */  
4. void drawTriangle()  
5. {  
6.     // 1.获得上下文  
7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
8.       
9.     // 2.画三角形  
10.     CGContextMoveToPoint(ctx, 0, 0);  
11.     CGContextAddLineToPoint(ctx, 100, 100);  
12.     CGContextAddLineToPoint(ctx, 150, 80);  
13.     // 关闭路径(连接起点和最后一个点)  
14.     CGContextClosePath(ctx);  
15.       
16.     //  
17.     CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);  
18.       
19.     // 3.绘制图形  
20.     CGContextStrokePath(ctx);  
21. }  

 画文字

[objc] view plain copy

 

1. /** 
2.  *  画文字 
3.  */  
4. void drawText()  
5. {  
6.     // 1.获得上下文  
7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
8.     // 2.画矩形  
9.     CGRect cubeRect = CGRectMake(50, 50, 100, 100);  
10.     CGContextAddRect(ctx, cubeRect);  
11.     // 3.显示所绘制的东西  
12.     CGContextFillPath(ctx);  
13.       
14.       
15.       
16.     // 4.画文字  
17.     NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";  
18.     //    [str drawAtPoint:CGPointZero withAttributes:nil];  
19.       
20.     NSMutableDictionary *attrs = [NSMutableDictionary dictionary];  
21.     // NSForegroundColorAttributeName : 文字颜色  
22.     // NSFontAttributeName : 字体  
23.     attrs[NSForegroundColorAttributeName] = [UIColor redColor];  
24.     attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];  
25.     [str drawInRect:cubeRect withAttributes:attrs];  
26. }  

画图片

[objc] view plain copy

 

1. void drawImage()  
2. {  
3.     // 1.取得图片  
4.     UIImage *image = [UIImage imageNamed:@"me"];  
5.       
6.     // 2.画  
7. //    [image drawAtPoint:CGPointMake(50, 50)];  
8. //    [image drawInRect:CGRectMake(0, 0, 150, 150)];  
9.     [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];  
10.       
11.     // 3.画文字  
12.     NSString *str = @"为xxx所画";  
13.     [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];  
14. }  

在绘制的时候 当设置了ctx 的颜色的时候 再绘制其他的图时，颜色需要重置，很麻烦，解决方法是重置 ctx 如下

[objc] view plain copy

 

1. // 将ctx拷贝一份放到栈中  
2.    CGContextSaveGState(ctx);  
3.      
4.    // 设置绘图状态  
5.    CGContextSetLineWidth(ctx, 10);  
6.    [[UIColor redColor] set];  
7.    CGContextSetLineCap(ctx, kCGLineCapRound);  
8.      
9.    // 第1根线  
10.    CGContextMoveToPoint(ctx, 50, 50);  
11.    CGContextAddLineToPoint(ctx, 120, 190);  
12.      
13.    CGContextStrokePath(ctx);  
14.      
15.    // 将栈顶的上下文出栈,替换当前的上下文  
16.    CGContextRestoreGState(ctx);  

整个ctx 的旋转 移动 

[objc] view plain copy

 

1. CGContextRotateCTM(ctx, M_PI_4 * 0.3);  
2. CGContextScaleCTM(ctx, 0.5, 0.5);  
3. CGContextTranslateCTM(ctx, 0, 150);  

图片的裁剪 思路是 裁剪ctx的显示区域

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
4.       
5.     CGContextSaveGState(ctx);  
6.       
7.     // 0.画圆  
8.     CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));  
9.     // 裁剪  
10.     CGContextClip(ctx);  
11.     CGContextFillPath(ctx);  
12.       
13.     // 1.显示图片  
14.     UIImage *image = [UIImage imageNamed:@"me"];  
15.     [image drawAtPoint:CGPointMake(100, 100)];  
16.       
17.     CGContextRestoreGState(ctx);  
18.       
19.     CGContextAddRect(ctx, CGRectMake(0, 0, 50, 50));  
20.     CGContextFillPath(ctx);  
21. }  

动画

 CADisplayLink 是一个定时器，特点 刷新频率高，  setNeedsDisplay方法起重新绘制的作用

[objc] view plain copy

 

1. - (void)awakeFromNib  
2. {  
3.     CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];  
4.     [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];  
5.       
6. //    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];  
7. }  
8.   
9. - (void)drawRect:(CGRect)rect  
10. {  
11.     self.snowY+=5;  
12.       
13.     if (self.snowY >= rect.size.height) {  
14.         self.snowY = -100;  
15.     }  
16.       
17.     UIImage *image = [UIImage imageNamed:@"snow.jpg"];  
18.     [image drawAtPoint:CGPointMake(0, self.snowY)];  
19. }  

通过路径画图

[objc] view plain copy

 

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
4.       
5.     // 1.先创建一个路径  
6.     CGMutablePathRef linePath = CGPathCreateMutable();  
7.       
8.       
9.       
10.     // 2.拼接路径  
11.     CGPathMoveToPoint(linePath, NULL, 0, 0);  
12.     CGPathAddLineToPoint(linePath, NULL, 100, 100);  
13.       
14.     // 3.添加路径到上下文  
15.     CGContextAddPath(ctx, linePath);  
16.       
17.     CGMutablePathRef circlePath = CGPathCreateMutable();  
18.     CGPathAddArc(circlePath, NULL, 150, 150, 50, 0, M_PI * 2, 0);  
19.     CGContextAddPath(ctx, circlePath);  
20.       
21.     // 4.渲染  
22.     CGContextStrokePath(ctx);  
23.       
24.       
25.     CGPathRelease(linePath);  
26.     CGPathRelease(circlePath);  
27.       
28.       
29.     CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();  
30.     CGColorSpaceRelease(cs);  
31.       
32. //    CFRelease(linePath);  
33. //    CFRelease(circlePath);  
34. //    CFRelease(cs);  
35. }