iOS – 实现圆角的方法总结

作者: ShIwEn9 | 来源:发表于2019-08-26 22:31 被阅读0次

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

    打个广告:求职广告:本人实习生,刚离职工作,现在在杭州南京合肥找个工作,对我感兴趣的可以简信私聊我 0.0。谢谢~~~

    一、layer实现

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

    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 ; //遮罩 裁切多余的部分
    
    二、通过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;
    
    三、通过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();
    
    四、贝塞尔曲线+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

    到这里关于圆角的裁截就到这里了,希望大家对菜的抠脚的我大家多多提提意见;谢谢!!

    相关文章

      网友评论

        本文标题:iOS – 实现圆角的方法总结

        本文链接:https://www.haomeiwen.com/subject/bljjectx.html