CoreText 的简单使用（四）
2021-06-20 本文已影响0人
KG丿夏沫
回顾
前面几篇文章我们介绍了，富文本的排版，并且封装了一套自己的基于 CoreText 富文本排版库，但是实际开发中，不会只限于此，因为我们开发中页面中都是图文混排的，所以我们在之前的基础上再次修改，达到能够支持图文混排的效果。
支持图文混排的 排版引擎
上一篇中我们进行封装读取的时候，JSON 数据中有一个 type 值，用来确认是否是 txt 格式的，现在我们再新增一个类型 img 类型，但是在这里还需要注意的是，我们开发的时候，图片都是从服务器获取的 url，然后本地下载后使用，但是使用 CoreText 排版，我们进行绘制的时候，需要确切的宽高值，这时候图片是还没有下载下来的，那么我们就获取不到图片的宽高了，并且图片资源不需要 color 以及 size 字段，那么我们就更换下这两个字段，换成 width 和 height 字段，让服务器给我们返回图片资源的宽高，方便我们进行绘制时计算高度。下面看下数据格式：
[{
"width":"2074",
"height":"1382",
"content":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597124636903&di=4e86100999f185237b482a27f7659ed4&imgtype=0&src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F688%2F660%2F259%2F20eedbcd17834ef3ab9730a5dab424d5.jpg",
"type":"img"
},
{
"color":"red",
"size":"12",
"content":"但是在实际开发的时候，不会只是简简单单显示这种，而且前后端数据交互啥的",
"type":"txt"
},
{
"width":"530",
"height":"398",
"content":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597124574690&di=3f11d257b7d6b59cc26e84518cf84856&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01dfcbc38578dac4c2.jpg",
"type":"img"
},
{
"color":"green",
"size":"16",
"content":"我们拿到是这种的数据的话，处理起来很麻烦，所以一般都是和后台进行约定",
"type":"txt"
},
{
"color":"blue",
"size":"20",
"content":"规定一种格式，方便前端进行使用，最常见的就是JSON格式直接返回排版需要的配置",
"type":"txt"
}
]
然后在进行后续操作前，先了解下CTFrame内部组成，CTFrame内部是由多个CTLine组成的，每个CTLine又是有单个或多个CTRun组成的，每个CTRun代表一组显示风格一致的文本。我们不需要手动去管理CTLine以及CTRun。虽然我们不用管理CTRun，但是我们可以指定某一个CTRun的CTRunDelegate来指定绘制时的宽度、高度、排列对齐方式等。
对于图片排版CoreText实际上是不支持的，但是我们使用CoreText绘制的时候，是在View的drawReact方法里面，所以我们可以在图片的位置预留出来空白，在drawReact方法里面绘制图片上去。
理解完这些后，就需要开始修改我们KGCTFrameParser类，使其支持img类型的解析，并且对img类型的CTRun设置CTRunDelegate。
改造KGCoreTextData类，增加图片相关信息，并且增加图片绘制区域相关的逻辑。
改造KGDisPlayView类，增加绘制图片相关的逻辑。
+ (KGCoreTextData *)parseJSONContent:(NSString *)jsonContent config:(KGCTFrameParserConfig *)config{
//创建图片信息保存数据
NSMutableArray *imageArr = [NSMutableArray array];
//通过JSON数据，得到富文本
NSAttributedString *content = [self loadJSONContent:jsonContent config:config imageArray:imageArr];
//创建CTFramesetterRef实例
CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)content);
//设置绘制边界大小
CGSize restrictSize = CGSizeMake(config.width, CGFLOAT_MAX);
//获得实际绘制所需要的大小
CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(frameSetter, CFRangeMake(0, 0), nil, restrictSize, nil);
//因为宽度已经国定，所以在这获取实际绘制需要的高度
CGFloat textHeight = coreTextSize.height;
//生成CTFrameRef实例
CTFrameRef frame = [self createFrameWithFrameSetter:frameSetter config:config height:textHeight];
//将生成好的CTFrameRef实例和计算好的绘制高度保存到CoreTextData实例中，最后返回实例
KGCoreTextData *data = [[KGCoreTextData alloc] init];
//设置实际绘制需要的实例对象
data.ctFrame = frame;
//设置实际绘制需要的高度
data.height = textHeight;
//设置图片绘制信息
data.imageArray = imageArr;
//因为底层库不受ARC约束，所以需要手动调用CFRelease来进行释放
//释放生成的CTFrameRef实例
CFRelease(frame);
//释放CTFramesetterRef实例
CFRelease(frameSetter);
//返回需要的绘制数据模型
return data;
}
然后修改loadJSONContent方法，保存当前节点图片信息，以及新建一个空白占位符。代码如下：
#pragma mark --根据JSON数据，创建富文本
+ (CTFrameRef)createFrameWithFrameSetter:(CTFramesetterRef)frameSetter config:(KGCTFrameParserConfig *)config height:(CGFloat)height{
//创建一个可变路径，图形上下文中要绘制的图形或线条的数学描述
CGMutablePathRef path = CGPathCreateMutable();
//追加矩形到可变路径
CGPathAddRect(path, NULL, CGRectMake(0, 0, config.width, height));
//对核心文本框架对象的引用
CTFrameRef frame = CTFramesetterCreateFrame(frameSetter, CFRangeMake(0, 0), path, NULL);
CFRelease(path);
return frame;
}
+ (UIColor *)colorFromDictionary:(NSDictionary *)dict{
if ([dict[@"color"] isEqualToString:@"red"]) {
return [UIColor redColor];
} else if ([dict[@"color"] isEqualToString:@"blue"]) {
return [UIColor blueColor];
} else if ([dict[@"color"] isEqualToString:@"green"]) {
return [UIColor greenColor];
}else{
return nil;
}
}
+ (NSAttributedString *)attributedingWithDictionary:(NSDictionary *)dic config:(KGCTFrameParserConfig *)config{
//创建一个可变字典，保存默认富文本信息配置选项
NSMutableDictionary *attributes = [NSMutableDictionary dictionaryWithDictionary:[self attributesWithConfig:config]];
//获取数据中颜色值
UIColor *color = [self colorFromDictionary:dic];
if (color) {
//如果数据中给出颜色值，替换默认设置的色值
attributes[NSForegroundColorAttributeName] = color;
}
CGFloat fontSize = [dic[@"size"] floatValue];
if (fontSize > 0) {
//获取数据返回的字体大小，如果存在，创建一个CTFontRef实例，替换默认设置项中的字体设置
CTFontRef fontRef = CTFontCreateWithName((CFStringRef)@"ArialMT", fontSize, NULL);
attributes[NSFontAttributeName] = (__bridge id)fontRef;
//释放CTFontRef实例
CFRelease(fontRef);
}
NSString *content = dic[@"content"];
//根据富文本培训选项以及给定字符串创建并返回一个富文本
return [[NSAttributedString alloc] initWithString:content attributes:attributes];
}
static CGFloat ascentCallback(void *ref){
return [(NSNumber *)[(__bridge NSDictionary *)ref objectForKey:@"height"] floatValue];
}
static CGFloat descentCallback(void *ref){
return 0;
}
static CGFloat widthCallback(void *ref){
return [(NSNumber *)[(__bridge NSDictionary *)ref objectForKey:@"width"] floatValue];
}
+ (NSAttributedString *)attributedingImageWithDict:(NSDictionary *)dict config:(KGCTFrameParserConfig *)config{
//创建CTRunDelegate回调
CTRunDelegateCallbacks callbacks;
//初始化callbacks
memset(&callbacks, 0, sizeof(CTRunDelegateCallbacks));
//设置回调版本号，初始化版本号为kCTRunDelegateVersion1
callbacks.version = kCTRunDelegateVersion1;
//为请求run委托以确定并返回在运行中字形的排版上升而调用的回调
callbacks.getAscent = ascentCallback;
//为请求run委托来确定并返回运行中符号的印刷下降而调用的回调
callbacks.getDescent = descentCallback;
//请求run委托来确定并返回运行中字形的排版宽度
callbacks.getWidth = widthCallback;
//创建CTRunDelegateRef实例
CTRunDelegateRef delegate = CTRunDelegateCreate(&callbacks, (__bridge void *)dict);
//使用0xFFCC作为空白占位符
unichar objectReplacementChar = 0xFFCC;
//转换为字符串
NSString *content = [NSString stringWithCharacters:&objectReplacementChar length:1];
//获取富文本配置属性
NSDictionary *atts = [self attributesWithConfig:config];
//创建富文本
NSMutableAttributedString *attributes = [[NSMutableAttributedString alloc] initWithString:content attributes:atts];
//在指定范围内设置单个属性的值
CFAttributedStringSetAttribute((CFMutableAttributedStringRef)attributes, CFRangeMake(0, 1), kCTRunDelegateAttributeName, delegate);
//释放CTRunDelegateRef实例
CFRelease(delegate);
return attributes;
}
+ (NSAttributedString *)loadJSONContent:(NSString *)jsonContent config:(KGCTFrameParserConfig *)config imageArray:(NSMutableArray *)imageArray{
//JSON字符串转NSData
NSData *data = [jsonContent dataUsingEncoding:NSUTF8StringEncoding];
//创建一个可变富文本，保存JSON数据
NSMutableAttributedString *result = [[NSMutableAttributedString alloc] init];
//这里做下容错处理，如果传入的json数据是非空并且有内容，进行数据转换
if (data) {
//因为JSON数据本身最外层就是一个数组，所以这块需要用数组去接受JSON解析后得到的值
NSArray *arr = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
//这里再做下容错处理，如果是NSArray类，那就说明数据没有问题，可以进行下一步操作
if ([arr isKindOfClass:[NSArray class]]) {
//直接使用for in遍历
for (NSDictionary *dict in arr) {
NSString *type = dict[@"type"];
//判断type类型是否是txt，因为现在只是对txt类型进行的处理，所以这块需要进行过滤
if ([type isEqualToString:@"txt"]) {
//获取到单条数据富文本信息
NSAttributedString *as = [self attributedingWithDictionary:dict config:config];
//将单条数据富文本信息拼接到总数据中
[result appendAttributedString:as];
}else if ([type isEqualToString:@"img"]) {
//创建图片信息保存模型
KGCoreTextImageData *imageData = [[KGCoreTextImageData alloc] init];
//设置图片连接
imageData.name = dict[@"content"];
//设置图片需要加载位置
imageData.position = [result length];
//保存到图片信息数组中
[imageArray addObject:imageData];
//获取到单条数据富文本信息
NSAttributedString *as = [self attributedingImageWithDict:dict config:config];
//将单条数据富文本信息拼接到总数据中
[result appendAttributedString:as];
}
}
}
}
return result;
}
+ (KGCoreTextData *)parseJSONContent:(NSString *)jsonContent config:(KGCTFrameParserConfig *)config{
//创建图片信息保存数据
NSMutableArray *imageArr = [NSMutableArray array];
//通过JSON数据，得到富文本
NSAttributedString *content = [self loadJSONContent:jsonContent config:config imageArray:imageArr];
//创建CTFramesetterRef实例
CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)content);
//设置绘制边界大小
CGSize restrictSize = CGSizeMake(config.width, CGFLOAT_MAX);
//获得实际绘制所需要的大小
CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(frameSetter, CFRangeMake(0, 0), nil, restrictSize, nil);
//因为宽度已经国定，所以在这获取实际绘制需要的高度
CGFloat textHeight = coreTextSize.height;
//生成CTFrameRef实例
CTFrameRef frame = [self createFrameWithFrameSetter:frameSetter config:config height:textHeight];
//将生成好的CTFrameRef实例和计算好的绘制高度保存到CoreTextData实例中，最后返回实例
KGCoreTextData *data = [[KGCoreTextData alloc] init];
//设置实际绘制需要的实例对象
data.ctFrame = frame;
//设置实际绘制需要的高度
data.height = textHeight;
//设置图片绘制信息
data.imageArray = imageArr;
//因为底层库不受ARC约束，所以需要手动调用CFRelease来进行释放
//释放生成的CTFrameRef实例
CFRelease(frame);
//释放CTFramesetterRef实例
CFRelease(frameSetter);
//返回需要的绘制数据模型
return data;
}
新建一个类用来保存图片数据，代码如下：
#import <Foundation/Foundation.h>
NS_ASSUME_NONNULL_BEGIN
@interface KGCoreTextImageData : NSObject
/** 图片地址 */
@property (nonatomic, copy) NSString *name;
/** 图片位置 */
@property (nonatomic, assign) NSInteger position;
/** 绘制边界 */
@property (nonatomic, assign) CGRect imagePosition;
@end
NS_ASSUME_NONNULL_END
#import "KGCoreTextImageData.h"
@implementation KGCoreTextImageData
@end
修改KGCoreTextData类，新增保存图片信息数组属性。代码如下：
#import <Foundation/Foundation.h>
NS_ASSUME_NONNULL_BEGIN
@interface KGCoreTextData : NSObject
/** CTFrameRef实例 */
@property (nonatomic, assign) CTFrameRef ctFrame;
/** 实际绘制所需要的高度 */
@property (nonatomic, assign) CGFloat height;
/** 保存图片绘制信息 */
@property (nonatomic, copy) NSArray *imageArray;
@end
NS_ASSUME_NONNULL_END
#import "KGCoreTextData.h"
#import "KGCoreTextImageData.h"
@implementation KGCoreTextData
- (void)setCtFrame:(CTFrameRef)ctFrame{
if (_ctFrame != ctFrame) {
if (_ctFrame != nil) {
CFRelease(_ctFrame);
}
CFRetain(ctFrame);
_ctFrame = ctFrame;
}
}
- (void)dealloc
{
if (_ctFrame != nil) {
CFRelease(_ctFrame);
_ctFrame = nil;
}
}
- (void)setImageArray:(NSArray *)imageArray{
_imageArray = imageArray;
[self chackImagePosition];
}
- (void)chackImagePosition{
//容错处理，当没有图片时不再进行后续操作
if (self.imageArray.count == 0) {
return;
}
//获取当前CTFrame实例的行信息
NSArray *lines = (NSArray *)CTFrameGetLines(self.ctFrame);
//获取行数
int linesCount = (int)[lines count];
//CTFrameGetLines返回的行数组中相对于路径边界盒原点的对应行的原点保存数组
CGPoint lineOrigin[linesCount];
//复制帧的线源范围
CTFrameGetLineOrigins(self.ctFrame, CFRangeMake(0, 0), lineOrigin);
//设置图片位置初始值，默认为0
int imgIndex = 0;
//读取数组中图片信息
KGCoreTextImageData *imageData = self.imageArray[0];
//循环去读图片信息
for (int i = 0; i < linesCount; i++) {
//容错处理，如果图片信息不存在，直接返回
if (imageData == nil) {
break;
}
//读取单行信息
CTLineRef line = (__bridge CTLineRef)lines[i];
//获取单个CTLine中CTRun
NSArray *runObjectArray = (NSArray *)CTLineGetGlyphRuns(line);
for (id runOjb in runObjectArray) {
//读取单个CTRun
CTRunRef run = (__bridge CTRunRef)runOjb;
//获取单个CTRun的布局属性
NSDictionary *runAttributes = (NSDictionary *)CTRunGetAttributes(run);
//获取CTRunDelegate不透明对象的类型
CTRunDelegateRef delegate = (__bridge CTRunDelegateRef)[runAttributes valueForKey:(id)kCTRunDelegateAttributeName];
//容错处理，如果代理不存在直接跳过本次循环
if (delegate == nil) {
continue;
}
//创建委托对象
NSDictionary *metaDic = CTRunDelegateGetRefCon(delegate);
//容错处理，如果返回值不是字典类型，跳过本次循环
if (![metaDic isKindOfClass:[NSDictionary class]]) {
continue;
}
CGRect runBounds;
CGFloat ascent;
CGFloat descent;
//获取运行的排版边界
runBounds.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &ascent, &descent, NULL);
runBounds.size.height = ascent + descent;
//确定字符串索引的图形偏移量或偏移量
CGFloat xOffset = CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL);
runBounds.origin.x = lineOrigin[i].x + xOffset;
runBounds.origin.y = lineOrigin[i].y;
runBounds.origin.y -= descent;
//获取绘制路径
CGPathRef pathRef = CTFrameGetPath(self.ctFrame);
//包含图形路径中所有点的边界框
CGRect colReact = CGPathGetBoundingBox(pathRef);
//返回一个矩形，其原点与源矩形的原点偏移
CGRect delegateReact = CGRectOffset(runBounds, colReact.origin.x, colReact.origin.y);
//设置图片数据区域
imageData.imagePosition = delegateReact;
imgIndex++;
if (imgIndex == self.imageArray.count) {
imageData = nil;
break;
}else{
imageData = self.imageArray[imgIndex];
}
}
}
}
@end
最后修改KGDisPlayView，代码如下：
#import "KGDisPlayView.h"
#import "KGCoreTextImageData.h"
@implementation KGDisPlayView
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
if (self.data) {
CTFrameDraw(self.data.ctFrame, context);
}
if (self.data.imageArray.count > 0) {
for (KGCoreTextImageData *obj in self.data.imageArray) {
CGContextDrawImage(context, obj.imagePosition, KGImage(obj.name).CGImage);
}
}
}
@end
到此框架改版完成了，然后运行下，最后效果如下：
20200811002.png
到这里基本上一个常见的图文混排框架就写好了，然后或许可能根据业务不同做一些微调。下一篇探索框架中对图片添加点击事件。
系列文章:
<a href="https://juejin.cn/post/6970879379425460255/">《CoreText的简单使用（一）》</a>
<a href="https://juejin.cn/post/6970879593129443336/">《CoreText的简单使用（二）》</a>
<a href="https://juejin.cn/post/6970880935327694879/">《CoreText的简单使用（三）》</a>
<a href="https://juejin.cn/post/6970881236936081439/">《CoreText的简单使用（四）》</a>
<a href="https://juejin.cn/post/6970881873304092686/">《CoreText 的简单使用（五）》</a>
