iOS开发:Quartz2D绘图

首先，要了解图形上下文CGContextRef，图形上下文可以理解为一块画布，我们要在画布上进行绘画，然后UIView相当于画的支架，画布要贴在支架上展示。
所以，既然CGContextRef是画布，那么我们就要有一块画布，我们获取画布就是在UIView的drawRect方法里。

首先创建一个继承UIView的子类，.m文件里drawRect方法系统注释掉了。
将其解除注释，然后就可以在drawRect方法里进行绘图！

1、绘制直线

    //1、获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、先起点、连线到下一点...
    CGContextMoveToPoint(ctx, 50, 10);
    CGContextAddLineToPoint(ctx, 50, 70);
    CGContextAddLineToPoint(ctx, 70, 100);
    //设置线宽
    CGContextSetLineWidth(ctx, 5);
    //设置起点和终点的样式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //设置转折点的样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    //设置线条颜色方法一
    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1);
    //设置线条颜色方法二
    [[UIColor redColor] setStroke];
    //3、绘制
    CGContextStrokePath(ctx);

2、绘制三角形

    //1、获取图形上下文
    CGContextRef ctx0 = UIGraphicsGetCurrentContext();
    //2、连上三个点
    CGContextMoveToPoint(ctx0, 10, 150);
    CGContextAddLineToPoint(ctx0, 50, 200);
    CGContextAddLineToPoint(ctx0, 25, 250);
    //3、首尾相连
    CGContextClosePath(ctx0);
    //4、绘制
    CGContextStrokePath(ctx0);

3、绘制矩形

    //1、获取图形上下文
    CGContextRef ctx1 = UIGraphicsGetCurrentContext();
    //2、设置矩形位置
    CGContextAddRect(ctx1, CGRectMake(200, 300, 100, 150));
    //3、设置填充颜色
    [[UIColor redColor] setFill];
    //4、绘制
    CGContextFillPath(ctx1);

4、绘制圆形

    //1、获取图形上下文
    CGContextRef ctx2 = UIGraphicsGetCurrentContext();
    //2、设置圆形位置(宽高不一样则为椭圆)
    CGContextAddEllipseInRect(ctx2, CGRectMake(200, 50, 100, 100));
    //3、绘制
    CGContextFillPath(ctx2);

5、绘制弧线

    //1、获取图形上下文
    CGContextRef ctx3 = UIGraphicsGetCurrentContext();
    //2、设置弧线位置(上下文, 圆心x, 圆心y, 半径, 开始角度, 结束角度, 0代表顺时针1代表逆时针)
    CGContextAddArc(ctx3, 300, 200, 50, M_PI, M_PI_2, 1);
    //3、绘制
    CGContextStrokePath(ctx3);

6、绘制虚线

    //画虚线(还有用CAShapeLayer也可以画虚线)
    //1、获取图形上下文
    CGContextRef ctx4 = UIGraphicsGetCurrentContext();
    //设置颜色
    CGContextSetStrokeColorWithColor(ctx4, [UIColor redColor].CGColor);
    //设置线宽
    CGContextSetLineWidth(ctx4, 2.0);
    /* 2、设置虚线参数
    c 绘制的context，这个不用多说；
    phase，第一个虚线段从哪里开始，例如传入3，则从第三个单位开始；
    lengths,一个C数组，表示绘制部分和空白部分的分配。例如传入[2,2],则绘制2个单位，然后空白两个单位，以此重复；
    count lengths的数量；
     */
    CGFloat lengths[] = {5};
    CGContextSetLineDash(ctx4, 0, lengths, 1);
    //设置线段位置
    CGContextMoveToPoint(ctx4,150,150);
    CGContextAddLineToPoint(ctx4, 150, 300);
    //3、绘制
    CGContextStrokePath(ctx4);

