美文网首页iOS开发深度好文
绘制简单图形---CGContextRef篇

绘制简单图形---CGContextRef篇

作者: 小白进城 | 来源:发表于2017-07-20 09:28 被阅读19次

    一、CGContextRef

    Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框,CGContextRef看成Quartz 2D绘图环境。
    CGContextRef功能强大,我们借助它可以绘制直线、曲线、多边形圆形等各种各样的几何图形,也可以绘制文字、图像等。


    二、使用

    使用方法:

    1.先在自定义View中的drawRect方法中获得上下文context;
    2.绘制图形(线,图形,图片等);
    3.设置一些修饰属性;
    4.渲染到上下文,完成绘图。

    drawRect方法什么时候触发?

    1.当view第一次显示到屏幕上时;
    2.当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。


    例子

    绘图样式


    /*****************************矩形*****************************/
    //1.获取图形上下文,即画板
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制图形
    CGContextAddRect(ctx, CGRectMake(10, 10, 40, 40));
    //3.设置相关属性
    [[UIColor redColor] setStroke];    // 颜色 CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
    CGContextSetLineWidth(ctx, 5);      //线条到宽度
    //4.渲染到画板上
    CGContextStrokePath(ctx);           //空心的
    

    /*****************************圆弧/圆*****************************/
    //1.获取图形上下文,即画板
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制图形
    CGContextAddArc(ctx, 100, 30, 30, 0, M_PI, 0);         //最后一个参数表示方向(顺时针或者逆时针)
    //3.设置相关属性
    [[UIColor redColor] set];           //填充色fill,线条色stroke都是一样的
    CGContextSetLineWidth(ctx, 5);      //线条到宽度
    //4.渲染到画板上
    CGContextStrokePath(ctx);           //空心的
    //CGContextFillPath(ctx);           //填充实心的 半圆
    

    /*****************************椭圆*****************************/
    //1.获取图形上下文,即画板
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制图形
    CGContextAddEllipseInRect(ctx, CGRectMake(150, 10, 80, 40));        //在矩形内绘制椭圆,宽度和高度相等则为圆形
    //3.设置相关属性
    [[UIColor redColor] set];       
    //4.渲染到画板上
    CGContextStrokePath(ctx);            //空心的
    //CGContextFillPath(ctx);            //填充
    

    /*****************************直线*****************************/
    //1.获取图形上下文,即画板
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制图形
    CGContextMoveToPoint(ctx, 10, 100);                     //起点
    CGContextAddLineToPoint(ctx, kScreenWidth-10, 100);     //其他点
    //3.设置相关属性
    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);            //RGB类型的颜色
    CGContextSetLineCap(ctx, kCGLineCapSquare);             //起点和重点
    CGContextSetLineJoin(ctx, kCGLineJoinBevel);            //转角
    CGContextSetLineWidth(ctx, 5);                          //线条的宽度
    CGContextStrokePath(ctx);    //直线只能绘制空心的,不能调用CGContextFillPath(ctx)
    

    /*****************************不规则图形*****************************/
    //1.获取图形上下文,即画板
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制图形
    CGContextMoveToPoint(ctx, 20, 150);             //设置起点                     
    CGContextAddLineToPoint(ctx, 100, 180);         //
    CGContextClosePath(ctx);                        //合并路径
    //3.设置相关属性
    CGContextSetLineWidth(ctx, 5);                  //线宽
    CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1);    //RGB类型的颜色
    CGContextSetLineCap(ctx, kCGLineCapSquare);     //终点样式
    CGContextSetLineJoin(ctx, kCGLineJoinBevel);    //连接点样式
    //[[UIColor redColor] setFill];  
    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);  //设置填充色
    //[[UIColor redColor] setStroke];  
    CGContextSetStrokeColorWithColor(ctx, [UIColor brownColor].CGColor);  //路径颜色
    /*
     kCGPathFill,           //填充
     kCGPathEOFill,        
     kCGPathStroke,         //线条
     kCGPathFillStroke,     //线条+填充
     kCGPathEOFillStroke
    */
    CGContextDrawPath(ctx, kCGPathFillStroke);      //fill  and  stroke
    

    /*****************************绘制图片*****************************/
     UIImage *img = [UIImage imageNamed:@"QQ"];
    [img drawAtPoint:CGPointMake( 150, 125)];    //绘制到指定的点,图片size
    //[img drawInRect:CGRectMake(120, 140, img.size.width, img.size.height)];       //指定位置大小
    //[img drawAsPatternInRect:CGRectMake(0, 0, kScreenWidth, kScreenHeight/2.0)];      //多个平铺
    

    /*****************************绘制文字*****************************/
    NSString *str = @"少年不识愁滋味,为赋新词强说愁\n而今识得愁滋味,却道天凉好个秋";
    //设置文字属性
    NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
    style.alignment = NSTextAlignmentCenter;
    NSDictionary *dic = @{NSForegroundColorAttributeName:[UIColor redColor],
                              NSFontAttributeName:[UIFont systemFontOfSize:18],
                              NSParagraphStyleAttributeName:style};
    //绘制
    CGSize size = [str sizeWithAttributes:dic];
    CGRect strRect = CGRectMake((kScreenWidth-size.width)/2.0, 200, size.width, size.height);
    [str drawWithRect:strRect options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil];
    

    三、应用

    图例

    样式

    Demo地址传送门

    相关文章

      网友评论

        本文标题:绘制简单图形---CGContextRef篇

        本文链接:https://www.haomeiwen.com/subject/zckdkxtx.html