iOS開(kāi)發(fā)中Quartz2D繪圖路徑的使用以及條紋效果的實(shí)現(xiàn)

更新時(shí)間：2015年11月30日 09:23:02 投稿：goldensun

這篇文章主要介紹了iOS開(kāi)發(fā)中Quartz2D繪圖路徑的使用以及條紋效果的實(shí)現(xiàn),代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下

繪圖路徑

A.簡(jiǎn)單說(shuō)明
在畫(huà)線的時(shí)候，方法的內(nèi)部默認(rèn)創(chuàng)建一個(gè)path。它把路徑都放到了path里面去。
1.創(chuàng)建路徑 cgmutablepathref 調(diào)用該方法相當(dāng)于創(chuàng)建了一個(gè)路徑，這個(gè)路徑用來(lái)保存繪圖信息。
2.把繪圖信息添加到路徑里邊。
以前的方法是點(diǎn)的位置添加到ctx（圖形上下文信息）中，ctx 默認(rèn)會(huì)在內(nèi)部創(chuàng)建一個(gè)path用來(lái)保存繪圖信息。
在圖形上下文中有一塊存儲(chǔ)空間專門(mén)用來(lái)存儲(chǔ)繪圖信息，其實(shí)這塊空間就是CGMutablePathRef。
3.把路徑添加到上下文中。
代碼示例：
繪制一條直線的代碼：

復(fù)制代碼代碼如下:

//1.獲取圖形上下文

    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.繪圖（畫(huà)線）

    //設(shè)置起點(diǎn)

    CGContextMoveToPoint(ctx, 20, 20);

    //設(shè)置終點(diǎn)

    CGContextAddLineToPoint(ctx, 200, 300);

    //渲染

    CGContextStrokePath(ctx);

上面的代碼和下面的代碼是等價(jià)的。

復(fù)制代碼代碼如下:

//1.獲取圖形上下文

    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.繪圖

    //2.1創(chuàng)建一條直線繪圖的路徑

    //注意：但凡通過(guò)Quartz2D中帶有creat/copy/retain方法創(chuàng)建出來(lái)的值都必須要釋放

    CGMutablePathRef path=CGPathCreateMutable();

    //2.2把繪圖信息添加到路徑里

    CGPathMoveToPoint(path, NULL, 20, 20);

    CGPathAddLineToPoint(path, NULL, 200, 300);

    //2.3把路徑添加到上下文中

    //把繪制直線的繪圖信息保存到圖形上下文中

    CGContextAddPath(ctx, path);

    //3.渲染

    CGContextStrokePath(ctx);

    //4.釋放前面創(chuàng)建的兩條路徑

    //第一種方法

    CGPathRelease(path);

    //第二種方法

    //    CFRelease(path);

}

B.直接使用path的好處：
第一種代碼的閱讀性不好，不便于區(qū)分。使用path，則一個(gè)path就代表一條路徑。
比如：如果要在上下文中繪制多個(gè)圖形，這種情況下建議使用path。
代碼示例：

復(fù)制代碼代碼如下:

- (void)drawRect:(CGRect)rect
{
//1.獲取圖形上下文
CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.繪圖
    //2.a 畫(huà)一條直線
    //2.a.1創(chuàng)建一條繪圖的路徑
    //注意：但凡通過(guò)Quartz2D中帶有creat/copy/retain方法創(chuàng)建出來(lái)的值都必須要釋放
    CGMutablePathRef path=CGPathCreateMutable();

    //2.a.2把繪圖信息添加到路徑里
    CGPathMoveToPoint(path, NULL, 20, 20);
    CGPathAddLineToPoint(path, NULL, 200, 300);

    //2.a.3把路徑添加到上下文中
    //把繪制直線的繪圖信息保存到圖形上下文中
    CGContextAddPath(ctx, path);


    //2.b畫(huà)一個(gè)圓
    //2.b.1創(chuàng)建一條畫(huà)圓的繪圖路徑(注意這里是可變的，不是CGPathRef)
    CGMutablePathRef path1=CGPathCreateMutable();

    //2.b.2把圓的繪圖信息添加到路徑里
    CGPathAddEllipseInRect(path1, NULL, CGRectMake(50, 50, 100, 100));

    //2.b.3把圓的路徑添加到圖形上下文中
    CGContextAddPath(ctx, path1);


    //3.渲染
    CGContextStrokePath(ctx);

    //4.釋放前面創(chuàng)建的兩條路徑
    //第一種方法
    CGPathRelease(path);
    CGPathRelease(path1);
    //第二種方法
//    CFRelease(path);
}

