// 创建"边框、文字" 图
+ (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绘制圆角矩形,圆角处模糊严重。
网友评论