在图片UIImage上绘制文字(字符串文字转图片)

时间:2022-01-12 07:21:48

很多时候我们需要在一张背景图上面绘制文字并且重新生成一张带有绘制好文字的图片,一开始我使用的是我上篇博客中提到的先自定义一个UIView然后再UIView上面绘制文字,绘制完成之后再通过将UIView转换成图片UIImage。即下面的代码自定义一个UIView.h中

@interface MyOtherView : UIView

@property (nonatomic,copy) NSString* text;

@end

自定义UIView.m中

#define IOS_7 ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)

#import "MyOtherView.h"

@implementation MyOtherView

- (void)drawRect:(CGRect)rect {
// Drawing code

//An opaque type that represents a Quartz 2D drawing environment.
//一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画
CGContextRef context = UIGraphicsGetCurrentContext();

/*写文字*/
UIFont *font = [UIFont boldSystemFontOfSize:50.0];//定义默认字体
if (IOS_7) {
NSMutableParagraphStyle* paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
paragraphStyle.alignment=NSTextAlignmentCenter;//文字居中:发现只能水平居中,而无法垂直居中
NSDictionary* attribute = @{
NSForegroundColorAttributeName:[UIColor redColor],//设置文字颜色
NSFontAttributeName:font,//设置文字的字体
NSKernAttributeName:@10,//文字之间的字距
NSParagraphStyleAttributeName:paragraphStyle,//设置文字的样式
};

//计算文字的宽度和高度:支持多行显示
CGSize sizeText = [_text boundingRectWithSize:self.bounds.size
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{
NSFontAttributeName:font,//设置文字的字体
NSKernAttributeName:@10,//文字之间的字距
}
context:nil].size;

CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;

//为了能够垂直居中,需要计算显示起点坐标x,y
CGRect rect = CGRectMake((width-sizeText.width)/2, (height-sizeText.height)/2, sizeText.width, sizeText.height);
[_text drawInRect:rect withAttributes:attribute];
}else{
CGContextSetRGBFillColor (context, 1, 0, 0, 1.0);//设置填充颜色:红色
[_text drawInRect:self.bounds withFont:font];
}

}

然而如果出现中文逗号等特殊字符时还是不能居中,于是我就试着写了一个UIImage.h的类别

@interface UIImage (mask)

/**
* 在一张背景图上绘制文字并且居中
*
* @param str 要绘制到图片上的文字
* @param image 背景图片
* @param fontSize 文字的大小
* @param textColor 文字颜色
*
* @return 绘制上文字的图片
*/

+ (UIImage *)createOtherMerchantImage:(NSString *)str withBgImage:(UIImage *)image withFont:(CGFloat)fontSize withTextColor:(UIColor *)textColor;

@end

.m

#import "UIImage+mask.h"

@implementation UIImage (mask)
+ (UIImage *)createOtherMerchantImage:(NSString *)str withBgImage:(UIImage *)image withFont:(CGFloat)fontSize withTextColor:(UIColor *)textColor

{

// UIImage *image = [ UIImage imageNamed:@"otherMerchantHeaderBg" ];

CGSize size= CGSizeMake (image. size . width , image. size . height ); // 画布大小

UIGraphicsBeginImageContextWithOptions (size, NO , 0.0 );

[image drawAtPoint : CGPointMake ( 0 , 0 )];

// 获得一个位图图形上下文

CGContextRef context= UIGraphicsGetCurrentContext ();

CGContextDrawPath (context, kCGPathStroke );

//画自己想画的内容。。。。。

NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
paragraphStyle.lineBreakMode = NSLineBreakByCharWrapping;
paragraphStyle.alignment = NSTextAlignmentCenter;

// [str drawAtPoint : CGPointMake ( image. size . width * 0.4 , image. size . height * 0.4 ) withAttributes : @{ NSFontAttributeName :[ UIFont fontWithName : @"Arial-BoldMT" size : 50 ], NSForegroundColorAttributeName :[ UIColor blackColor ],NSParagraphStyleAttributeName:paragraphStyle} ];

UIFont *font = [UIFont boldSystemFontOfSize:fontSize];//定义默认字体
//计算文字的宽度和高度:支持多行显示
CGSize sizeText = [str boundingRectWithSize:size
options:NSStringDrawingUsesLineFragmentOrigin
attributes:@{
NSFontAttributeName:font,//设置文字的字体
NSKernAttributeName:@10,//文字之间的字距
}
context:nil].size;

//为了能够垂直居中,需要计算显示起点坐标x,y
CGRect rect = CGRectMake((size.width-sizeText.width)/2, (size.height-sizeText.height)/2, sizeText.width, sizeText.height);


[str drawInRect:rect withAttributes:@{ NSFontAttributeName :[ UIFont fontWithName : @"Arial-BoldMT" size : fontSize ], NSForegroundColorAttributeName :textColor,NSParagraphStyleAttributeName:paragraphStyle} ];

//画自己想画的内容。。。。。

// 返回绘制的新图形

UIImage *newImage= UIGraphicsGetImageFromCurrentImageContext ();

UIGraphicsEndImageContext ();

return newImage;

}

@end

经过验证发现中文特殊字符还是不能居中,只不过这样写出来调用更简单更方便了