【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘在屏渲染’实现方法
2017-04-19 22:28
561 查看
iOS中为view添加圆角效果有两种方式,一种基于“离屏渲染”(off-screen-renderring),直接设置view的layer层参数即可简单实现,也很常用,但性能较低;另一种则是编写底层图形代码,实现‘在屏渲染’(on-screen-renderring),可以大大优化绘制性能。
2
3
4
1
2
3
4
这种方法最简单快速,但其实这种方法的实现是靠的‘离屏渲染’(off-screen-rendering),性能很低。
为UIImage类扩展一个实例函数:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用时,让实例化的UIImage对象调用一下上面的实例方法即可:
2
3
4
5
6
1
2
3
4
5
6
UIImage类别扩展在屏渲染实例函数:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
测试代码:
iOS中圆角效果实现的最简单、最直接的方式,是直接修改View的layer层参数:
/* 设置圆角半径 */ view.layer.cornerRadius = 5; /* 将边界以外的区域遮盖住 */ view.layer.masksToBounds = YES;1
2
3
4
1
2
3
4
这种方法最简单快速,但其实这种方法的实现是靠的‘离屏渲染’(off-screen-rendering),性能很低。
另外一种则是实现on-screen-rendering,用于提高性能。
为UIImage类扩展一个实例函数:/** * On-screen-renderring绘制UIImage矩形圆角 */ - (UIImage *)imageWithCornerRadius:(CGFloat)radius ofSize:(CGSize)size{ /* 当前UIImage的可见绘制区域 */ CGRect rect = (CGRect){0.f,0.f,size}; /* 创建基于位图的上下文 */ UIGraphicsBeginImageContextWithOptions(size, NO, UIScreen.mainScreen.scale); /* 在当前位图上下文添加圆角绘制路径 */ CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius].CGPath); /* 当前绘制路径和原绘制路径相交得到最终裁剪绘制路径 */ CGContextClip(UIGraphicsGetCurrentContext()); /* 绘制 */ [self drawInRect:rect]; /* 取得裁剪后的image */ UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); /* 关闭当前位图上下文 */ UIGraphicsEndImageContext(); return image; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
使用时,让实例化的UIImage对象调用一下上面的实例方法即可:
UIImageView *imageView = [[U 4000 IImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)]; /* 创建并初始化UIImage */ UIImage *image = [UIImage imageNamed:@"icon"]; /* 添加圆角矩形 */ image = [image imageWithCornerRadius:50 ofSize:imageView.frame.size]; [imageView setImage:image];1
2
3
4
5
6
1
2
3
4
5
6
完整代码
UIImage类别扩展在屏渲染实例函数:
// // UIImage+RadiusCorner.h // SingleView // // Created by Xinhou Jiang on 19/4/17. // Copyright © 2017年 Xinhou Jiang. All rights reserved. // #import <UIKit/UIKit.h> @interface UIImage (RadiusCorner) /* On-screen-renderring绘制UIImage矩形圆角 */ - (UIImage *)imageWithCornerRadius:(CGFloat)radius ofSize:(CGSize)size; @end1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//1
// UIImage+RadiusCorner.m
// SingleView
//
// Created by Xinhou Jiang on 19/4/17.
// Copyright © 2017年 Xinhou Jiang. All rights reserved.
//
#import "UIImage+RadiusCorner.h"
@implementation UIImage (RadiusCorner)
/** * On-screen-renderring绘制UIImage矩形圆角 */ - (UIImage *)imageWithCornerRadius:(CGFloat)radius ofSize:(CGSize)size{ /* 当前UIImage的可见绘制区域 */ CGRect rect = (CGRect){0.f,0.f,size}; /* 创建基于位图的上下文 */ UIGraphicsBeginImageContextWithOptions(size, NO, UIScreen.mainScreen.scale); /* 在当前位图上下文添加圆角绘制路径 */ CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius].CGPath); /* 当前绘制路径和原绘制路径相交得到最终裁剪绘制路径 */ CGContextClip(UIGraphicsGetCurrentContext()); /* 绘制 */ [self drawInRect:rect]; /* 取得裁剪后的image */ UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); /* 关闭当前位图上下文 */ UIGraphicsEndImageContext(); return image; }
@end
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
测试代码:
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)]; UIImage *image = [UIImage imageNamed:@"icon"]; /* 1. on-screen-renderring */ //image = [image imageWithCornerRadius:50 ofSize:imageView.frame.size]; [imageView setImage:image]; /* 2. off-screen-renderring */ imageView.layer.cornerRadius = 20; imageView.layer.masksToBounds = YES; [self.view addSubview:imageView]; } @end
相关文章推荐
- 【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘当前屏幕渲染’实现方法
- iOS中drawRect方法实现画圆角矩形,顺时针和逆时针
- div+css实现圆角矩形的几种方法
- IOS--UIViewUIButtonUIImageView设置圆角、阴影、边框的方法
- iOS画圆角矩形的方法
- android中实现“圆角矩形”,贝塞尔曲线的方法
- iOS-UIImage切圆角方法(UIImage make round corner image)
- 实现圆角矩形边框的方法
- IOS中UIImageView方法实现简单动画
- android实现圆角矩形背景的方法
- Android 自定义View修炼-Android实现圆形、圆角和椭圆自定义图片View(使用BitmapShader图形渲染方法)
- 【iOS沉思录】GCD实现线程同步的方法
- MFC 对话框圆角矩形的实现方法
- IOS--UIViewUIButtonUIImageView设置圆角、阴影、边框的方法
- iOS控件——UIView与UIImageView播放动画的实现方法
- iOS 视图实现圆角效果的三种方法及比较
- Android开发基于Drawable实现圆角矩形的方法
- UIImageView设置圆角不触发离屏渲染的方法
- iOS实现圆角箭头矩形的提示框
- Android 自定义View修炼-实现自定义圆形、圆角和椭圆ImageView(使用Xfermode图形渲染方法)