首页 > 代码库 > drawrect的使用

drawrect的使用

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

新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法。
画线的三个步骤:
(1)获取上下文
(2)绘图
(3)渲染
画直线代码:
- (void)drawRect:(CGRect)rect
{
    //获取上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //绘图
    //第一条线
    CGContextMoveToPoint(ctx, 20, 100);
    CGContextAddLineToPoint(ctx, 100, 320);
    
    //第二条线
    CGContextMoveToPoint(ctx, 40, 200);
    CGContextAddLineToPoint(ctx, 80, 100);
    //渲染
    CGContextStrokePath(ctx);
    
}

带颜色的直线代码:
- (void)drawRect:(CGRect)rect
{
    //获取上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //绘图
    //第一条线
    CGContextMoveToPoint(ctx, 20, 100);
    CGContextAddLineToPoint(ctx, 100, 320);
    
    //设置第一条线的状态
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 12);
    //设置线条的颜色
    [[UIColor brownColor]set];
    //设置线条两端的样式为圆角
    CGContextSetLineCap(ctx,kCGLineCapRound);
    //对线条进行渲染
    CGContextStrokePath(ctx);
    
    //第二条线
    CGContextMoveToPoint(ctx, 40, 200);
    CGContextAddLineToPoint(ctx, 80, 100);
    //渲染
    CGContextStrokePath(ctx);
    
}

一条带颜色,一条为原始的代码:方法一
- (void)drawRect:(CGRect)rect
{
    //获取上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //绘图
    //第一条线
    CGContextMoveToPoint(ctx, 20, 100);
    CGContextAddLineToPoint(ctx, 100, 320);
    
    //设置第一条线的状态
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 12);
    //设置线条的颜色
    [[UIColor brownColor]set];
    //设置线条两端的样式为圆角
    CGContextSetLineCap(ctx,kCGLineCapRound);
    //对线条进行渲染
    CGContextStrokePath(ctx);
    
    //第二条线
    CGContextMoveToPoint(ctx, 40, 200);
    CGContextAddLineToPoint(ctx, 80, 100);
    
    //清空状态
    CGContextSetLineWidth(ctx, 1);
    [[UIColor blackColor]set];
    CGContextSetLineCap(ctx,kCGLineCapButt);
    
    //渲染
    CGContextStrokePath(ctx);
    
}

方法二:
- (void)drawRect:(CGRect)rect
{
    //获取上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //绘图
    
    //第二条线
    CGContextMoveToPoint(ctx, 40, 200);
    CGContextAddLineToPoint(ctx, 80, 100);
    
    //清空状态
    //    CGContextSetLineWidth(ctx, 1);
    //    [[UIColor blackColor]set];
    
    //    CGContextSetLineCap(ctx,kCGLineCapButt);
    
    //渲染
    CGContextStrokePath(ctx);
    
    //第一条线
    CGContextMoveToPoint(ctx, 20, 100);
    CGContextAddLineToPoint(ctx, 100, 320);
    
    //设置第一条线的状态
    //设置线条的宽度
    CGContextSetLineWidth(ctx, 12);
    //设置线条的颜色
    [[UIColor brownColor]set];
    //设置线条两端的样式为圆角
    CGContextSetLineCap(ctx,kCGLineCapRound);
    //对线条进行渲染
    CGContextStrokePath(ctx);
}

画四边形代码:
- (void)drawRect:(CGRect)rect
{
    //画四边形
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //绘图
    CGContextAddRect(ctx, CGRectMake(20, 50, 100, 100));
    //渲染
    CGContextStrokePath(ctx);
}

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

- (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);
}

旋转代码:

- (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);
}

缩放代码:
- (void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //矩阵操作
    //注意点:设置矩阵操作必须要在添加绘图信息之前
    //缩放,x方向缩放0.5倍,y方向缩放1.5倍
    CGContextScaleCTM(ctx, 0.5, 1.5);
    
    //绘图
    //画四边形
    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
    //画一个圆
    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
    //渲染
    CGContextStrokePath(ctx);
}
平移代码:
- (void)drawRect:(CGRect)rect
{
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //矩阵操作
    //注意点:设置矩阵操作必须要在添加绘图信息之前
    //平移,x方向移动50,y方向移动100
    CGContextTranslateCTM(ctx, 50, 100);
    
    //绘图
    //画四边形
    CGContextAddRect(ctx, CGRectMake(150, 100, 100, 100));
    //画一个圆
    CGContextAddEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));
    //渲染
    CGContextStrokePath(ctx);
}


画一个圆形头像代码:
- (void)drawRect:(CGRect)rect
{
    //画圆,以便以后指定可以显示图片的范围
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
    
    //指定上下文中可以显示内容的范围就是圆的范围
    CGContextClip(ctx);
    UIImage *image2=[UIImage imageNamed:@"me"];
    [image2 drawAtPoint:CGPointMake(100, 100)];
}

画一个三角形头像:

- (void)drawRect:(CGRect)rect
{

    //画三角形,以便以后指定可以显示图片的范围
    //获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
//    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 60, 150);
     CGContextAddLineToPoint(ctx, 140, 150);
    CGContextClosePath(ctx);
    
    
    //注意:指定范围(也就是指定剪切的方法一定要在绘制范围之前进行调用)
    //指定上下文中可以显示内容的范围就是圆的范围
    CGContextClip(ctx);
    UIImage *image2=[UIImage imageNamed:@"me"];
    [image2 drawAtPoint:CGPointMake(100, 100)];
}


drawrect的使用