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

 更新时间:2015年11月20日 09:51:30   投稿:goldensun  
这篇文章主要介绍了iOS开发中使用Quartz2D绘图及自定义UIImageView控件的方法,代码基于传统的Objective-C,需要的朋友可以参考下

绘制基本图形
一、简单说明

图形上下文(Graphics Context):是一个CGContextRef类型的数据

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

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

2015112094942852.png (634×127)

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

2015112095009895.png (341×334)

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


程序执行效果:

2015112095029392.png (317×500)

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

2015112095044226.png (676×509)

补充说明:

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.
//  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


实现效果:

2015112095107424.png (321×503)

使用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


在主控制器中,模仿系统自带的UIImageView的使用过程,实现同样的效果。
复制代码 代码如下:

//
//  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


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

2015112095131144.png (319×497)

说明:系统的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文件的代码:
复制代码 代码如下:

//
//  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

相关文章

  • iOS中各种UI控件属性设置示例代码

    iOS中各种UI控件属性设置示例代码

    这篇文章主要给大家介绍了关于iOS中各种UI控件属性设置的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • ARM汇编逆向iOS 实战

    ARM汇编逆向iOS 实战

    本文给大家通过一些简单的实战来讲解使用ARM汇编进行IOS逆向工程的方法,十分的实用,有需要的小伙伴可以参考下
    2015-11-11
  • IOS开发之适配iOS10及Xcode8的注意点

    IOS开发之适配iOS10及Xcode8的注意点

    这篇文章主要介绍了IOS开发之适配iOS10及Xcode8的注意点,本文给大家介绍了可能出现的问题及相应的解决方法,非常不错具有参考借鉴价值,感兴趣的朋友一起看看
    2016-10-10
  • iOS实现毫秒倒计时的方法详解

    iOS实现毫秒倒计时的方法详解

    倒计时在我们日常开发中必不可少,最近在公司的一个项目中就遇到了这个需求,本文着重介绍的是利用iOS实现毫秒倒计时的方法,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面来一起学习学习吧。
    2017-04-04
  • iOS读写json文件的方法示例

    iOS读写json文件的方法示例

    这篇文章主要给大家介绍了关于iOS读写json文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • iOS App使用设计模式中的模板方法模式开发的示例

    iOS App使用设计模式中的模板方法模式开发的示例

    这篇文章主要介绍了iOS应用使用设计模式中的模板方法模式开发的示例,例子代码为Objective-C语言,文中还与Java的相关实现进行类比,需要的朋友可以参考下
    2016-03-03
  • iOS自定义相机功能

    iOS自定义相机功能

    这篇文章主要为大家详细介绍了iOS自定义相机功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • iOS开发项目- 基于WebSocket的聊天通讯(2)

    iOS开发项目- 基于WebSocket的聊天通讯(2)

    这篇文章主要介绍了iOS开发项目- 基于WebSocket的聊天通讯,可以实现录音和音乐播放,有需要的可以了解一下。
    2016-11-11
  • iOS 真机调试微信小程序

    iOS 真机调试微信小程序

    下面介绍下如何使用 Xcode、Reveal 和 Safari 来真机调试 iOS 上的小程序。感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-08-08
  • 浅谈iOS UIWebView对H5的缓存功能

    浅谈iOS UIWebView对H5的缓存功能

    本篇文章主要介绍了浅谈iOS UIWebView对H5的缓存功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论