绘图drawrect

通过对ios开发ui篇的学习 总结了drawrect的方法和使用 

新建一个项目，自定义一个view类和storyboard关联后，重写该类中的drowrect方法。

画线的三个步骤：

（1）获取上下文

（2）绘图

（3）渲染

画直线代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //绘图  
6.     //第一条线  
7.     CGContextMoveToPoint(ctx, 20, 100);  
8.     CGContextAddLineToPoint(ctx, 100, 320);  
9.       
10.     //第二条线  
11.     CGContextMoveToPoint(ctx, 40, 200);  
12.     CGContextAddLineToPoint(ctx, 80, 100);  
13.     //渲染  
14.     CGContextStrokePath(ctx);  
15.       
16. }  

带颜色的直线代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //绘图  
6.     //第一条线  
7.     CGContextMoveToPoint(ctx, 20, 100);  
8.     CGContextAddLineToPoint(ctx, 100, 320);  
9.       
10.     //设置第一条线的状态  
11.     //设置线条的宽度  
12.     CGContextSetLineWidth(ctx, 12);  
13.     //设置线条的颜色  
14.     [[UIColor brownColor]set];  
15.     //设置线条两端的样式为圆角  
16.     CGContextSetLineCap(ctx,kCGLineCapRound);  
17.     //对线条进行渲染  
18.     CGContextStrokePath(ctx);  
19.       
20.     //第二条线  
21.     CGContextMoveToPoint(ctx, 40, 200);  
22.     CGContextAddLineToPoint(ctx, 80, 100);  
23.     //渲染  
24.     CGContextStrokePath(ctx);  
25.       
26. }  

一条带颜色，一条为原始的代码：方法一

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //绘图  
6.     //第一条线  
7.     CGContextMoveToPoint(ctx, 20, 100);  
8.     CGContextAddLineToPoint(ctx, 100, 320);  
9.       
10.     //设置第一条线的状态  
11.     //设置线条的宽度  
12.     CGContextSetLineWidth(ctx, 12);  
13.     //设置线条的颜色  
14.     [[UIColor brownColor]set];  
15.     //设置线条两端的样式为圆角  
16.     CGContextSetLineCap(ctx,kCGLineCapRound);  
17.     //对线条进行渲染  
18.     CGContextStrokePath(ctx);  
19.       
20.     //第二条线  
21.     CGContextMoveToPoint(ctx, 40, 200);  
22.     CGContextAddLineToPoint(ctx, 80, 100);  
23.       
24.     //清空状态  
25.     CGContextSetLineWidth(ctx, 1);  
26.     [[UIColor blackColor]set];  
27.     CGContextSetLineCap(ctx,kCGLineCapButt);  
28.       
29.     //渲染  
30.     CGContextStrokePath(ctx);  
31.       
32. }  

方法二：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //绘图  
6.       
7.     //第二条线  
8.     CGContextMoveToPoint(ctx, 40, 200);  
9.     CGContextAddLineToPoint(ctx, 80, 100);  
10.       
11.     //清空状态  
12.     //    CGContextSetLineWidth(ctx, 1);  
13.     //    [[UIColor blackColor]set];  
14.       
15.     //    CGContextSetLineCap(ctx,kCGLineCapButt);  
16.       
17.     //渲染  
18.     CGContextStrokePath(ctx);  
19.       
20.     //第一条线  
21.     CGContextMoveToPoint(ctx, 20, 100);  
22.     CGContextAddLineToPoint(ctx, 100, 320);  
23.       
24.     //设置第一条线的状态  
25.     //设置线条的宽度  
26.     CGContextSetLineWidth(ctx, 12);  
27.     //设置线条的颜色  
28.     [[UIColor brownColor]set];  
29.     //设置线条两端的样式为圆角  
30.     CGContextSetLineCap(ctx,kCGLineCapRound);  
31.     //对线条进行渲染  
32.     CGContextStrokePath(ctx);  
33. }  

