ios – 实现圆角

栏目: IOS · 发布时间: 5年前

内容简介:在日常的项目中,经常有将一个图片或者View设置成圆角的情况。通常我遇到这种情况的时候都会使用layer来实现效果,但是使用layer来出现离屏渲染的情况;离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。会频繁的进行上下文之间的切换,这是非常的消耗性能的。所以今天我来总结一下都有哪些方法能够实现圆角效果。[self.view addSubview:img];

在日常的项目中,经常有将一个图片或者View设置成圆角的情况。通常我遇到这种情况的时候都会使用layer来实现效果,但是使用layer来出现离屏渲染的情况;离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。会频繁的进行上下文之间的切换,这是非常的消耗性能的。所以今天我来总结一下都有哪些方法能够实现圆角效果。

UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imgTest.image = [UIImage imageNamed:@"img.jpg"];

[self.view addSubview:img]

;

1. 通过layer实现

正如我引文所说的,通过layer的”cornerRadius”属性可以实现圆角的效果 :

UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imgTest.image = [UIImage imageNamed:@"img.jpg"];

[self.view addSubview:img]

; imgTest.layer.cornerRadius = 10; //其实cornerRadius不会产生离屏渲染,但是结合遮罩masks就会有离屏渲染 imgTest.layer.masksToBounds=YES ; //遮罩 裁切多余的部分

2. 通过CAShapeLayer+贝塞尔曲线实现

相比之下效果更加的多,还可以实现单边的圆角效果,但是同样会产生离屏渲染:

//还可以规定范围UIRectCorner
/*UIRectCornerTopLeft 上左
UIRectCornerTopRight 上右
UIRectCornerBottomLeft 下左
UIRectCornerBottomRight 下右
UIRectCornerAllCorners 全部
*/

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:img.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
//设置切割的范围和路径
maskLayer.frame = imgTest.bounds;
maskLayer.path = maskPath.CGPath;
mgTest.layer.mask = maskLayer;

3. 通过CoreGraphics

这种方法是推荐使用的:

UIGraphicsBeginImageContextWithOptions(imgTest.bounds.size, NO, 0);
//获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//设置一个范围
CGRect rect = CGRectMake(0, 0, imgTest.bounds.size.width, img.bounds.size.height);
//给上下文画一个椭圆
CGContextAddEllipseInRect(ctx, rect);
//裁剪
CGContextClip(ctx);
//开始绘图

[img drawRect:img.bounds]

; img.image = UIGraphicsGetImageFromCurrentImageContext(); //结束 UIGraphicsEndImageContext();

4.贝塞尔曲线+CoreGraphics

这种方法是推荐使用的:

//创建新的位图
//size 新位图的大小 opaque 透明开关 scale 缩放因子 设置为0 系统自动匹配
UIGraphicsBeginImageContextWithOptions(img.bounds.size, NO, 0);
//用贝塞尔曲线画一个圆形 addClip 进行切割
[[UIBezierPath bezierPathWithRoundedRect:img.bounds cornerRadius:10] addClip];
//开始绘图

[img drawRect:img.bounds]

; img.image = UIGraphicsGetImageFromCurrentImageContext(); //结束画图 UIGraphicsEndImageContext();

实现的封装:

/**
 按钮的圆角设置
 @param view view类控件
 @param rectCorner UIRectCorner要切除的圆角
 @param borderColor 边框颜色
 @param borderWidth 边框宽度
 @param viewColor view类控件颜色
 */
 - (void)setupRoundedCornersWithView:(UIView *)view cutCorners:(UIRectCorner)rectCorner borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth viewColor:(UIColor *)viewColor{    
    CAShapeLayer *mask=[CAShapeLayer layer];
    UIBezierPath * path= [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(15,10)];
    mask.path=path.CGPath;
    mask.frame=view.bounds;    
    CAShapeLayer *borderLayer=[CAShapeLayer layer];
    borderLayer.path=path.CGPath;
    borderLayer.fillColor = [UIColor clearColor].CGColor;
    borderLayer.strokeColor = borderColor.CGColor;
    borderLayer.lineWidth = borderWidth;
    borderLayer.frame = view.bounds;
    view.layer.mask = mask;
    

[view.layer addSublayer:borderLayer]

; }

参考文章:

https://www.jianshu.com/p/f10e1a3ec1cc

https://blog.csdn.net/qq136501564/article/details/51236536

https://www.cnblogs.com/malikun/p/5694513.html

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25404.html

ios – 实现圆角

ios – 实现圆角 微信打赏

ios – 实现圆角 支付宝打赏

感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我


以上所述就是小编给大家介绍的《ios – 实现圆角》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First Mobile Web

Head First Mobile Web

Lyza Danger Gardner、Jason Grigsby / O'Reilly Media / 2011-12 / $ 50.84

Despite the huge number of mobile devices and apps in use today, your business still needs a website. You just need it to be mobile. Head First Mobile Web walks you through the process of making a con......一起来看看 《Head First Mobile Web》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码