iOS开发中使用Quartz2D绘图及自定义UIImageView控件

摘要：绘制基本图形一、简单说明图形上下文（GraphicsContext）：是一个CGContextRef类型的数据图形上下文的作用：保存绘图信息...

绘制基本图形

一、简单说明

图形上下文（Graphics Context）：是一个CGContextRef类型的数据

图形上下文的作用：保存绘图信息、绘图状态

决定绘制的输出目标（绘制到什么地方去？）（输出目标可以是PDF文件、Bitmap或者显示器的窗口上）

iOS开发中使用Quartz2D绘图及自定义UIImageView控件1

相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上。

iOS开发中使用Quartz2D绘图及自定义UIImageView控件2

Quartz2D提供了以下几种类型的Graphics Context：

Bitmap Graphics Context

PDF Graphics Context

Window Graphics Context

Layer Graphics Context

Printer Graphics Context

只要上下文不同，绘制的地方就不同。

本文说明如何把图片绘制到Bitmap上面去，即要求生成一张图片，图片上面保存了绘图信息。

Bitmap就是图片，相当于系统的UIimage。一个UIImage就是一个Bitmap

二、怎么把图片绘制到Bitmap上？

注意：不能在drawRect：方法中直接获取Bitmap的上下文，需要我们自己进行创建。

代码示例：

复制代码代码如下:

// YYViewController.m

// 06-绘制基本图形

// Created by apple on 14-6-22.

#import "YYViewController.h"

@interface YYViewController ()

@property (weak, nonatomic) IBOutlet UIImageView *iv;

@end

复制代码代码如下:

@implementation YYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

//加载图片

//0.创建一个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.保存绘制好的图片到文件中

//先将图片转换为二进制数据，然后再将图片写到文件中

// UIImageJPEGRepresentation(image, 1); //第二个参数为保存的图片的效果

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

程序执行效果：

iOS开发中使用Quartz2D绘图及自定义UIImageView控件3

程序执行完毕后，会在指定的位置创建一个abc.png的图片

iOS开发中使用Quartz2D绘图及自定义UIImageView控件4

补充说明：

1.创建Bitmap图形上下文的方法

复制代码代码如下:

//方法1 UIGraphicsBeginImageContext(<#CGSize size#>);

//方法2 UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)

使用两个方法同样都可以创建，但是使用第一个方法将来创建的图片清晰度和质量没有第二种方法的好。

方法2接收三个参数：

CGSize size：指定将来创建出来的bitmap的大小

BOOL opaque：设置透明YES代表透明，NO代表不透明

CGFloat scale：代表缩放,0代表不缩放

创建出来的bitmap就对应一个UIImage对象

2.Quartz2D的内存管理

使用含有“Create”或“Copy”的函数创建的对象，使用完后必须释放，否则将导致内存泄露

使用不含有“Create”或“Copy”的函数获取的对象，则不需要释放

如果retain了一个对象，不再使用时，需要将其release掉

可以使用Quartz 2D的函数来指定retain和release一个对象。例如，如果创建了一个CGColorSpace对象，则使用函数CGColorSpaceRetain和CGColorSpaceRelease来retain和release对象。

也可以使用Core Foundation的CFRetain和CFRelease。注意不能传递NULL值给这些函数

自定义UIImageView控件

一、实现思路

Quartz2D最大的用途在于自定义View(自定义UI控件)，当系统的View不能满足我们使用需求的时候，自定义View。

使用Quartz2D自定义View，可以从模仿系统的ImageView的使用开始。

需求驱动开发：模仿系统的imageview的使用过程

1.创建

2.设置图片

3.设置frame

4.把创建的自定义的view添加到界面上（在自定义的View中，需要一个image属性接收image图片参数->5)。

5.添加一个image属性(接下来，拿到image之后，应该把拿到的这个image给渲染出来。怎么渲染？自定义的view怎么把图片显示出来？->把图片给画出来，所以需要重写自定义View的drawRect:方法)。

6.重写自定义View的drawRect:方法，在该方法内部画出图形。

二、代码实现

复制代码代码如下:

系统自带的ImageView的使用

// YYViewController.m

// 02-自定义UIimageview

// Created by apple on 14-6-22.

#import "YYViewController.h"

@interface YYViewController ()

@end

@implementation YYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

//系统的UIImageview的使用

// 1.创建一个UIImageView

UIImageView *iv=[[UIImageView alloc]init];

// 2.设置图片

iv.image=[UIImage imageNamed:@"me"];

// 3.设置frame

