iOS開發(fā)中Quartz2D繪圖路徑的使用以及條紋效果的實(shí)現(xiàn)
繪圖路徑
A.簡(jiǎn)單說明
在畫線的時(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ǔ)空間專門用來(lái)存儲(chǔ)繪圖信息，其實(shí)這塊空間就是CGMutablePathRef。
3.把路徑添加到上下文中。
代碼示例：
繪制一條直線的代碼：
//1.獲取圖形上下文
CGContextRef ctx=UIGraphicsGetCurrentContext();
//2.繪圖（畫線）
//設(shè)置起點(diǎn)
CGContextMoveToPoint(ctx, 20, 20);
//設(shè)置終點(diǎn)
CGContextAddLineToPoint(ctx, 200, 300);
//渲染
CGContextStrokePath(ctx);
上面的代碼和下面的代碼是等價(jià)的。
//1.獲取圖形上下文
CGContextRef ctx=UIGraphicsGetCurrentContext();
//2.繪圖
//2.1創(chuàng)建一條直線繪圖的路徑
//注意：但凡通過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。
代碼示例：
- (void)drawRect:(CGRect)rect
{
//1.獲取圖形上下文
CGContextRef ctx=UIGraphicsGetCurrentContext();
//2.繪圖
//2.a 畫一條直線
//2.a.1創(chuàng)建一條繪圖的路徑
//注意：但凡通過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畫一個(gè)圓
//2.b.1創(chuàng)建一條畫圓的繪圖路徑(注意這里是可變的，不是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);
}
效果：
提示：如果是畫線，那么就創(chuàng)建一條路徑（path）用來(lái)保存畫線的繪圖信息，如果又要重新畫一個(gè)圓，那么就可以創(chuàng)建一條新的路徑來(lái)專門保存畫圓的繪圖信息。
注意：
但凡通過quarzt2d中帶有creat/copy/retain方法創(chuàng)建出來(lái)的值都必須手動(dòng)的釋放
有兩種方法可以釋放前面創(chuàng)建的路徑：
（1）CGPathRelease(path);
（2）CFRelease(path);
說明：CFRelease屬于更底層的cocafoundation框架
PS：補(bǔ)充知識(shí)點(diǎn)：
畫四邊形的一些方法：
第一種方式：通過連接固定的點(diǎn)繪制四邊形
第二種方式：指定起點(diǎn)和寬高繪制四邊形
第三種方式：把第二種方式中的兩步合并成一步。
第四種方式（oc的方法）：繪制實(shí)心的四邊形，注意沒有空心的方法
第五種：畫根線，設(shè)置線條的寬度（通過這種方式可以畫斜的四邊形）
代碼示例：
//
// YYview.m
// 06-四邊形的五種畫法
//
// 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();
//第一種畫法,通過連接固定的點(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);
//第三種方式：二種的兩步合并成一步。
//畫空心的四邊形
// CGContextStrokeRect(ctx, CGRectMake(20, 20, 200, 100));
// //畫實(shí)心的四邊形
// CGContextFillRect(ctx, CGRectMake(20, 20, 200, 100));
//第四種方式（oc的方法）：繪制實(shí)心的四邊形，注意沒有空心的方法
UIRectFill(CGRectMake(20, 20, 200, 100));
//第五種方式：畫根線，設(shè)置線條的寬度（通過這種方式可以畫斜的四邊形）
// CGContextMoveToPoint(ctx, 20, 20);
// CGContextAddLineToPoint(ctx, 100, 200);
// CGContextSetLineWidth(ctx, 50);
// //注意，線條只能畫成是空心的
// CGContextStrokePath(ctx);
}
@end
第五種方法可以畫斜的四邊形。
信紙條紋
一、前導(dǎo)程序
新建一個(gè)項(xiàng)目，在主控制器文件中實(shí)現(xiàn)以下幾行代碼，就能輕松的完成圖片在視圖中的平鋪。
#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
效果：
二、實(shí)現(xiàn)信紙條紋的效果
利用上面的這種特性來(lái)做一個(gè)信紙的效果。
默認(rèn)的view上沒有分割線，要在view上加上分割線有兩種方式：
（1）讓美工做一張專門用來(lái)做背景的圖片，把圖片設(shè)置為背景。缺點(diǎn)：信的長(zhǎng)度不確定，所以背景圖片的長(zhǎng)度也難以確定。
（2）通過一張小的圖片來(lái)創(chuàng)建一個(gè)顏色，平鋪實(shí)現(xiàn)背景效果。
第一步：生成一張以后用以平鋪的小圖片。
畫矩形。
畫線條。
第二步：從上下文中取出圖片設(shè)置為背景。黑乎乎一片？（其他地方時(shí)透明的，控制器的顏色，如果不設(shè)置那么默認(rèn)為黑色的）
實(shí)現(xiàn)代碼：
//
// YYViewController.m
// 01-信紙條紋
//
// Created by 孔醫(yī)己 on 14-6-11.
// Copyright (c) 2014年 itcast. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 1.生成一張以后用于平鋪的小圖片
CGSize size = CGSizeMake(self.view.frame.size.width, 35);
UIGraphicsBeginImageContextWithOptions(size , NO, 0);
// 2.畫矩形
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat height = 35;
CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
[[UIColor whiteColor] set];
CGContextFillPath(ctx);
// 3.畫線條
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
效果：
三、應(yīng)用場(chǎng)景
完成一個(gè)簡(jiǎn)陋的電子書閱讀器
代碼：
//
// YYViewController.m
// 01-信紙條紋
//
// Created by 孔醫(yī)己 on 14-6-11.
// Copyright (c) 2014年 itcast. All rights reserved.
//
#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
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 1.生成一張以后用于平鋪的小圖片
CGSize size = CGSizeMake(self.view.frame.size.width, 26);
UIGraphicsBeginImageContextWithOptions(size , NO, 0);
// 2.畫矩形
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat height = 26;
CGContextAddRect(ctx, CGRectMake(0, 0, self.view.frame.size.width, height));
[[UIColor brownColor] set];
CGContextFillPath(ctx);
// 3.畫線條
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中的界面布局
實(shí)現(xiàn)的簡(jiǎn)單效果：
相關(guān)文章
分享一個(gè)關(guān)于Storyboard 跳轉(zhuǎn)與傳值
近日不忙，給大家分享一個(gè)關(guān)于storyboard跳轉(zhuǎn)傳值的相關(guān)知識(shí)，感興趣的朋友一起看看吧2015-12-12
這篇文章主要介紹了iOS實(shí)現(xiàn)圖片保存與搜索功能的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要給大家介紹了關(guān)于iOS橫屏彈鍵盤的高度錯(cuò)誤異常解決的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
關(guān)于打包上傳至AppStore，大家都認(rèn)為是最后一步了，其實(shí)到了這里往往會(huì)遇到很多的坑。對(duì)于踩過的坑我不想再踩第二遍，所以在此將我遇到的所有奇葩問題在此做一個(gè)記錄，當(dāng)作對(duì)自己的一個(gè)提醒，同時(shí)也分享給給位，需要的朋友可以參考下。2017-03-03
IOS開發(fā)自定義Button的外觀和交互行為示例詳解
這篇文章主要為大家介紹了IOS開發(fā)自定義Button的外觀和交互行為示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文主要給大家講述了制作一個(gè)仿IOS的越界回彈效果和左右滑動(dòng)功能,簡(jiǎn)易的側(cè)滑菜單控件，對(duì)此有興趣的朋友參考下學(xué)習(xí)下吧。2018-02-02
這篇文章主要介紹了iOS的UI開發(fā)中Button的基本編寫方法講解,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11
UITableView 實(shí)現(xiàn)汽車品牌（demo）
UITableView堪稱UIKit里面最復(fù)雜的一個(gè)控件了，使用起來(lái)不算難，但是要用好并不容易，當(dāng)使用的時(shí)候我們必須要考慮到后臺(tái)數(shù)據(jù)的設(shè)計(jì)，tableViewCell的設(shè)計(jì)和重用以及tableView的效率等問題，下面小編通過UITableView 實(shí)現(xiàn)汽車品牌，需要的朋友可以參考下2015-08-08
本文通過實(shí)例代碼給大家講解了iOS 設(shè)置View陰影效果，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
這篇文章主要為大家介紹了iOS開發(fā)xconfig和script腳本使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09