绘制基本图形
一、简单说明
图形上下文(Graphics Context):是一个CGContextRef类型的数据
图形上下文的作用:保存绘图信息、绘图状态
决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件、Bitmap或者显示器的窗口上)
相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上。
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. // 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.创建一个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
程序执行完毕后,会在指定的位置创建一个abc.png的图片
补充说明:
1.创建Bitmap图形上下文的方法
//方法1 UIGraphicsBeginImageContext(<#CGSize size#>);//方法2 UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
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. // Copyright (c) 2014年 itcase. All rights reserved. //#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
使用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
// // 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]; // //系统的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. // 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]; //系统的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
说明:系统的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]; // //系统的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 // 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