在app中,关于图片的圆角应用非常广泛,比如,圆形头像的设置,图片四个角的圆角处理,显得比较圆滑,整体UI给人的感觉,圆角相对直角来说,给人一种温和的感觉,而不是那种有棱有角的感觉,最近遇到,需要处理一张图片左上角和右上角的圆角处理,也就是单独处理图片的任意一个直角的圆角化设置,利用CAShapeLayer处理任意一个直角的圆角设置;
最终结果:
一.app中的需求
- 头像的圆形处理
- 图片的左上和右上圆角需求
二.解决办法
-
1.直接找UI切图,呵呵……
-
2.设置layer,然后maskToBounds,即可,但是任意一个角,就处理不了了;
-
3.CAShapeLayer设置path;
2.1 头像的圆角处理
视图之所以能够显示,皆因为view中layer层,因此,头像的圆形设置就有两种方法
- 第一种:
通过设置layer的cornerRadius=width的一半,然后设置 masksToBounds = yes;
- 第二种:
利用drawInRect绘制一张新的圆形图片,这样不需要每次设置当前view的layer的圆角半径,具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (instancetype)circleImage
{
// 开启图形上下文
UIGraphicsBeginImageContext(self.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextAddEllipseInRect(ctx, rect);
CGContextClip(ctx);
[self drawInRect:rect];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
2.2 图片任意直角圆角化
直接上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 返回一个任意圆角尺寸的view
*
* @param corners
枚举UIRectCornerTopLeft
UIRectCornerTopRight
UIRectCornerBottomLeft
UIRectCornerBottomRight
UIRectCornerAllCorners
* @param cornerRadii 圆角的尺寸(CGSize)
*
* @return 返回一个任意圆角尺寸的view
*/
+ (CAShapeLayer *)viewByRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii currentView:(UIView *)view{
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:cornerRadii];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
return maskLayer;
}
☛兄dei，请我喝杯茶☚
