iOS開發UI篇—Quartz2D簡單使用（一）

iOS開發UI篇—Quartz2D簡單使用（一）

一、畫直線

代碼：

 1 //
 2 //  YYlineview.m
 3 //  03-畫直線
 4 //
 5 //  Created by apple on 14-6-9.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYlineview.h"
10 
11 @implementation YYlineview
12 
13 
14 // 當自定義view第一次顯示出來的時候就會調用drawRect方法
15 - (void)drawRect:(CGRect)rect
16 {
17 
18     // 1.取得和當前視圖相關聯的圖形上下文(因爲圖形上下文決定繪製的輸出目標)/
19     // 如果是在drawRect方法中調用UIGraphicsGetCurrentContext方法獲取出來的就是Layer的上下文
20     CGContextRef  ctx=UIGraphicsGetCurrentContext();//不需要*,同id
21     
22     // 2.繪圖(繪製直線), 保存繪圖信息
23     // 設置起點
24     CGContextMoveToPoint(ctx, 20, 100);
25     //設置終點
26     CGContextAddLineToPoint(ctx, 300, 100);
27     
28     
29     //設置繪圖的狀態
30     //設置線條的顏色爲藍色
31     CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
32     //設置線條的寬度
33     CGContextSetLineWidth(ctx, 15);
34     //設置線條起點和終點的樣式爲圓角
35     CGContextSetLineCap(ctx, kCGLineCapRound);
36     //設置線條的轉角的樣式爲圓角
37     CGContextSetLineJoin(ctx, kCGLineJoinRound);
38     //3.渲染（繪製出一條空心的線）
39     CGContextStrokePath(ctx);
40     
41 //    //注意線條不能渲染爲實心的
42 //    CGContextFillPath(ctx);
43     
44     
45     
46     //設置第二條線
47     //設置第二條線的起點
48     CGContextMoveToPoint(ctx, 50, 200);
49     //設置第二天線的終點(自動把上一條直線的終點當做起點)
50     CGContextAddLineToPoint(ctx, 300, 60);
51     
52     //設置繪圖的狀態
53 //    CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);
54     //第二種設置顏色的方式
55     [[UIColor grayColor] set];
56     //設置線條的寬度
57     CGContextSetLineWidth(ctx, 10);
58     //設置線條的起點和終點的樣式
59     CGContextSetLineCap(ctx, kCGLineCapButt);
60     
61     //渲染第二條線的圖形到view上
62     //繪製一條空心的線
63     CGContextStrokePath(ctx);
64 }
65 
66 
67 @end

效果：

二、畫三角形

代碼：

 1 //
 2 //  YYrectview.m
 3 //  02-畫三角形
 4 //
 5 //  Created by 孔醫己 on 14-6-10.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import "YYrectview.h"
10 
11 @implementation YYrectview
12 
13 
14 - (void)drawRect:(CGRect)rect
15 {
16     //1.獲得圖形上下文
17     CGContextRef ctx=UIGraphicsGetCurrentContext();
18     
19     //2.繪製三角形
20     //設置起點
21     CGContextMoveToPoint(ctx, 20, 100);
22     //設置第二個點
23     CGContextAddLineToPoint(ctx, 40, 300);
24     //設置第三個點
25     CGContextAddLineToPoint(ctx, 200, 200);
26     //設置終點
27 //     CGContextAddLineToPoint(ctx, 20, 100);
28     //關閉起點和終點
29     CGContextClosePath(ctx);
30     
31     // 3.渲染圖形到layer上
32     CGContextStrokePath(ctx);
33     
34 }
35 
36 
37 @end

效果：

提示：關閉起點和終點  CGContextClosePath(ctx);

三、畫四邊形

代碼：

 1 //
 2 //  YYrect.m
 3 //  03-畫四邊形
 4 //
 5 //  Created by 孔醫己 on 14-6-10.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import "YYrect.h"
10 
11 @implementation YYrect
12 
13 
14 - (void)drawRect:(CGRect)rect
15 {
16 
17     //1.獲取圖形上下文
18     CGContextRef ctx=UIGraphicsGetCurrentContext();
19     //2.畫四邊形
20     CGContextAddRect(ctx, CGRectMake(20, 20, 150, 100));
21     
22     // 如果要設置繪圖的狀態必須在渲染之前
23     //    CGContextSetRGBStrokeColor(ctx, 1.0, 0, 0, 1.0);
24     // 繪製什麼類型的圖形(空心或者實心).就要通過什麼類型的方法設置狀態
25     //    CGContextSetRGBFillColor(ctx, 1.0, 0, 0, 1.0);
26     
27     // 調用OC的方法設置繪圖的顏色
28     //    [[UIColor purpleColor] setFill];
29     //    [[UIColor blueColor] setStroke];
30     // 調用OC的方法設置繪圖顏色(同時設置了實心和空心)
31     //    [[UIColor greenColor] set];
32     [[UIColor colorWithRed:1.0 green:0 blue:0 alpha:1.0] set];
33     
34     
35     //3.渲染圖形到layer上
36     //空心的
37     CGContextStrokePath(ctx);
38     //實心的
39 //    CGContextFillPath(ctx);
40     
41 }
42 
43 
44 @end

提示：如果要設置繪圖的狀態必須在渲染之前。

效果（實心和空心）：

      

四、畫圓

代碼1：

- (void)drawRect:(CGRect)rect
{

    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 畫圓
    CGContextAddArc(ctx, 100, 100, 50, 0, 2 * M_PI, 0);

    // 3.渲染 (注意, 畫線只能通過空心來畫)
//    CGContextFillPath(ctx);
    CGContextStrokePath(ctx);
    
}

效果：

代碼2：

 // 畫圓
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.畫圓
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 50, 50));
    
    [[UIColor greenColor] set];
    
    // 3.渲染
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果：

代碼3：

// 畫橢圓
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.畫圓
    CGContextAddEllipseInRect(ctx, CGRectMake(50, 100, 100, 230));
    
    [[UIColor purpleColor] set];
    
    // 3.渲染
    //    CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果：

五、畫圓弧

代碼1：

    // 畫圓弧
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.畫圓弧
    // x/y 圓心
    // radius 半徑
    // startAngle 開始的弧度
    // endAngle 結束的弧度
    // clockwise 畫圓弧的方向 (0 順時針, 1 逆時針)
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI_2, 0);
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    CGContextClosePath(ctx);
    
    // 3.渲染
    //     CGContextStrokePath(ctx);
    CGContextFillPath(ctx);

效果：

代碼2：

    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2.畫餅狀圖
    // 畫線
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 100, 150);
    // 畫圓弧
    CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 0);
    //    CGContextAddArc(ctx, 100, 100, 50, -M_PI, M_PI_2, 1);
    
    // 關閉路徑
    CGContextClosePath(ctx);
    [[UIColor brownColor]set];
    
    
    // 3.渲染 (注意, 畫線只能通過空心來畫)
    CGContextFillPath(ctx);
    //    CGContextStrokePath(ctx);

效果：