iOS開(kāi)發(fā)中Quartz2D控制圓形縮放和實(shí)現(xiàn)刷幀效果
Quartz2D簡(jiǎn)要回顧
一、什么是Quartz2D
Quartz 2D是⼀個(gè)二維繪圖引擎,同時(shí)支持iOS和Mac系統(tǒng)
Quartz 2D能完成的工作：
繪制圖形 : 線條\三角形\矩形\圓\弧等
繪制文字
繪制\生成圖片(圖像)
讀取\生成PDF
截圖\裁剪圖片
自定義UI控件
二、Quartz2D在iOS開(kāi)發(fā)中的價(jià)值
為了便于搭建美觀的UI界面,iOS提供了UIKit框架,⾥⾯有各種各樣的UI控件
UILabel:顯⽰文字
UIImageView:顯示圖片
UIButton:同時(shí)顯示圖片和⽂字(能點(diǎn)擊)
利⽤UIKit框架提供的控件,拼拼湊湊,能搭建和現(xiàn)實(shí)一些簡(jiǎn)單、常見(jiàn)的UI界⾯
但是,有些UI界面極其復(fù)雜、⽽且⽐較個(gè)性化,⽤普通的UI控件無(wú)法實(shí)現(xiàn),這時(shí)可以利用Quartz2D技術(shù)將控件內(nèi)部的結(jié)構(gòu)畫(huà)出來(lái),自定義控件的樣子
其實(shí),iOS中⼤部分控件的內(nèi)容都是通過(guò)Quartz2D畫(huà)出來(lái)的
因此,Quartz2D在iOS開(kāi)發(fā)中很重要的⼀個(gè)價(jià)值是:自定義view(自定義UI控件)
三、圖形上下文
圖形上下文(Graphics Context):是一個(gè)CGContextRef類(lèi)型的數(shù)據(jù)
圖形上下文的作用:
(1)保存繪圖信息、繪圖狀態(tài)
(2)決定繪制的輸出目標(biāo)(繪制到什么地⽅去?) (輸出目標(biāo)可以是PDF⽂文件、Bitmap或者顯示器的窗口上)
相同的⼀套繪圖序列,指定不同的Graphics Context,就可將相同的圖像繪制到不同的目標(biāo)上
四、自定義view
如何利用Quartz2D⾃定義view?(⾃定義UI控件)
如何利用Quartz2D繪制東西到view上?
首先,得有圖形上下文,因?yàn)樗鼙４胬L圖信息,并且決定著繪制到什么地方去
其次,那個(gè)圖形上下⽂必須跟view相關(guān)聯(lián),才能將內(nèi)容繪制到view上面
⾃定義view的步驟:
(1)新建⼀個(gè)類(lèi),繼承自UIView
(2)實(shí)現(xiàn)-(void)drawRect:(CGRect)rect⽅法.然后在這個(gè)⽅方法中 :
1)取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文;
2)繪制相應(yīng)的圖形內(nèi)容
3)利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面
五、補(bǔ)充說(shuō)明
1.drawRect:
（1）為什么要實(shí)現(xiàn)drawRect:⽅法才能繪圖到view上?
因?yàn)樵赿rawRect:⽅法中才能取得跟view相關(guān)聯(lián)的圖形上下文
（2）drawRect:⽅法在什么時(shí)候被調(diào)用?
當(dāng)view第一次顯示到屏幕上時(shí)(被加到UIWindow上顯示出來(lái))
調(diào)用view的setNeedsDisplay或者setNeedsDisplayInRect:時(shí)
2.Quartz2D須知
- Quartz2D的API是純C語(yǔ)⾔言的
- Quartz2D的API來(lái)自于Core Graphics框架
- 數(shù)據(jù)類(lèi)型和函數(shù)基本都以CG作為前綴
- CGContextRef
- CGPathRef
- CGContextStrokePath(ctx);
3.drawRect:中取得的上下⽂文
在drawRect:方法中取得上下文后,就可以繪制東西到view上
View內(nèi)部有個(gè)layer(圖層)屬性,drawRect:方法中取得的是一個(gè)Layer Graphics Context,因此,繪制的東西其實(shí)是繪制到view的layer上去了
View之所以能顯示東西,完全是因?yàn)樗鼉?nèi)部的layer
通過(guò)slider控制圓的縮放
1.實(shí)現(xiàn)過(guò)程
新建一個(gè)項(xiàng)目，新建一個(gè)繼承自UIview的類(lèi)，并和storyboard中自定義的view進(jìn)行關(guān)聯(lián)。
界面搭建，如圖：
代碼示例：
YYViewController.m文件
//
// YYViewController.m
// 04-對(duì)圓進(jìn)行縮放
//
// Created by apple on 14-6-11.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
#import "YYview.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet YYview *circleView;
- (IBAction)valueChange:(UISlider *)sender;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)valueChange:(UISlider *)sender {
//當(dāng)值改變的時(shí)候，把值傳遞給view,改變圓的半徑
NSLog(@"%f",sender.value);
//把sender的值傳遞給自定義view，設(shè)置圓的半徑
self.circleView.radius=sender.value;
}
@end
YYview.h文件
//
// YYview.h
// 04-對(duì)圓進(jìn)行縮放
//
// Created by apple on 14-6-11.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface YYview : UIView
//提供一個(gè)屬性來(lái)接收外界傳入的半徑
@property(nonatomic,assign)float radius;
@end
YYview.m文件
//
// YYview.m
// 04-對(duì)圓進(jìn)行縮放
//
// Created by apple on 14-6-11.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYview.h"
@implementation YYview
//自定義view中的圓不顯示
//重寫(xiě)set方法，為半徑賦值
-(void)setRadius:(float)radius
{
_radius=radius;
//通知自定義的view重新繪制圖形
[self setNeedsDisplay];
}
//如果view是從xib或storyboard中創(chuàng)建出來(lái)的會(huì)先調(diào)用awakefromnib方法
- (void)awakeFromNib
{
//在這里為圓的半徑設(shè)定一個(gè)初始的值
self.radius = 20;
}
- (void)drawRect:(CGRect)rect
{
//1.獲取圖形上下文
CGContextRef ctx=UIGraphicsGetCurrentContext();
//2.繪圖
//在自定義的view中畫(huà)一個(gè)圓
CGContextAddArc(ctx, 100, 100, self.radius, 0, 2*M_PI, 0);
//設(shè)置圓的填充顏色
[[UIColor grayColor]set];
//3.渲染
// CGContextStrokePath(ctx);
CGContextFillPath(ctx);
}
@end
效果：
2.注意點(diǎn)：
drawRect:方法不能由我們自己手動(dòng)調(diào)用，只能由系統(tǒng)來(lái)調(diào)用。
drawRect:調(diào)用的時(shí)機(jī)：當(dāng)?shù)谝淮物@示或者一個(gè)重繪事件發(fā)生時(shí)調(diào)用。
setNeedsDisplay方法：重新繪制，調(diào)用這個(gè)方法就會(huì)通知自定義的view重新繪制畫(huà)面，調(diào)用drawRect:。
提示：當(dāng)一個(gè)view從xib或storyboard創(chuàng)建出來(lái)時(shí)，會(huì)調(diào)用awakefromnib方法。
3.補(bǔ)充
刷幀效果
說(shuō)明：把雪花狀的圖片繪制到view上，實(shí)現(xiàn)圖片在視圖中下落的效果。
1.實(shí)現(xiàn)代碼：
//
// YYview.m
// 05-刷幀動(dòng)畫(huà)
//
// Created by apple on 14-6-11.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYview.h"
//私有擴(kuò)展
@interface YYview ()
@property(nonatomic,assign)float imageY;
@end
@implementation YYview
-(id)initWithCoder:(NSCoder *)aDecoder
{
//請(qǐng)注意這里一定要先初始化父類(lèi)的構(gòu)造方法
if (self=[super initWithCoder:aDecoder]) {
NSLog(@"initWithCoder:");
//NSTimer一般用于定時(shí)的更新一些非界面上的數(shù)據(jù),告訴多久調(diào)用一次
//使用定時(shí)器,使用該定時(shí)器會(huì)出現(xiàn)卡頓的現(xiàn)象
// [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
// CADisplayLink刷幀，默認(rèn)每秒刷新60次
//該定時(shí)器創(chuàng)建之后，默認(rèn)是不會(huì)執(zhí)行的，需要把它加載到消息循環(huán)中
CADisplayLink *display= [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
[display addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
return self;
}
-(void)updateImage
{
//調(diào)用該方法重繪畫(huà)面
[self setNeedsDisplay];
}
-(void)awakeFromNib
{
NSLog(@"awakeFromNib");
}
- (void)drawRect:(CGRect)rect
{
//把圖片繪制到view上
//每次調(diào)用該方法對(duì)畫(huà)面進(jìn)行重繪時(shí)，imageY的值就+5
self.imageY+=5;
//判斷，當(dāng)雪花超出屏幕的時(shí)候，讓圖片從頭開(kāi)始降落
if (self.imageY>rect.size.height) {
self.imageY=0;
}
UIImage *image=[UIImage imageNamed:@"snow"];
[image drawAtPoint:CGPointMake(0, self.imageY)];
UIImage *image2=[UIImage imageNamed:@"me"];
[image2 drawAtPoint:CGPointMake(80, self.imageY)];
}
@end
實(shí)現(xiàn)效果
2.重要說(shuō)明
（1）下面兩個(gè)方法的調(diào)用順序
-(void)awakeFromNib
-(id)initWithCoder:(NSCoder *)aDecoder
提示：如果view是從xib或storyboard中創(chuàng)建可以調(diào)用awakefromnib方法，歸檔。從文件創(chuàng)建view，其實(shí)會(huì)先調(diào)用initwithcoder這個(gè)方法。xib和storyboard也是文件。
上面兩個(gè)方法，-(id)initWithCoder:(NSCoder *)aDecoder會(huì)先調(diào)用。實(shí)現(xiàn)該方法需要實(shí)現(xiàn)NSCoding協(xié)議，由于創(chuàng)建的UIView默認(rèn)就已經(jīng)實(shí)現(xiàn)了該協(xié)議。
可以進(jìn)入到頭文件查看：
運(yùn)行新建的程序，通過(guò)打印可以驗(yàn)證上面兩個(gè)方法的調(diào)用順序。
（2）兩個(gè)定時(shí)器
第一個(gè)：
[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];
說(shuō)明： NSTimer一般用于定時(shí)的更新一些非界面上的數(shù)據(jù),告訴多久調(diào)用一次
第二個(gè)：
CADisplayLink *display= [CADisplayLink displayLinkWithTarget:self selector:@selector(updateImage)];
[display addToRunLoop:[NSRunLoopmainRunLoop] forMode:NSDefaultRunLoopMode];
說(shuō)明： CADisplayLink刷幀，默認(rèn)每秒刷新60次。該定時(shí)器創(chuàng)建之后，默認(rèn)是不會(huì)執(zhí)行的，需要把它加載到消息循環(huán)中
- iOS應(yīng)用開(kāi)發(fā)中對(duì)UIImage進(jìn)行截取和縮放的方法詳解
- iOS應(yīng)用開(kāi)發(fā)中使用UIScrollView控件來(lái)實(shí)現(xiàn)圖片縮放
- iOS UITableView展開(kāi)縮放動(dòng)畫(huà)實(shí)例代碼
- iOS實(shí)現(xiàn)點(diǎn)擊微信頭像(放大、縮放、保存)效果
- iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色
- iOS開(kāi)發(fā)之tableView實(shí)現(xiàn)左滑刪除功能
- iOS App中UITableView左滑出現(xiàn)刪除按鈕及其cell的重用
- 解決iOS11刷新tableview會(huì)出現(xiàn)漂移的現(xiàn)象
- IOS實(shí)現(xiàn)左右兩個(gè)TableView聯(lián)動(dòng)效果
- iOS TableView頭視圖根據(jù)偏移量下拉縮放效果
相關(guān)文章
詳解iOS平臺(tái)調(diào)用后臺(tái)接口的正確姿勢(shì)
這篇文章主要介紹了詳解iOS平臺(tái)調(diào)用后臺(tái)接口的正確姿勢(shì)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
IOS實(shí)現(xiàn)圖片輪播無(wú)限循環(huán)效果
這篇文章主要為大家詳細(xì)介紹了IOS實(shí)現(xiàn)圖片輪播無(wú)限循環(huán)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
模糊搜索的實(shí)現(xiàn)思路是當(dāng)搜索框開(kāi)始編輯時(shí)對(duì)搜索框中的文本與后臺(tái)給的資源相對(duì)比,包含搜索文本的展示在tableview中2016-12-12
這篇文章給大家介紹了iOS中解決Xcode 8控制臺(tái)亂碼的方式，文中給出了詳細(xì)解決步驟，相信對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
iOS事件鏈有兩條：事件的響應(yīng)鏈；Hit-Testing事件的傳遞鏈。這篇文章主要介紹了iOS 中事件的響應(yīng)鏈和傳遞鏈,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
這篇文章主要給大家介紹了關(guān)于ios原生二維碼掃描與生成的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于iOS中valueForKeyPath的常用方法法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
有用戶就用用戶名和密碼，而現(xiàn)在的應(yīng)用都少不了一個(gè)保存用戶名和密碼用于自動(dòng)登錄的功能，本文介紹使用iOS自帶的Keychain方法保存用戶名和密碼信息的相關(guān)資料，需要的朋友可以參考參考借鑒，下面來(lái)一起看看吧。2017-06-06
iOS開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單抽屜效果
這篇文章主要為大家詳細(xì)介紹了iOS開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單抽屜效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Swift 去除 TableView 多余的空Cell中的橫線的方法
這篇文章主要介紹了Swift 去除 TableView 多余的空Cell中的橫線的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02