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);
}