使用CoreGraphics绘制图形

以前花过一些时间看了CoreAnimation 的一些东西，在使用CoreAnimation 的时候，知道绘制路径要使用UIBezierPath ,颜色要设置成CGColor ,图片要设置成CGImage 。为什么不设置成UIColor ,UIImage 而要设置成CGColor ，CGImage 呢，不知道～只知道就这么设置就对了。知其然，却不知其所以然。后来通过搜索知道了CoreGraphics 这么个框架，明白了CGColor ，CGImage 都是这个框架里面的内容。CoreAnimation 是一个跨平台的动画框架，它里面的类都是以CA开头的；所以，没错，CoreGraphics 是一个跨平台的图形框架，它的类都是CG开头的，CGRect ,CGPoint 等都是它里面的内容。

UIKit是一个iOS的专有框架，我们通常使用的UIButton,UILabel等控件都是UIKit里边的内容，而UIKit是基于CoreGraphics实现的，也就是控件的显示都是通过CoreGraphics完成的，UIKit是对它的一个封装，所以对图形显示功能有更高要求的话，还是推荐使用CoreGraphics。

绘制一般图形文字：获取图形上下文要在drawRect：方法中使用UIGraphicsGetCurrentContext()获取，这方法也只能在drawRect：方法中才能获取上下文。
使用CoreGraphics绘制一个不封闭的矩形：

    //1.获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, 100, 100);
    CGPathAddLineToPoint(path, nil, 100, 200);
    CGPathAddLineToPoint(path, nil, 300, 200);
    CGPathAddLineToPoint(path, nil, 300, 100);
    //3.添加路径
    CGContextAddPath(context, path);
    //4.设置显示属性
    CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1);   //路径颜色
    CGContextSetRGBFillColor(context, 0, 0, 1.0, 1);     //设置填充色
    CGContextSetLineCap(context, kCGLineCapRound);       //路径端点样式
    CGContextSetLineJoin(context, kCGLineJoinRound);     //路径拐点样式
    CGContextSetLineWidth(context, 5);                   //路径宽度
    //5.绘制图形
    /** CGPathDrawingMode填充模式
     *  kCGPathFill          不绘制边框，只绘制填充
     *  kCGPathEOFill        奇偶规则绘制填充
     *  kCGPathStroke        不绘制填充，只绘制边框
     *  kCGPathFillStroke    绘制边框和填充
     *  kCGPathEOFillStroke  奇偶规则绘制边框和填充
     */
    CGContextDrawPath(context, kCGPathFillStroke);
    //6.释放路径
    CGPathRelease(path);

graphicsView1.png

创建添加上下文内容可以简化，上面的图形的代码简化后为：

    CGContextRef context1 = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(context1, 100, 100);
    CGContextAddLineToPoint(context1, 100, 200);
    CGContextAddLineToPoint(context1, 300, 200);
    CGContextAddLineToPoint(context1, 300, 100);
    CGContextSetLineWidth(context1, 5);
    CGContextSetLineCap(context1, kCGLineCapRound);
    CGContextSetLineJoin(context1, kCGLineJoinRound);
    [[UIColor redColor] setStroke];
    [[UIColor blueColor] setFill];
    CGContextDrawPath(context1, kCGPathFillStroke);

绘制一个矩形

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect squareRect = CGRectMake(100, 100, 200, 80);
    CGContextAddRect(context, squareRect);
    [[UIColor redColor] setStroke];
    [[UIColor blueColor] setFill];
    CGContextSetLineWidth(context, 2);
    CGContextDrawPath(context, kCGPathFillStroke);

graphicsView2.png

绘制一个椭圆

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect ellipseRect = CGRectMake(100, 100, 200, 80);
    CGContextAddEllipseInRect(context, ellipseRect);
    [[UIColor blueColor] setFill];
    CGContextDrawPath(context, kCGPathFill);

graphicsView3.png

绘制一个弧形

    CGContextRef context = UIGraphicsGetCurrentContext();
    /*
     x:弧心x坐标
     y:弧心y坐标
     radius:半径
     startAngle:圆弧起始角度
     endAngle:圆弧终止角度
     clockwise:1为逆时针绘制，0为顺时针绘制
     */
    CGContextAddArc(context, [UIScreen mainScreen].bounds.size.width/2, 200, 80, -M_PI, 0, 0);
    [[UIColor redColor] setStroke];
    [[UIColor yellowColor] setFill];
    CGContextSetLineWidth(context, 5);
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextDrawPath(context, kCGPathFillStroke);

graphicsView4.png