画四边形代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //画四边形  
4.     //获取图形上下文  
5.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
6.     //绘图  
7.     CGContextAddRect(ctx, CGRectMake(20, 50, 100, 100));  
8.     //渲染  
9.     CGContextStrokePath(ctx);  
10. }  

画一个歪的四边形：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //画四边形  
4.     //获取图形上下文  
5.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
6.     //矩阵操作  
7.     //注意点：设置矩阵操作必须要在添加绘图信息之前  
8.     //旋转45度  
9.     CGContextRotateCTM(ctx, M_PI_4);  
10.       
11.     //绘图  
12.     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));  
13.     //渲染  
14.     CGContextStrokePath(ctx);  
15. }  

画一个圆代码以及旋转代码：

- (void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //矩阵操作
    //注意点：设置矩阵操作必须要在添加绘图信息之前
    //旋转45度
    //    CGContextRotateCTM(ctx, M_PI_4);
    
    //绘图
    //画四边形
    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
    //画一个圆
    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
    //渲染
    CGContextStrokePath(ctx);
}

旋转代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取图形上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //矩阵操作  
6.     //注意点：设置矩阵操作必须要在添加绘图信息之前  
7.     //旋转45度  
8.     CGContextRotateCTM(ctx, M_PI_4);  
9.       
10.     //绘图  
11.     //画四边形  
12.     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));  
13.     //画一个圆  
14.     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));  
15.     //渲染  
16.     CGContextStrokePath(ctx);  
17. }  

缩放代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取图形上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //矩阵操作  
6.     //注意点：设置矩阵操作必须要在添加绘图信息之前  
7.     //缩放，x方向缩放0.5倍，y方向缩放1.5倍  
8.     CGContextScaleCTM(ctx, 0.5, 1.5);  
9.       
10.     //绘图  
11.     //画四边形  
12.     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));  
13.     //画一个圆  
14.     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));  
15.     //渲染  
16.     CGContextStrokePath(ctx);  
17. }  

平移代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //获取图形上下文  
4.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
5.     //矩阵操作  
6.     //注意点：设置矩阵操作必须要在添加绘图信息之前  
7.     //平移，x方向移动50，y方向移动100  
8.     CGContextTranslateCTM(ctx, 50, 100);  
9.       
10.     //绘图  
11.     //画四边形  
12.     CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));  
13.     //画一个圆  
14.     CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));  
15.     //渲染  
16.     CGContextStrokePath(ctx);  
17. }  

画一个圆形头像代码：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.     //画圆，以便以后指定可以显示图片的范围  
4.     //获取图形上下文  
5.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
6.     CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));  
7.       
8.     //指定上下文中可以显示内容的范围就是圆的范围  
9.     CGContextClip(ctx);  
10.     UIImage *image2=[UIImage imageNamed:@"me"];  
11.     [image2 drawAtPoint:CGPointMake(100, 100)];  
12. }  

画一个三角形头像：

[objc]  view plain copy

1. - (void)drawRect:(CGRect)rect  
2. {  
3.   
4.     //画三角形，以便以后指定可以显示图片的范围  
5.     //获取图形上下文  
6.     CGContextRef ctx=UIGraphicsGetCurrentContext();  
7. //    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));  
8.     CGContextMoveToPoint(ctx, 100, 100);  
9.     CGContextAddLineToPoint(ctx, 60, 150);  
10.      CGContextAddLineToPoint(ctx, 140, 150);  
11.     CGContextClosePath(ctx);  
12.       
13.       
14.     //注意：指定范围（也就是指定剪切的方法一定要在绘制范围之前进行调用）  
15.     //指定上下文中可以显示内容的范围就是圆的范围  
16.     CGContextClip(ctx);  
17.     UIImage *image2=[UIImage imageNamed:@"me"];  
18.     [image2 drawAtPoint:CGPointMake(100, 100)];  
19. }