7、绘制曲线

    //画曲线
    //1、获取图形上下文
    CGContextRef ctx5 = UIGraphicsGetCurrentContext();
    //2、创建路径对象
    UIBezierPath *path = [UIBezierPath bezierPath];
    //3、设置起点位置
    [path moveToPoint:CGPointMake(50, 280)];
    //4、添加一根曲线到某点(三次曲线用addCurveToPoint,二次曲线用addQuadCurveToPoint)
    [path addQuadCurveToPoint:CGPointMake(250, 280) controlPoint:CGPointMake(100, 100)];
    //5、将绘制的内容添加到上下文中
    CGContextAddPath(ctx5, path.CGPath);
    //6、渲染
    CGContextStrokePath(ctx5);

8、Translate(移动)、Rotate(旋转)、Scale(缩放)

    //移动
    //1、获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、设置需要移动到的新坐标点(必须要在原图设置前)
    CGContextTranslateCTM(ctx, 10, 10);
    //3、设置原图坐标位置
    CGContextAddRect(ctx, CGRectMake(0, 0, 100, 100));
    //4、渲染
    CGContextFillPath(ctx);

    //旋转
    //1、获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、设置需要旋转的角度(必须要在原图设置前)
    CGContextRotateCTM(ctx, M_PI_4);
    //3、设置原图坐标位置
    CGContextAddRect(ctx, CGRectMake(100, 0, 40, 5));
    //4、渲染
    CGContextFillPath(ctx);

    //缩放
    //1、获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、设置缩放比例(缩放体现(100,100,100,100)---->(50,10,50,10))
    CGContextScaleCTM(ctx, 0.5, 0.1);
    //3、设置原图坐标位置
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    //4、渲染
    CGContextFillPath(ctx);

9、Shadow(阴影)和Gradient(渐变)

阴影

    //阴影
    //1、获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、添加一个矩形
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    //3、设置阴影方位(ctx,(x向偏移量,y向偏移量), blur 非负数，决定阴影的模糊程度，数越大越模糊)
    CGContextSetShadow(ctx, CGSizeMake(-10.0, 10.0), 1.0);
    //4、渲染
    CGContextFillPath(ctx);

渐变

渐变就是从一种颜色逐渐变换为另一种颜色：
Quart提供了两种渐变模型
1、axial gradient：线性渐变，使用的时候设置好两个顶点的颜色（也可以设置中间过渡色）
2、radial gradient ：可以实现一个圆到另一个圆的渐变或者一个点到另一个点的渐变

两种渐变的绘制模型:
CGShading － 使用这种数据类型需要自己定义CFFunction来计算每一个点的渐变颜色，较为复杂，但是能够更灵活的绘制。
CGGradient－ 使用这种数据类型只需要制定两个顶点的颜色，以及绘制模式，其余的Quartz会给绘制，但是渐变的数学模型不灵活。

    CGContextRef context = UIGraphicsGetCurrentContext();
    //用CGGradient绘制
    CGColorSpaceRef deviceRGB = CGColorSpaceCreateDeviceRGB();
    size_t num_of_locations = 2;
    CGFloat locations[2] = {0.0,1.0};
    CGFloat components[8] = {1.0, 0.0, 0.0, 1.0,  // 红色
        0.0, 1.0, 0.0, 1.0};//绿色
    CGGradientRef gradient = CGGradientCreateWithColorComponents(deviceRGB, components, locations,num_of_locations);
    CGPoint startPoint = CGPointMake(0, 50);
    CGPoint endPoint = CGPointMake(0, 100);
    CGContextDrawLinearGradient(context,gradient,startPoint, endPoint,0);
    CGColorSpaceRelease(deviceRGB);
    CGGradientRelease(gradient);

10、复杂绘图(状态堆栈)

    //多图绘制(状态堆栈)
    //1、绘制第一图
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、保存状态，入栈
    CGContextSaveGState(ctx);
    CGContextAddRect(ctx, CGRectMake(10, 10, 50, 50));
    CGContextSetLineWidth(ctx, 5.0);
    CGContextFillPath(ctx);
    //3、推出栈（此时坐标系已经回到了最开始的状态）
    CGContextRestoreGState(ctx);
    //4、可以绘制第二图
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
    CGContextSetFillColorWithColor(ctx, [UIColor purpleColor].CGColor);
    CGContextFillPath(ctx);