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

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

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

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

 

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

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

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

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

2.2绘制相应的图形内容

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

 

3、基本图形的绘制

一、直线

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     /**   1、画直线：*/
 5     //    一、上下文
 6     CGContextRef ctx = UIGraphicsGetCurrentContext();
 7 
 8     //    二、绘制图形
 9     //    2.1起点
10     CGContextMoveToPoint(ctx, 50, 100);
11     //    2.2终点
12     CGContextAddLineToPoint(ctx, 250, 100);
13     
14     
15     CGContextAddLineToPoint(ctx, 250, 150);
16     //    2.3颜色
17     [[UIColor blueColor] set];
18     //    2.4宽度
19     CGContextSetLineWidth(ctx, 10);
20     //    2.5起点终点的样式
21     //    kCGLineCapButt,直角
22     //    kCGLineCapRound, 圆弧
23     //    kCGLineCapSquare 正方形  
25     CGContextSetLineCap(ctx, kCGLineCapRound);
26     
27     //    2.6拐角样式
28     //    kCGLineJoinMiter：直角
29     //    kCGLineJoinBevel:斜面
30     //    kCGLineJoinRound：圆弧
31     CGContextSetLineJoin(ctx, kCGLineJoinBevel);
32     
33     //   三、渲染直线（使用空心的线，直线不用实心的）：
34 //    CGContextFillPath(ctx);
35     CGContextStrokePath(ctx);
36     
37 }

 

二、四边形

- (void)drawRect:(CGRect)rect
{

    /**  2、画四边形：
     思路一：设置四个点，依次链接，最后用closePath闭合
     思路二：直接用CGContextAddRect方法，传递起点和宽高就好；但只能画正四边形*/
    
    //    一、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    /* 方法一：
     //    二、绘制图形
     //    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];
    
    //   三、渲染能够实心：
    CGContextFillPath(ctx);
}

 

3、椭圆

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

四、圆弧

- (void)test4AngleLine
{
    /**  4、圆弧：
     思路：直接用CGContextAddArc*/
    
    //    一、上下文
    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];
    
    //   三、渲染
    CGContextStrokePath(ctx);
}

 

五、饼状图

- (void)test5Cake
{
    /** 5、画饼状图
     思路：直接先画直线，以后接着最后的点画一个弧线，最后close*/
    
    //    一、上下文
    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];
    
    //   三、渲染
    CGContextFillPath(ctx);
}