效果：

2015113091913221.png (640×960)

提示：如果是畫(huà)線，那么就創(chuàng)建一條路徑（path）用來(lái)保存畫(huà)線的繪圖信息，如果又要重新畫(huà)一個(gè)圓，那么就可以創(chuàng)建一條新的路徑來(lái)專門(mén)保存畫(huà)圓的繪圖信息。
注意：
但凡通過(guò)quarzt2d中帶有creat/copy/retain方法創(chuàng)建出來(lái)的值都必須手動(dòng)的釋放
有兩種方法可以釋放前面創(chuàng)建的路徑：
（1）CGPathRelease(path);
（2）CFRelease(path);
說(shuō)明：CFRelease屬于更底層的cocafoundation框架

PS：補(bǔ)充知識(shí)點(diǎn)：
畫(huà)四邊形的一些方法：
第一種方式：通過(guò)連接固定的點(diǎn)繪制四邊形
第二種方式：指定起點(diǎn)和寬高繪制四邊形
第三種方式：把第二種方式中的兩步合并成一步。
第四種方式（oc的方法）：繪制實(shí)心的四邊形，注意沒(méi)有空心的方法
第五種：畫(huà)根線，設(shè)置線條的寬度（通過(guò)這種方式可以畫(huà)斜的四邊形）
代碼示例：

復(fù)制代碼代碼如下:

//
// YYview.m
// 06-四邊形的五種畫(huà)法
//
// Created by apple on 14-6-11.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYview.h"

@implementation YYview

- (void)drawRect:(CGRect)rect
{
    //獲取圖形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //第一種畫(huà)法,通過(guò)連接固定的點(diǎn)繪制四邊形
//    CGContextMoveToPoint(ctx, 0, 20);
//    CGContextAddLineToPoint(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>);
//    CGContextAddLineToPoint(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>);
//    CGContextAddLineToPoint(<#CGContextRef c#>, <#CGFloat x#>, <#CGFloat y#>);

    //第二種方式：指定起點(diǎn)和寬高繪制四邊形
//    CGContextAddRect(ctx, CGRectMake(20, 20, 200, 100));
//    //渲染
//    CGContextStrokePath(ctx);

    //第三種方式：二種的兩步合并成一步。
    //畫(huà)空心的四邊形
//    CGContextStrokeRect(ctx, CGRectMake(20, 20, 200, 100));
//    //畫(huà)實(shí)心的四邊形
//    CGContextFillRect(ctx, CGRectMake(20, 20, 200, 100));

    //第四種方式（oc的方法）：繪制實(shí)心的四邊形，注意沒(méi)有空心的方法
    UIRectFill(CGRectMake(20, 20, 200, 100));

    //第五種方式：畫(huà)根線，設(shè)置線條的寬度（通過(guò)這種方式可以畫(huà)斜的四邊形）
//    CGContextMoveToPoint(ctx, 20, 20);
//    CGContextAddLineToPoint(ctx, 100, 200);
//    CGContextSetLineWidth(ctx, 50);
//    //注意，線條只能畫(huà)成是空心的
//    CGContextStrokePath(ctx);

}
@end

第五種方法可以畫(huà)斜的四邊形。

2015113091941176.png (151×245)

信紙條紋
一、前導(dǎo)程序

新建一個(gè)項(xiàng)目，在主控制器文件中實(shí)現(xiàn)以下幾行代碼，就能輕松的完成圖片在視圖中的平鋪。

復(fù)制代碼代碼如下:

#import "YYViewController.h"

@interface YYViewController ()

@end

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];

    UIImage *image=[UIImage imageNamed:@"me"];
    UIColor *color=[UIColor colorWithPatternImage:image];
    self.view.backgroundColor=color;
}

@end

效果：

2015113092000737.png (640×960)

