【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘当前屏幕渲染’实现方法
2017-04-19 15:22
495 查看
按照背后的渲染方式,实现UIView及其子类的圆角效果有两种方法:一种是直接设置layer的圆角属性,为‘离屏渲染’;另一种是自定义圆角绘制方法,实现‘当前屏幕渲染’。
离屏渲染(Off-Screen Rendering): 简单说就是提前另开一个缓冲区进行图形渲染,由于显示需要和当前屏幕缓冲区进行切换,所以很耗费性能。通常圆角、遮罩、不透明度、阴影、渐变、光栅化和抗锯齿等设置都会触发离屏渲染。
为UIImage类扩展一个实例函数:
使用时,让实例化的UIImage对象调用一下上面的实例方法即可:
UIImage类别扩展在屏渲染实例函数:
测试代码:
离屏渲染和当前屏幕渲染
当前屏幕渲染(On-Screen Rendering): 指的是GPU直接在当前显示的屏幕缓冲区中进行图形渲染,不需要提前另开缓冲区也就不需要缓冲区的切换,因此性能较高;离屏渲染(Off-Screen Rendering): 简单说就是提前另开一个缓冲区进行图形渲染,由于显示需要和当前屏幕缓冲区进行切换,所以很耗费性能。通常圆角、遮罩、不透明度、阴影、渐变、光栅化和抗锯齿等设置都会触发离屏渲染。
‘离屏渲染’实现圆角:
iOS中圆角效果实现的最简单、最直接的方式,是直接修改View的layer层参数,会触发‘离屏渲染’,性能不高:/* 设置圆角半径 */ view.layer.cornerRadius = 5; /* 将边界以外的区域遮盖住 */ view.layer.masksToBounds = YES;
‘当前屏幕渲染’实现圆角:
另外一种则是实现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; }
使用时,让实例化的UIImage对象调用一下上面的实例方法即可:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)]; /* 创建并初始化UIImage */ UIImage *image = [UIImage imageNamed:@"icon"]; /* 添加圆角矩形 */ image = [image imageWithCornerRadius:50 ofSize:imageView.frame.size]; [imageView setImage:image];
完整代码
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; @end
//
// 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
测试代码:
@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方法实现画圆角矩形,顺时针和逆时针
- ios view实现圆角效果的三种方法及比较
- 实现圆角矩形边框的方法
- IOS实现UIImage倒影的三种方法
- iOS实现圆角箭头矩形的提示框
- Android编程实现横竖屏切换时不销毁当前activity和锁定屏幕的方法
- iOS 地图显示比例设置 (这里是当前的位置信息代理方法中实现)
- iOS -实现UIView圆角显示的方法
- ios实现屏幕旋转的方法
- iOS 视图实现圆角效果的三种方法及比较
- iOS控件——UIView与UIImageView播放动画的实现方法
- IOS编程之_算法实现UIImageView自适应屏幕大小
- IOS--UIViewUIButtonUIImageView设置圆角、阴影、边框的方法
- iOS画圆角矩形的方法
- MFC 对话框圆角矩形的实现方法
- iOS-UIImage切圆角方法(UIImage make round corner image)
- Android中通过view方式获取当前Activity的屏幕截图实现方法
- IOS_视图实现圆角效果的三种方法及比较
- iOS获取当前屏幕控制器的方法