绘制贝塞尔曲线

    CGContextRef context = UIGraphicsGetCurrentContext();
    //二次贝塞尔曲线
    CGContextMoveToPoint(context, 100, 100);
    /*
     cpx:控制点x坐标
     cpy:控制点y坐标
     x:结束点x坐标
     y:结束点y坐标
     */
    CGContextAddQuadCurveToPoint(context, 150, 0, 300, 100);
    //三次贝塞尔曲线
    CGContextMoveToPoint(context, 100, 200);
    /*
     cp1x:第一个控制点x坐标
     cp1y:第一个控制点y坐标
     cp2x:第二个控制点x坐标
     cp2y:第二个控制点y坐标
     x:结束点x坐标
     y:结束点y坐标
     */
    CGContextAddCurveToPoint(context, 150, 100, 250, 300, 300, 200);
    [[UIColor redColor] setStroke];
    CGContextSetLineWidth(context, 3);
    CGContextDrawPath(context, kCGPathStroke);

graphicsView5.png

绘制文字

    NSString *contextStr = @"You don't know about real loss……'cause that only occurs when you love something more than you love yourself. I doubt you've ever dared to love anybody that much. ";
    CGRect textRect = CGRectMake(80, 80, [UIScreen mainScreen].bounds.size.width-160, 120);
    UIFont *textFont = [UIFont systemFontOfSize:15];
    UIColor *textColor = [UIColor orangeColor];
    [contextStr drawInRect:textRect withAttributes:@{NSFontAttributeName:textFont,NSForegroundColorAttributeName:textColor}];

graphicsView6.png

绘制图片

    UIImage *img = [UIImage imageNamed:@"ss(4)"];
    //从一点开始绘制，绘制的尺寸就是图片的尺寸
    [img drawAtPoint:CGPointMake(0, 20)];
    //绘制在指定区域，图片会拉伸
    [img drawInRect:CGRectMake(0, 280, [UIScreen mainScreen].bounds.size.width, 100)];
    //平铺绘制
    [img drawAsPatternInRect:CGRectMake(0, 430, [UIScreen mainScreen].bounds.size.width/2-5, 80)];
    [img drawAsPatternInRect:CGRectMake([UIScreen mainScreen].bounds.size.width/2+5, 430, [UIScreen mainScreen].bounds.size.width/2, 80)];

graphicsView7.png

上下文变换

    CGContextRef context = UIGraphicsGetCurrentContext();
    //平移
    CGContextTranslateCTM(context, 100, 50);
    //缩放
    CGContextScaleCTM(context, 0.7, 0.7);
    //旋转
    CGContextRotateCTM(context, M_PI_4/2);
    UIImage *img = [UIImage imageNamed:@"ss(4)"];
    [img drawInRect:CGRectMake(0, 0, 300, 160)];

graphicsView8.png

绘制颜色渐变的图层

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat compoents[12]={
        248.0/255.0,86.0/255.0,86.0/255.0,1,
        249.0/255.0,127.0/255.0,127.0/255.0,1,
        1.0,1.0,1.0,1
    };
    CGFloat locations[3]={0,0.3,1.0};
    /*
     space:颜色空间
     components:颜色数组，RGB颜色空间下，每四个数表示一种颜色（red,green,blue,alpha）
     locations:每一种颜色的位置
     count:渐变个数，和locations个数相同
    */
    CGGradientRef gradient= CGGradientCreateWithColorComponents(colorSpace, compoents, locations, 3);
    

//线性渐变
    /*
     gradient:渐变色
     startPoint:起始点
     endPoint:终点
     options:绘制方式(kCGGradientDrawsBeforeStartLocation:起始点之前就绘制，终点之后不再绘制
                     kCGGradientDrawsAfterEndLocation:起始点之前不进行绘制，终点之后继续绘制)
     */
    CGContextDrawLinearGradient(context, gradient, CGPointMake(50, 0), CGPointMake(300, 0), kCGGradientDrawsAfterEndLocation);


//    //径向渐变
//    /*
//     gradient:渐变色
//     startCenter:起始点
//     startRadius:起始点半径
//     endCenter:结束点
//     endRadius:结束点半径
//     options:绘制方式(kCGGradientDrawsBeforeStartLocation:起始点之前就绘制，终点之后不再绘制
//                     kCGGradientDrawsAfterEndLocation:起始点之前不进行绘制，终点之后继续绘制)
//     */
//    CGContextDrawRadialGradient(context, gradient, CGPointMake(200, 200),100, CGPointMake(200, 200), 150, kCGGradientDrawsBeforeStartLocation);
    CGColorSpaceRelease(colorSpace);

graphicsView9.png graphicsView10.png

参考链接：
https://developer.apple.com/documentation/coregraphics
http://www.cnblogs.com/kenshincui/p/3959951.html