美文网首页
绘制圆角边框、文字 生成图片

绘制圆角边框、文字 生成图片

作者: wustzhy | 来源:发表于2020-03-16 10:12 被阅读0次
// 创建"边框、文字" 图
+ (UIImage *)zy_imageWithBorderColor:(UIColor *)bColor borderWidth:(CGFloat)borderWidth borderRadius:(CGFloat)borderRadius text:(NSString *)text textColor:(UIColor *)tColor font:(UIFont *)font inset:(UIEdgeInsets)inset; {
    
    CGSize textSize = [text sizeWithFont:font maxW:MAXFLOAT];
    CGSize innerSize = CGSizeMake(inset.left + textSize.width + inset.right, inset.top + textSize.height + inset.bottom);
    CGRect textFrame = CGRectMake(inset.left + borderWidth, inset.top + borderWidth, textSize.width, textSize.height);
    
    CGRect outRoundFrame = CGRectMake(0, 0, innerSize.width + 2*borderWidth, innerSize.height + 2*borderWidth);
    // 用UIGraphics进行2D图像渲染 不要用UIGraphicsBeginImageContext(size); 不然图片会模糊
    UIGraphicsBeginImageContextWithOptions(outRoundFrame.size, NO, 0.0);
    
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(contextRef, kCGBlendModeCopy);
    // 设置透明背景色
    CGContextSetFillColorWithColor(contextRef, [UIColor clearColor].CGColor);
    CGContextFillRect(contextRef, outRoundFrame);
    
    // 画外矩形
    {
        CGPathRef pathRef = CGPathCreateWithRoundedRect(outRoundFrame, borderWidth+borderRadius, borderWidth+borderRadius, NULL);
        CGContextAddPath(contextRef, pathRef);
        CGPathRelease(pathRef);
        CGContextSetFillColorWithColor(contextRef, bColor.CGColor);
        CGContextFillPath(contextRef);
    }
    
    // 有边框,画内矩形
    CGPathRef pathRef = CGPathCreateWithRoundedRect(CGRectMake(borderWidth, borderWidth, innerSize.width, innerSize.height),
                                                    borderRadius,
                                                    borderRadius,
                                                    NULL);
    CGContextAddPath(contextRef, pathRef);
    CGPathRelease(pathRef);
    CGContextSetFillColorWithColor(contextRef, [UIColor clearColor].CGColor);
    CGContextFillPath(contextRef);
    
    NSDictionary *attr = @{NSFontAttributeName: font, NSForegroundColorAttributeName : tColor };
    //位置显示
    [text drawInRect:textFrame withAttributes:attr];
    
    UIImage *aimg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return aimg;
    
}

思路
1、画布 width、height,
2、外圆角矩形 width、height,使用边框颜色color
3、若边框宽度1,那么内圆角矩形 width-12、height-12,透明色
这样就可以画出边框宽度为1、color色的(width, height)矩形

部分参数说明
  inset:文字和边框距离
  

为什么不使用bezierPath呢,因为这篇文章 有讲,bezierPath提供的api绘制圆角矩形,圆角处模糊严重。

相关文章

  • 绘制圆角边框、文字 生成图片

    思路1、画布 width、height,2、外圆角矩形 width、height,使用边框颜色color3、若边框...

  • Image

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

  • 图片处理

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

  • 边框 背景

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

  • css之border

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

  • iOS 设置渐变色圆角边框

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

  • 好程序员web前端培训分享CSS3 边框

    好程序员web前端培训分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 ...

  • UIView任意角圆角和圆角边框

    圆角原理:设置view.layer.mask该遮罩层。 圆角边框:在view.layer 上增加一层,绘制圆角边框...

  • CSS3 边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 Photo...

  • CSS3边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 Photo...

网友评论

      本文标题:绘制圆角边框、文字 生成图片

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