内容简介:代码:这个方法里maskToBounds会触发离屏渲染,GPU在当前屏幕缓冲区外新开辟了一个渲染缓冲区进行工作,也就是离屏渲染,这会给我们带来额外的性能损耗,如果这样的圆角操作达到一定数量,会触发缓冲区的频繁合并和上下文的频繁切换,性能的代价会宏观的表现在用户体验上<掉帧>,代码:
代码:
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"TestImage"]]; // 只需设置layer层的两个属性 // 设置圆角 imageView.layer.cornerRadius = 50; // 将多余的部分切掉 imageView.layer.masksToBounds = YES; [self.view addSubview:imageView]; 复制代码
这个方法里maskToBounds会触发离屏渲染,GPU在当前屏幕缓冲区外新开辟了一个渲染缓冲区进行工作,也就是离屏渲染,这会给我们带来额外的性能损耗,如果这样的圆角操作达到一定数量,会触发缓冲区的频繁合并和上下文的频繁切换,性能的代价会宏观的表现在用户体验上<掉帧>, 不建议使用 。
第二种方法:使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角
代码:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; imageView.image = [UIImage imageNamed:@"TestImage.jpg"]; // 开始对imageView进行画图 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0); // 使用贝塞尔曲线画出一个圆形图 [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip]; [imageView drawRect:imageView.bounds]; imageView.image = UIGraphicsGetImageFromCurrentImageContext(); // 结束画图 UIGraphicsEndImageContext(); [self.view addSubview:imageView]; 复制代码
- UIGraphicsBeginImageContextWithOption(CGSize size, BOOL opaque, CGFloat scale)各参数的含义:
- size ---新创建的文图上下文大小
- opaque --- 透明开关,如果图形完全不用透明,设置为YES以优化位图的存储。
- scale --- 缩放因子。虽然这里可以用[UIScreen mainScreen].scale来获取,但实际上设为0后,系统会自动设置正确的比例
第三种方法: 使用Core Graphics框架画出一个圆角
代码:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)]; imageView.image = [UIImage imageNamed:@"TestImage.jpg"]; // 开始对imageView进行画图 UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0); // 获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 设置一个范围 CGRect rect = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height); // 根据一个rect创建一个椭圆 CGContextAddEllipseInRect(ctx, rect); // 裁剪 CGContextClip(ctx); // 讲原照片画到图形上下文 [imageView.image drawInRect:rect]; // 从上下文上获取裁剪后的照片 UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); // 关闭上下文 UIGraphicsEndImageContext(); imageView.image = image; [self.view addSubview:imageView]; 复制代码
第四种方法: 使用CAShapeLayer和UIBezierPath设置圆角
代码:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)]; imageView.image = [UIImage imageNamed:@"TestImage.jpg"]; UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imageView.bounds.size]; CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init]; // 设置大小 maskLayer.frame = imageView.bounds; // 设置图形样子 maskLayer.path = maskPath.CGPath; imageView.layer.mask = maskLayer; [self.view addSubview:imageView]; 复制代码
指定需要的角成为圆角(第四种方法的延伸)
方法:
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii; corners参数指定了要成为圆角的角, 枚举类型如下: typedef NS_OPTIONS(NSUInteger, UIRectCorner) { UIRectCornerTopLeft = 1 << 0, UIRectCornerTopRight = 1 << 1, UIRectCornerBottomLeft = 1 << 2, UIRectCornerBottomRight = 1 << 3, UIRectCornerAllCorners = ~0UL }; 复制代码
实现代码:
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 200, 200)]; imageView.image = [UIImage imageNamed:@"TestImage.jpg"]; // 绘制圆角 需设置的圆角 使用"|"来组合 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(30, 30)]; CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init]; // 设置大小 maskLayer.frame = imageView.bounds; // 设置图形样子 maskLayer.path = maskPath.CGPath; imageView.layer.mask = maskLayer; [self.view addSubview:imageView]; 复制代码
效果图:
据说,第四种方法最好,对内存的消耗最少,而且渲染快速。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂
刘玉红 / 2015-1-1 / 68
《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》作者根据在长期教学中积累的网页设计教学经验,完整、详尽地介绍HTML 5 + CSS 3 + JavaScript网页设计技术。 《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》共分24章,分别介绍HTML 5概述、HTML 5网页文档结构、HTML 5网页中的文本和图像、HTML......一起来看看 《网站开发案例课堂:HTML5+CSS3+JavaScript网页设计案例课堂》 这本书的介绍吧!