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

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

作者: 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;
}

相关文章

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

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • 图片处理

    1、 合成图片 2、 绘制圆角边框图片 3、递归下载图片 4、批量下载,顺序返回image

  • ios image圆角

    通过获取图片的上下文,绘制一个圆角矩形,然后,切割超出部分来获得圆角效果

  • 边框 背景

    1 边框 能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件 对于 border-im...

  • css之border

    css边框属性 通过css3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 border-radius b...

  • canvas 绘制带四周阴影效果的圆角图片

    绘制带四周阴影效果的圆角图片 想要绘制圆角图片一可以先绘制出圆角矩形,然后对画布进行剪切clip,这样在剪切过的画...

  • iOS 设置渐变色圆角边框

    iOS 设置渐变色圆角边框 *如下需求图,使用背景图片很难达到很好的效果 *就需要使用代码来绘制渐变色圆角边框

  • HTML5 Canvas笔记——绘制方形钟

    利用矩形的绘制,颜色与透明度,编程绘制方形钟 要求: (1)钟面的矩形边框应当是圆角矩形, (2)边框线要采用除默...

  • 画圆角及边框

    1.方式一: 最常见设计圆角,绘制边框的方法是利用CALayer的cornerRadius和borderWidth...

网友评论

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

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