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

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

作者: CaptainSirZero | 来源:发表于2017-08-01 17:27 被阅读39次
    /**
     绘制圆角图片
    
     @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;
    }
    
    

    相关文章

      网友评论

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

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