图片圆角设置

作者: Wang66 | 来源:发表于2015-12-10 18:45 被阅读671次

    方案一:切layer#

    直接设置该UIImageView的layer的cornerRadius属性(半径)为UIImageView宽度的一半。

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        _imgView.image = [UIImage imageNamed:@"1.jpg"];
        _imgView.layer.cornerRadius = _imgView.frame.size.width*0.5;
        _imgView.layer.masksToBounds = YES; // 超出部分裁剪掉
    } 
    

    这种方式非常简单,但是性能不太好,当有很多图片被切为圆角后,在上下滚动的时候有些卡顿。

    方案二:用Core Graphics在圆形上绘制一张图片,并把超出部分才剪掉

        // 开启图形上下文
        UIGraphicsBeginImageContext(self.size);
        
        // 获得上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 矩形框
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        
        // 画一个圆
        CGContextAddEllipseInRect(context, rect);
        
        // 按上面图形裁剪多余部分
        CGContextClip(context);
        
        // 将image绘制到刚才的圆形上
        UIImage *image = [UIImage imageNamed:@"1.jpg"];
        [image drawInRect:rect];
        
        // 获得上下文的图片
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        
        UIGraphicsEndImageContext();
    

    用上面的几行代码就可以实现图片切圆角了,但是,为了扩展性着想,我们应当将这些代码进行封装。封装的这个方法我们希望:只需传入图片名(imgName)就返回已经切好圆角的图片(UIImage)。
    可以新建一个UIImage的分类,在里面封装该实现。
    UIImage

    UIImage+CycleImage.h

    #import <UIKit/UIKit.h>
    
    @interface UIImage (CycleImage)
    
    
    - (UIImage *)cycleImage;
    
    
    + (UIImage *)cycleImageNamed:(NSString *)imgName;
    
    
    @end
    

    UIImage+CycleImage.m

    #import "UIImage+CycleImage.h"
    
    @implementation UIImage (CycleImage)
    
    - (UIImage *)cycleImage
    {
        // 开启图形上下文
        UIGraphicsBeginImageContext(self.size);
        
        // 获得上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 矩形框
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        
        // 画一个圆
        CGContextAddEllipseInRect(context, rect);
        
        // 裁剪成上面画的图形形状
        CGContextClip(context);
        
        // 将image绘制到刚才的圆形上
    //  UIImage *image = [UIImage imageNamed:@"1.jpg"];
    //  [image drawInRect:rect];
        [self drawInRect:rect];
        
        // 获得上下文的图片
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        
        UIGraphicsEndImageContext();
        
        
        return newImage;
    }
    
    
    + (UIImage *)cycleImageNamed:(NSString *)imgName
    {
        return [[UIImage imageNamed:imgName] cycleImage];
    }
    

    调用:

    // 图片圆角
    
    #import "MyViewController.h"
    #import "UIImage+CycleImage.h"
    
    @interface MyViewController ()
    
    @end
    
    @implementation MyViewController
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        _imgView.image = [UIImage cycleImageNamed:@"1.jpg"]; // 类方法
    //  _imgView.image = [[UIImage imageNamed:@"1.jpg"] cycleImage];  // 对象方法
    }
    
    
    @end
    

    相关文章

      网友评论

      • macfai:大神,这个方法在处理一张本地图片时候不错,但是处理网络来的图片怎么办?没有图片名称,只有一个链接,请问,能给点思路吗,跪求
        Wang66:@macfai 不好意思,之前看见你的评论忘了回复,直到刚才收到回复提醒才想起。上面推荐的文章很好,我也要学习学习。:stuck_out_tongue:
        macfai:@冯里 谢谢,我找到了
        冯里:@macfai 推荐一篇博文http://zyden.vicp.cc/zycornerradius/
      • 谁是我我我:大神,我按照你的方法进行了对图片的圆角处理..但是,最后,图片加载不上去.看不到效果self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(30, 60, 80, 80)];

        //self.imgView.backgroundColor = [UIColor redColor];
        _imgView.image = [UIImage cycleImageNamed:@"c_item0@2x.jpg"]; // 类方法
        //_imgView.image = [[UIImage imageNamed:@"c_item0@2x.jpg"] cycleImage]; // 对象方法
        [self.view addSubview:self.imgView];
        谁是我我我:@Wang66 好的👌🏻也怪我,我没有认真看里面的。仅仅是复制啦一下。谢谢你!祝工作愉快
        Wang66:@谁是我我我 刚看了下,当时写的时候犯了个很傻的错误(UIImage+CycleImage.m注释掉的两行,把图片写死成了1.jpg,当时没发现。现已更新。抱歉 :joy:

      本文标题:图片圆角设置

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