利用位图上下文,绘制带边框圆角图片

2017-08-01  本文已影响39人  CaptainSirZero
/**
 绘制圆角图片

 @param boardW 边框宽度
 @param boardColor 边框颜色
 @param image 裁剪图片
 @return 圆角图片
 */
+ (UIImage *)imageWithBoard:(CGFloat)boardW
                 boardColor:(UIColor *)boardColor
                      image:(UIImage *)image;
+ (UIImage *)imageWithBoard:(CGFloat)boardW boardColor:(UIColor *)boardColor image:(UIImage *)image{
    // 带边框,相当于分两次绘制,第一次绘制: 绘制大圆;第二次绘制: 在大圆的基础上进行图片裁剪绘制
    // 1. 确定边框宽度和大圆尺寸
    CGSize size = CGSizeMake(image.size.width+2*boardW, image.size.height+2*boardW);

    // 2. 开启跟原始图片一样的位图上下文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);

    // 3. 设置一个大圆
    UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:(CGRectMake(0, 0, size.width, size.height))];

  // 3.1 设置填充颜色
    [boardColor set];

  // 3.2 填充展示
    [path fill];

    // 4.1 绘制一个小圆
    UIBezierPath * clipPath = [UIBezierPath bezierPathWithOvalInRect:(CGRectMake(boardW, boardW, image.size.width, image.size.height))];

    // 4.2 把圆形的路径设置成裁剪路径
    [clipPath addClip];  //默认超出裁剪区域以外的内容都裁剪掉

    // 5. 把图片绘制到上下文中(超出裁剪区域以外的内容都会裁剪掉)
    [image drawAtPoint:CGPointMake(boardW, boardW)];

    // 6. 从上下文中获取图片
    UIImage * tempImage = UIGraphicsGetImageFromCurrentImageContext();

    // 7. 关闭上下文
    UIGraphicsEndImageContext();
    
    return tempImage;
}

上一篇下一篇

猜你喜欢

热点阅读