二、實(shí)現(xiàn)信紙條紋的效果

利用上面的這種特性來(lái)做一個(gè)信紙的效果。
默認(rèn)的view上沒(méi)有分割線，要在view上加上分割線有兩種方式：
（1）讓美工做一張專門(mén)用來(lái)做背景的圖片，把圖片設(shè)置為背景。缺點(diǎn)：信的長(zhǎng)度不確定，所以背景圖片的長(zhǎng)度也難以確定。
（2）通過(guò)一張小的圖片來(lái)創(chuàng)建一個(gè)顏色，平鋪實(shí)現(xiàn)背景效果。

第一步：生成一張以后用以平鋪的小圖片。
畫(huà)矩形。
畫(huà)線條。
第二步：從上下文中取出圖片設(shè)置為背景。黑乎乎一片？（其他地方時(shí)透明的，控制器的顏色，如果不設(shè)置那么默認(rèn)為黑色的）
實(shí)現(xiàn)代碼：

復(fù)制代碼代碼如下:

//
// YYViewController.m
// 01-信紙條紋
//
// Created by 孔醫(yī)己 on 14-6-11.
// Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];

    // 1.生成一張以后用于平鋪的小圖片
    CGSize size = CGSizeMake(self.view.frame.size.width, 35);
    UIGraphicsBeginImageContextWithOptions(size , NO, 0);

    // 2.畫(huà)矩形
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGFloat height = 35;
    CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
    [[UIColor whiteColor] set];
    CGContextFillPath(ctx);

    // 3.畫(huà)線條

    CGFloat lineWidth = 2;
    CGFloat lineY = height - lineWidth;
    CGFloat lineX = 0;
    CGContextMoveToPoint(ctx, lineX, lineY);
    CGContextAddLineToPoint(ctx, 320, lineY);
    [[UIColor blackColor] set];
    CGContextStrokePath(ctx);


    UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
    UIColor *color=[UIColor colorWithPatternImage:image];
    self.view.backgroundColor=color;
}

@end

效果：

2015113092017649.png (640×960)

三、應(yīng)用場(chǎng)景

完成一個(gè)簡(jiǎn)陋的電子書(shū)閱讀器

代碼：

復(fù)制代碼代碼如下:

#import "YYViewController.h"

@interface YYViewController ()

@property (weak, nonatomic) IBOutlet UITextView *textview;
- (IBAction)perBtnClick:(UIButton *)sender;
- (IBAction)nextBtnClick:(UIButton *)sender;
@property(nonatomic,assign)int index;
@end

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];

    // 1.生成一張以后用于平鋪的小圖片
    CGSize size = CGSizeMake(self.view.frame.size.width, 26);
    UIGraphicsBeginImageContextWithOptions(size , NO, 0);

    // 2.畫(huà)矩形
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGFloat height = 26;
    CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
    [[UIColor brownColor] set];
    CGContextFillPath(ctx);

    // 3.畫(huà)線條

    CGFloat lineWidth = 2;
    CGFloat lineY = height - lineWidth;
    CGFloat lineX = 0;
    CGContextMoveToPoint(ctx, lineX, lineY);
    CGContextAddLineToPoint(ctx, 320, lineY);
    [[UIColor blackColor] set];
    CGContextStrokePath(ctx);


    UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
    UIColor *color=[UIColor colorWithPatternImage:image];
    //self.view.backgroundColor=color;
    self.textview.backgroundColor=color;
}

- (IBAction)perBtnClick:(UIButton *)sender {
    self.index--;
    self.textview.text=[NSString stringWithFormat:@"第%d頁(yè)",self.index];
    CATransition *ca = [[CATransition alloc] init];
    ca.type = @"pageCurl";

    [self.textview.layer addAnimation:ca forKey:nil];

}

- (IBAction)nextBtnClick:(UIButton *)sender {
    self.index++;
    self.textview.text=[NSString stringWithFormat:@"第%d頁(yè)",self.index];
    CATransition *ca = [[CATransition alloc] init];
    ca.type = @"pageCurl";

    [self.textview.layer addAnimation:ca forKey:nil];
}
@end

storyboard中的界面布局

2015113092038030.png (492×350)