iOS開發(fā)中使用Quartz2D繪圖及自定義UIImageView控件
繪制基本圖形
一、簡單說明
圖形上下文（Graphics Context）：是一個CGContextRef類型的數(shù)據(jù)
圖形上下文的作用：保存繪圖信息、繪圖狀態(tài)
決定繪制的輸出目標(biāo)（繪制到什么地方去？）（輸出目標(biāo)可以是PDF文件、Bitmap或者顯示器的窗口上）
相同的一套繪圖序列，指定不同的Graphics Context，就可將相同的圖像繪制到不同的目標(biāo)上。
Quartz2D提供了以下幾種類型的Graphics Context：
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context
只要上下文不同，繪制的地方就不同。
本文說明如何把圖片繪制到Bitmap上面去，即要求生成一張圖片，圖片上面保存了繪圖信息。
Bitmap就是圖片，相當(dāng)于系統(tǒng)的UIimage。一個UIImage就是一個Bitmap
二、怎么把圖片繪制到Bitmap上？
注意：不能在drawRect：方法中直接獲取Bitmap的上下文，需要我們自己進行創(chuàng)建。
代碼示例：
//
// YYViewController.m
// 06-繪制基本圖形
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *iv;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//加載圖片
//0.創(chuàng)建一個Bitmap上下文
//c語言的方法
// CGBitmapContextCreate(<#void *data#>, <#size_t width#>, <#size_t height#>, <#size_t bitsPerComponent#>, <#size_t bytesPerRow#>, <#CGColorSpaceRef space#>, <#CGBitmapInfo bitmapInfo#>)
//oc中封裝的方法
//方法1
// UIGraphicsBeginImageContext(<#CGSize size#>);
//方法2
UIGraphicsBeginImageContextWithOptions( CGSizeMake(200, 200), NO, 0);
//1.獲取bitmap上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.繪圖(畫一個圓)
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
//3.渲染
CGContextStrokePath(ctx);
//4.獲取生成的圖片
UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
//5.顯示生成的圖片到imageview
self.iv.image=image;
//6.保存繪制好的圖片到文件中
//先將圖片轉(zhuǎn)換為二進制數(shù)據(jù)，然后再將圖片寫到文件中
// UIImageJPEGRepresentation(image, 1); //第二個參數(shù)為保存的圖片的效果
NSData *data=UIImagePNGRepresentation(image);
[data writeToFile:@"/Users/apple/Desktop/abc.png" atomically:YES];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
程序執(zhí)行效果：
程序執(zhí)行完畢后，會在指定的位置創(chuàng)建一個abc.png的圖片
補充說明：
1.創(chuàng)建Bitmap圖形上下文的方法
//方法1 UIGraphicsBeginImageContext(<#CGSize size#>);
//方法2 UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
使用兩個方法同樣都可以創(chuàng)建，但是使用第一個方法將來創(chuàng)建的圖片清晰度和質(zhì)量沒有第二種方法的好。
方法2接收三個參數(shù)：
CGSize size：指定將來創(chuàng)建出來的bitmap的大小
BOOL opaque：設(shè)置透明YES代表透明，NO代表不透明
CGFloat scale：代表縮放,0代表不縮放
創(chuàng)建出來的bitmap就對應(yīng)一個UIImage對象
2.Quartz2D的內(nèi)存管理
使用含有“Create”或“Copy”的函數(shù)創(chuàng)建的對象，使用完后必須釋放，否則將導(dǎo)致內(nèi)存泄露
使用不含有“Create”或“Copy”的函數(shù)獲取的對象，則不需要釋放
如果retain了一個對象，不再使用時，需要將其release掉
可以使用Quartz 2D的函數(shù)來指定retain和release一個對象。例如，如果創(chuàng)建了一個CGColorSpace對象，則使用函數(shù)CGColorSpaceRetain和CGColorSpaceRelease來retain和release對象。
也可以使用Core Foundation的CFRetain和CFRelease。注意不能傳遞NULL值給這些函數(shù)
自定義UIImageView控件
一、實現(xiàn)思路
Quartz2D最大的用途在于自定義View(自定義UI控件)，當(dāng)系統(tǒng)的View不能滿足我們使用需求的時候，自定義View。
使用Quartz2D自定義View，可以從模仿系統(tǒng)的ImageView的使用開始。
需求驅(qū)動開發(fā)：模仿系統(tǒng)的imageview的使用過程
1.創(chuàng)建
2.設(shè)置圖片
3.設(shè)置frame
4.把創(chuàng)建的自定義的view添加到界面上（在自定義的View中，需要一個image屬性接收image圖片參數(shù)->5)。
5.添加一個image屬性(接下來，拿到image之后，應(yīng)該把拿到的這個image給渲染出來。怎么渲染？自定義的view怎么把圖片顯示出來？->把圖片給畫出來，所以需要重寫自定義View的drawRect:方法)。
6.重寫自定義View的drawRect:方法，在該方法內(nèi)部畫出圖形。
二、代碼實現(xiàn)
系統(tǒng)自帶的ImageView的使用
//
// YYViewController.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
@interface YYViewController ()
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//系統(tǒng)的UIImageview的使用
// 1.創(chuàng)建一個UIImageView
UIImageView *iv=[[UIImageView alloc]init];
// 2.設(shè)置圖片
iv.image=[UIImage imageNamed:@"me"];
// 3.設(shè)置frame
iv.frame=CGRectMake(100, 100, 100, 100);
// 4.把創(chuàng)建的自定義的view添加到界面上
[self.view addSubview:iv];
}
@end
實現(xiàn)效果：
使用Quartz2D自定義View，代碼如下：
新建一個自定義的類，讓其繼承自UIView,YYimageView.h文件代碼如下：
//
// YYimageView.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYimageView.h"
@implementation YYimageView
//重寫drawRect:方法
- (void)drawRect:(CGRect)rect
{
[self.image drawInRect:rect];
}
@end
在主控制器中，模仿系統(tǒng)自帶的UIImageView的使用過程，實現(xiàn)同樣的效果。
//
// YYViewController.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
#import "YYimageView.h"
@interface YYViewController ()
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// //系統(tǒng)的UIImageview的使用
//// 1.創(chuàng)建一個UIImageView
// UIImageView *iv=[[UIImageView alloc]init];
//// 2.設(shè)置圖片
// iv.image=[UIImage imageNamed:@"me"];
//// 3.設(shè)置frame
// iv.frame=CGRectMake(100, 100, 100, 100);
//// 4.把創(chuàng)建的自定義的view添加到界面上
// [self.view addSubview:iv];
//自定義UIImageView
//1.創(chuàng)建
//2.設(shè)置圖片
//3.設(shè)置frame
//4.把創(chuàng)建的自定義的view添加到界面上
YYimageView *yyiv=[[YYimageView alloc]init];
yyiv.image=[UIImage imageNamed:@"me"];
yyiv.frame=CGRectMake(100, 100, 100, 100);
[self.view addSubview:yyiv];
}
@end
三、完善
存在的問題？
在界面上，添加一個按鈕，要求點擊按鈕，能夠?qū)崿F(xiàn)圖片的切換。
//
// YYViewController.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
#import "YYimageView.h"
@interface YYViewController ()
@property(nonatomic,strong)UIImageView *imageView;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//系統(tǒng)的UIImageview的使用
// 1.創(chuàng)建一個UIImageView
UIImageView *iv=[[UIImageView alloc]init];
// 2.設(shè)置圖片
iv.image=[UIImage imageNamed:@"me"];
// 3.設(shè)置frame
iv.frame=CGRectMake(100, 100, 100, 100);
// 4.把創(chuàng)建的自定義的view添加到界面上
[self.view addSubview:iv];
self.imageView=iv;
//自定義UIImageView
//1.創(chuàng)建
//2.設(shè)置圖片
//3.設(shè)置frame
//4.把創(chuàng)建的自定義的view添加到界面上
// YYimageView *yyiv=[[YYimageView alloc]init];
// yyiv.image=[UIImage imageNamed:@"me"];
// yyiv.frame=CGRectMake(100, 100, 100, 100);
// [self.view addSubview:yyiv];
//添加一個button按鈕，當(dāng)點擊button按鈕的時候，切換圖片
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setTitle:@"點擊切換" forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
}
-(void)btnClick
{
UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
self.imageView.image=image;
}
@end
點擊按鈕后，實現(xiàn)圖片的切換。
說明：系統(tǒng)的UIimage可以替換。而自定義imageview不會變換，因為自定義的view要想換圖片，需要重新繪制并渲染一次圖片。所以在拿到替換圖片的時候，需要重新繪制一次圖片，重寫setimage方法。
完善后的代碼如下：
主控制器中，YYViewController.m文件的代碼：
//
// YYViewController.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYViewController.h"
#import "YYimageView.h"
@interface YYViewController ()
@property(nonatomic,strong)UIImageView *imageView;
@property(nonatomic,strong)YYimageView *yyimageView;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// //系統(tǒng)的UIImageview的使用
//// 1.創(chuàng)建一個UIImageView
// UIImageView *iv=[[UIImageView alloc]init];
//// 2.設(shè)置圖片
// iv.image=[UIImage imageNamed:@"me"];
//// 3.設(shè)置frame
// iv.frame=CGRectMake(100, 100, 100, 100);
//// 4.把創(chuàng)建的自定義的view添加到界面上
// [self.view addSubview:iv];
// self.imageView=iv;
//自定義UIImageView
//1.創(chuàng)建
//2.設(shè)置圖片
//3.設(shè)置frame
//4.把創(chuàng)建的自定義的view添加到界面上
YYimageView *yyiv=[[YYimageView alloc]init];
yyiv.image=[UIImage imageNamed:@"me"];
yyiv.frame=CGRectMake(100, 100, 100, 100);
[self.view addSubview:yyiv];
self.yyimageView=yyiv;
//添加一個button按鈕，當(dāng)點擊button按鈕的時候，切換圖片
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(100, 300, 100, 50)];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setTitle:@"點擊切換" forState:UIControlStateNormal];
[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
}
-(void)btnClick
{
NSLog(@"按鈕被點擊了");
UIImage *image=[UIImage imageNamed:@"psb.jpeg"];
// self.imageView.image=image;
self.yyimageView.image=image;
}
@end
YYimageView.m文件的代碼：
//
// YYimageView.m
// 02-自定義UIimageview
//
// Created by apple on 14-6-22.
// Copyright (c) 2014年 itcase. All rights reserved.
//
#import "YYimageView.h"
@implementation YYimageView
//重寫drawRect:方法
- (void)drawRect:(CGRect)rect
{
[self.image drawInRect:rect];
}
//重寫set方法
-(void)setImage:(UIImage *)image
{
_image=image;
[self setNeedsDisplay];
}
@end
相關(guān)文章
這篇文章主要為大家詳細介紹了iOS10 推送完整剖析和注意事項,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
MAC 系統(tǒng)安裝java并配置環(huán)境變量
這篇文章主要介紹了MAC 系統(tǒng)安裝java并配置環(huán)境變量的相關(guān)資料,需要的朋友可以參考下2017-03-03
經(jīng)?？吹礁鞣N高效裁剪圓角的文章，正好之前做過一點數(shù)字圖像處理，所以寫個裁剪圓角的算法，下面這篇文章主要給大家介紹了關(guān)于iOS實現(xiàn)高效裁剪圖片圓角算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-06-06
iOS報Multiple?commands?produceMultiple錯誤的解決方案
這篇文章主要為大家介紹了iOS報Multiple?commands?produceMultiple錯誤的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
Flutter?Widgets之標(biāo)簽類控件Chip詳解
這篇文章主要為大家介紹了Flutter?Widgets之標(biāo)簽類控件Chip詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
iOS指紋驗證TouchID應(yīng)用學(xué)習(xí)教程2
這篇文章主要為大家詳細iOS指紋驗證TouchID應(yīng)用學(xué)習(xí)教程的第一篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本篇文章主要介紹了iOS實現(xiàn)翻頁效果動畫實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要給大家介紹了關(guān)于iOS中Https雙向認證的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
iOS開發(fā)中runtime常用的幾種方法示例總結(jié)
Runtime也就是所謂的“運行時”，因為是在運行時實現(xiàn)的。下面這篇文章主要給大家介紹了關(guān)于iOS開發(fā)中runtime常用的幾種方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了XCode 加快編譯鏈接速度的方法的相關(guān)資料,這里整理了三種方法,需要的朋友可以參考下2016-10-10