服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS开发中使用Quartz2D绘图及自定义UIImageView控件

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

2020-12-29 16:16iOS开发网 IOS

这篇文章主要介绍了iOS开发中使用Quartz2D绘图及自定义UIImageView控件的方法,代码基于传统的Objective-C,需要的朋友可以参考下

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

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

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

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

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

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

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

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


程序执行效果:

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

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

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

补充说明:

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


实现效果:

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

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


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

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

说明:系统的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解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22