iOS中图片的圆角设置

Circle Corner

Posted by 一之笔 on December 12, 2016

在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,请我喝杯茶☚
%