iOS的Quartz2D篇——基本图形的绘制

一、如何利用Quartz2D绘制东西到view上？

首先，得有图形上下文Context，因为它能保存绘图信息，并且决定着绘制到什么地方去

其次，那个图形上下文必须跟view相关联，才能将内容绘制到view上面

 

二、自定义图形的基本步骤

1、新建一个类，继承自UIView

2、实现- (void)drawRect:(CGRect)rect方法，然后在这个方法中

2.1取得跟当前view相关联的图形上下文

2.2绘制相应的图形内容

2.3利用图形上下文将绘制的所有内容渲染显示到view上面

 

三、基本图形的绘制

1、直线

- (void)drawRect:(CGRect)rect
{
    /**   一、画直线：*/
    //    1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //    2、绘制图形
    //    2.1起点
    CGContextMoveToPoint(ctx, 50, 100);
    //    2.2终点
    CGContextAddLineToPoint(ctx, 250, 100);
    
    
    CGContextAddLineToPoint(ctx, 250, 150);
    //    2.3颜色
    [[UIColor blueColor] set];
    //    2.4宽度
    CGContextSetLineWidth(ctx, 10);
    //    2.5起点终点的样式
    //    kCGLineCapButt,直角
    //    kCGLineCapRound, 圆弧
    //    kCGLineCapSquare 正方形  
    CGContextSetLineCap(ctx, kCGLineCapRound);
    
    //    2.6拐角样式
    //    kCGLineJoinMiter：直角
    //    kCGLineJoinBevel:斜面
    //    kCGLineJoinRound：圆弧
    CGContextSetLineJoin(ctx, kCGLineJoinBevel);
    
    //   3、渲染直线（使用空心的线，直线不用实心的）：
//    CGContextFillPath(ctx);
    CGContextStrokePath(ctx);
    
}

2、四边形

- (void)drawRect:(CGRect)rect
{

    /**  二、画四边形：
     思路一：设置四个点，依次连接，最后用closePath闭合
     思路二：直接用CGContextAddRect方法，传递起点和宽高就好；但只能画正四边形*/
    
    //    1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    /* 方法一：
     //    2、绘制图形
     //    2.1第一个点
     CGContextMoveToPoint(ctx, 50, 100);
     //    2.2第二个点
     CGContextAddLineToPoint(ctx, 50, 200);
     //    2.3第三个点
     CGContextAddLineToPoint(ctx, 250, 200);
     //    2.4第4个点
     CGContextAddLineToPoint(ctx, 250, 100);
     //    2.4闭合
     CGContextClosePath(ctx);
     */
    
    //    方法二：
    CGContextAddRect(ctx, CGRectMake(100, 100, 100, 100));
    
    //    2.5颜色
    [[UIColor purpleColor] set];
    
    //   3、渲染可以实心：
    CGContextFillPath(ctx);
}

三、椭圆

- (void)test3Ellipse
{
    /**  三、画椭圆 和圆：
     思路：直接用CGContextAddEllipseInRect方法，传递起点和宽高就好；但只能画正四边形*/
    
    //    1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //    2、椭圆 宽 ！= 高
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 200, 100));
    
    //    3、圆： 宽 = 高
    CGContextAddEllipseInRect(ctx, CGRectMake(100, 300, 100, 100));
    
    //    2.5颜色
    [[UIColor blueColor] set];
    
    //   3、渲染可以实心：！注意：要让两个图形的颜色不一样，就需要单独渲染，不能共用一个渲染器
    CGContextFillPath(ctx);
　　
    
}

4、圆弧

- (void)test4AngleLine
{
    /**  四、圆弧：
     思路：直接用CGContextAddArc*/
    
    //    1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.画圆弧CGContextAddArc方法的参数：
    // x/y 圆心
    // radius 半径
    // startAngle 开始的弧度
    // endAngle 结束的弧度
    // clockwise 画圆弧的方向 (0 顺时针, 1 逆时针)
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
    CGContextAddArc(ctx, 150, 100, 50, 0, M_PI, 1);
    //    2.5颜色
    [[UIColor greenColor] set];
    
    //   3、渲染
    CGContextStrokePath(ctx);
}

5、饼状图

- (void)test5Cake
{
    /** 五、画饼状图
     思路：直接先画直线，之后接着最后的点画一个弧线，最后close*/
    
    //    1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //
    // 2.1画线
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    // 2.2画圆弧
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1);
    
    // 2.3关闭路径
    CGContextClosePath(ctx);
    
    // 2.4颜色
    [[UIColor yellowColor] set];
    
    //   3、渲染
    CGContextFillPath(ctx);
}