drawrect的使用

最新推荐文章于 2025-07-02 11:22:49 发布

ios常

最新推荐文章于 2025-07-02 11:22:49 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： drawrect使用

本文链接：https://blog.youkuaiyun.com/zhaoyya/article/details/41211801

通过对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)];
}