iv.frame=CGRectMake(100, 100, 100, 100);

// 4.把创建的自定义的view添加到界面上

[self.view addSubview:iv];

}

@end

实现效果：

iOS开发中使用Quartz2D绘图及自定义UIImageView控件5

使用Quartz2D自定义View，代码如下：

新建一个自定义的类，让其继承自UIView,YYimageView.h文件代码如下：

复制代码代码如下:

// YYimageView.m

// 02-自定义UIimageview

// Created by apple on 14-6-22.

#import "YYimageView.h"

@implementation YYimageView

//重写drawRect:方法

- (void)drawRect:(CGRect)rect

{

[self.image drawInRect:rect];

}

@end

在主控制器中，模仿系统自带的UIImageView的使用过程，实现同样的效果。

复制代码代码如下:

// YYViewController.m

// 02-自定义UIimageview

// Created by apple on 14-6-22.

#import "YYViewController.h"

#import "YYimageView.h"

@interface YYViewController ()

@end

复制代码代码如下:

@implementation YYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// //系统的UIImageview的使用

//// 1.创建一个UIImageView

// UIImageView *iv=[[UIImageView alloc]init];

//// 2.设置图片

// iv.image=[UIImage imageNamed:@"me"];

//// 3.设置frame

// iv.frame=CGRectMake(100, 100, 100, 100);

//// 4.把创建的自定义的view添加到界面上

// [self.view addSubview:iv];

//自定义UIImageView

//1.创建

//2.设置图片

//3.设置frame

//4.把创建的自定义的view添加到界面上

YYimageView *yyiv=[[YYimageView alloc]init];

yyiv.image=[UIImage imageNamed:@"me"];

yyiv.frame=CGRectMake(100, 100, 100, 100);

[self.view addSubview:yyiv];

}

@end

三、完善

存在的问题？

在界面上，添加一个按钮，要求点击按钮，能够实现图片的切换。

复制代码代码如下:

// YYViewController.m

// 02-自定义UIimageview

// Created by apple on 14-6-22.

#import "YYViewController.h"

#import "YYimageView.h"

@interface YYViewController ()

@property(nonatomic,strong)UIImageView *imageView;

@end

复制代码代码如下:

@implementation YYViewController

- (void)viewDidLoad

{

[super viewDidLoad];

//系统的UIImageview的使用

// 1.创建一个UIImageView

UIImageView *iv=[[UIImageView alloc]init];

// 2.设置图片

iv.image=[UIImage imageNamed:@"me"];

// 3.设置frame

iv.frame=CGRectMake(100, 100, 100, 100);

// 4.把创建的自定义的view添加到界面上

[self.view addSubview:iv];

self.imageView=iv;

//自定义UIImageView

//1.创建

//2.设置图片

//3.设置frame

//4.把创建的自定义的view添加到界面上

// YYimageView *yyiv=[[YYimageView alloc]init];

// yyiv.image=[UIImage imageNamed:@"me"];

// yyiv.frame=CGRectMake(100, 100, 100, 100);

// [self.view addSubview:yyiv];

//添加一个button按钮，当点击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

点击按钮后，实现图片的切换。

iOS开发中使用Quartz2D绘图及自定义UIImageView控件6

说明：系统的UIimage可以替换。而自定义imageview不会变换，因为自定义的view要想换图片，需要重新绘制并渲染一次图片。所以在拿到替换图片的时候，需要重新绘制一次图片，重写setimage方法。

完善后的代码如下：

主控制器中，YYViewController.m文件的代码：

复制代码代码如下:

// YYViewController.m

// 02-自定义UIimageview

// Created by apple on 14-6-22.

#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];

// //系统的UIImageview的使用

//// 1.创建一个UIImageView

// UIImageView *iv=[[UIImageView alloc]init];

//// 2.设置图片

// iv.image=[UIImage imageNamed:@"me"];

//// 3.设置frame

// iv.frame=CGRectMake(100, 100, 100, 100);

//// 4.把创建的自定义的view添加到界面上

// [self.view addSubview:iv];

// self.imageView=iv;

//自定义UIImageView

//1.创建

//2.设置图片

//3.设置frame

//4.把创建的自定义的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按钮，当点击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.

#import "YYimageView.h"

@implementation YYimageView

//重写drawRect:方法

- (void)drawRect:(CGRect)rect

{

[self.image drawInRect:rect];

}

//重写set方法

-(void)setImage:(UIImage *)image

{

_image=image;

[self setNeedsDisplay];

}

@end