您的位置:首页 > 移动开发 > IOS开发

完全封装简单的实现图片的圆形剪切效果

2015-12-21 10:47 489 查看
1.给UIImage添加分类

.h文件

#import <UIKit/UIKit.h>

@interface UIImage (WQ)
/**
 *  @param name        图片的名称
 *  @param borderWidth 圆形图片的外轮廓宽度
 *  @param borderColor 圆形图片的外轮廓颜色
 *
 */
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;

@end


.m文件的实现

#import "UIImage+WQ.h"
// 添加相关所需的库文件
#import <objc/message.h>
@implementation UIImage (WQ)
+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
{
// 1.加载原图
UIImage *oldImage = [UIImage imageNamed:name];

// 2.开启上下文
CGFloat imageW = oldImage.size.width + 2 * borderWidth;
CGFloat imageH = oldImage.size.height + 2 * borderWidth;
CGSize imageSize = CGSizeMake(imageW, imageH);
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

// 3.取得当前的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

// 4.画边框(大圆)
[borderColor set];
CGFloat bigRadius = imageW * 0.5; // 大圆半径
CGFloat centerX = bigRadius; // 圆心
CGFloat centerY = bigRadius;
CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
CGContextFillPath(ctx); // 画圆

// 5.小圆
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
// 裁剪(后面画的东西才会受裁剪的影响)
CGContextClip(ctx);

// 6.画图
[oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];

// 7.取图
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 8.结束上下文
UIGraphicsEndImageContext();

return newImage;
}

@end


2.在控制器中的使用

#import "ViewController.h"
#import "UIImage+WQ.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

// 1.直接初始化
UIImageView *shapedImageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
// 2.设置imgage可以自定相关配置
shapedImageView.image = [UIImage circleImageWithName:@"test" borderWidth:5 borderColor:[UIColor blueColor]];
[self.view addSubview:shapedImageView];
}

@end
 

最终的效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息