当前位置: 首页 > 工具软件 > YYText > 使用案例 >

YYText 源码剖析:CoreText 与异步绘制

洪鸿博
2023-12-01

前言

YYText 是业界知名富文本框架,基于 CoreText 做了大量基础设施并且实现了两个上层视图组件:YYLabel 和 YYTextView。同其它 YYKit 组件一样,YYText 在性能方面表现优异,且功能出奇的强大,可以说是业界巅峰之作。

提起 YYText,都知道它的核心优化点:异步绘制,然而这只是冰山一角,YYText 中最为复杂和篇幅最多的是基于 CoreText 的各种计算,不得不说,源码中大量的计算很容易让人眼花缭乱。

若想深入理解 YYText 或者看懂本文,必须要了解 CoreText 基础知识并且有足够的耐心。框架代码量非常大,本文主要讲解框架基于 CoreText 的底层基础部分,不会过多的讲解 YYLabel 和 YYTextView 的细节。

一、框架总览

YYText GitHub

iOS UI 组件大都必须在主线程绘制,当绘制压力过大会造成界面卡顿,得益于多线程技术,我们可以在异步线程绘制图形从而减轻主线程压力。

YYText 核心思路:在异步线程创建图形上下文,然后利用 CoreText 绘制富文本,利用 CoreGraphics 绘制图片、阴影、边框等,最后将绘制完成的位图放到主线程显示。

步骤看起来很简单,源码中涉及到 CoreText 和 CoreGraphics 的绘制时需要大量的代码来计算位置,这也是本文的重点之一。为了简洁易懂,笔者会略过一些技术细节,比如纵向文本布局逻辑,一些奇怪的 BUG 修复代码。

希望读者朋友优先了解 CoreText 基础 (CoreText 官方介绍),这里放上两个结构图便于理解(图会有偏差):

二、CoreText 相关工具类

1、YYTextRunDelegate

在富文本中插入 key 为kCTRunDelegateAttributeNameCTRunDelegateRef实例可以定制一段区域的大小,通常使用这个方式来预留出一段空白,后面可以填充图片来达到图文混排的效果。而创建CTRunDelegateRef需要一系列的函数名,使用繁琐,框架使用一个类来封装以减小使用成本:

@interface YYTextRunDelegate : NSObject <NSCopying, NSCoding>
...
@property (nonatomic) CGFloat ascent;
@property (nonatomic) CGFloat descent;
@property (nonatomic) CGFloat width;
@end
复制代码
static void DeallocCallback(void *ref) {
    YYTextRunDelegate *self = (__bridge_transfer YYTextRunDelegate *)(ref);
    self = nil; // release
}
static CGFloat GetAscentCallback(void *ref) {
    YYTextRunDelegate *self = (__bridge YYTextRunDelegate *)(ref);
    return self.ascent;
}
...
@implementation YYTextRunDelegate
- (CTRunDelegateRef)CTRunDelegate CF_RETURNS_RETAINED {
    CTRunDelegateCallbacks callbacks;
    callbacks.dealloc = DeallocCallback;
    callbacks.getAscent = GetAscentCallback;
    ...
    return CTRunDelegateCreate(&callbacks, (__bridge_retained void *)(self.copy));
}
...
复制代码

使用CTRunDelegateCreate()创建一个CTRunDelegateRef,同时使用__bridge_retained转移内存管理,持有一个YYTextRunDelegate对象。在该类中有数个静态函数作为回调,比如当回调GetAscentCallback()函数时,将持有对象的ascent属性作为返回值。

**注意一:**这样做似乎存在内存管理问题,CTRunDelegateRef实例持有的YYTextRunDelegate对象如何释放? 答案就在CTRunDelegateRef释放时会走的DeallocCallback()回调中,将内存管理权限转移给一个YYTextRunDelegate局部变量自动管理内存。

**注意二:**可以看到CTRunDelegateCreate(&callbacks, (__bridge_retained void *)(self.copy))代码对self做了一个copy操作 (该类的 copy 为深拷贝) ,这样做是为了什么呢? 可能第一反应是想到CTRunDelegateRef持有self的副本是为了避免循环引用,然而该方法并没有让self持有CTRunDelegateCreate()后的实例,所以也不存在循环引用问题。 实际上这里应该只是创建一个副本,当该方法返回后保证配置数据的安全性 (避免被外部意外更改)。

2、YYTextLine

创建一个富文本,可以拿到CTLineRefCTRunRef以及一些结构数据 (比如ascent descent等),CTRunRef包含的数据内容并不是很多,所以框架没有专门做一个类来包装它。使用YYTextLine来包装CTLineRef计算保存一些数据便于后面的计算,比如使用CTLineGetTypographicBounds(...);方法来拿到ascent descent leading等。

计算 line 位置和大小

_bounds = CGRectMake(_position.x, _position.y - _ascent, _lineWidth, _ascent + _descent);
_bounds.origin.x += _firstGlyphPos;
复制代码

_position是指 line 的origin点位于context上下文的坐标转换为UIKit坐标系的值,那么结合上面的结构图2分析:_position.y - _ascent就是 line 的最小y值,_ascent + _descent就是 line 高度(没有算上行间距 leading)。

这里最小x值加了一个_firstGlyphPos,它是当前 line 第一个 run 相对于 line 的偏移,通过CTRunGetPositions(...);算出,可能有一种场景,line 的origin位置与第一个 run 的位置有偏移(笔者并没有模拟出这种情况)。

找出所有的占位 run

实际上这就是找出之前说的CTRunDelegateRef,框架每一个CTRunDelegateRef都对应了一个YYTextAttachment,它表示一个附件(图片、UIView、CALayer),具体实现后面会单独讲。这里只需要知道基本原理就是用CTRunDelegateRef占位,用YYTextAttachment填充。

当遍历 line 里面的 run 时,若该 run 包含了YYTextAttachment说明这是占位 run,那么至关重要的一步是计算这个 run 的位置和大小(便于后面将附件填充到正确位置)。

runPosition.x += _position.x;
runPosition.y = _position.y - runPosition.y;
runTypoBounds = CGRectMake(runPosition.x, runPosition.y - ascent, runWidth, ascent + descent);
复制代码

_position上面已经说明了意义,runPosition是当前 run 相对于当前 line origin的偏移,那么runPosition.x + _position.x表示了 run 相对于图形上下文的x方向位置,后面同理。

最终,将这个YYTextAttachment附件对象和 run 位置大小信息缓存起来(后面会专门分析实现逻辑)。

3、YYTextContainer

创建CTFrameRef使用CTFramesetterCreateFrame(...)方法,这个方法需要一个CGPathRef参数,为了使用简便,框架抽象了一个YYTextContainer类重点属性如下:

@property CGSize size;
@property UIEdgeInsets insets;
@property (nullable, copy) UIBezierPath *path;
@property (nullable, copy) NSArray<UIBezierPath *> *exclusionPaths;
复制代码

使用者可以简单的使用CGSize来制定富文本的大小,也可以用内存自动管理功能强大的UIBezierPath来制定路径,同时包含一个exclusionPaths排除路径。

     ┌─────────────────────────────┐  <------- container
     │                             │
     │    asdfasdfasdfasdfasdfa   <------------ container insets
     │    asdfasdfa   asdfasdfa    │
     │    asdfas         asdasd    │
     │    asdfa        <----------------------- container exclusion path
     │    asdfas         adfasd    │
     │    asdfasdfa   asdfasdfa    │
     │    asdfasdfasdfasdfasdfa    │
     │                             │
     └─────────────────────────────┘
复制代码

CoreText 是支持镂空效果的,就是由这个 exclusion path 控制。该类的属性访问都是线程安全的,还做了一些精致的容错。

三、YYTextLayout 核心计算类

YYTextLayout包含了布局一个富文本几乎所有的信息,同时还将众多的绘制相关 C 代码放在了这个文件里面,所以这个文件非常庞大。我们先不管这些绘制代码,YYTextLayout主要的作用是计算各种数据,为后面的绘制做准备。

核心计算在+ (YYTextLayout *)layoutWithContainer:(YYTextContainer *)container text:(NSAttributedString *)text range:(NSRange)range;初始化方法中,这个方法为后面的各种查询计算打下了数据基础,接下来就分析一下这个超过 500 行的初始化方法做了些什么。

1、计算绘制路径和路径的位置矩形

基于YYTextContainer对象计算得到CGPathRef是主要逻辑,为了避免矩阵属性出现负值,使用CGRectStandardize(...)来矫正。由于 UIKit 和 CoreText 坐标系的差别,最终得到的矩阵要先做一个坐标系翻转:

rect = CGRectApplyAffineTransform(rect, CGAffineTransformMakeScale(1, -1));
cgPath = CGPathCreateWithRect(rect, NULL);
复制代码

或者

CGAffineTransform trans = CGAffineTransformMakeScale(1, -1);
CGMutablePathRef transPath = CGPathCreateMutableCopyByTransformingPath(path, &trans);
复制代码

它们道理是一样的,都是沿着 x 轴翻转坐标系 180°,可能有人有疑问,UIKit 转换为 CoreText 坐标系不是除了翻转 180°,还要移动一个绘制区域高度么?确实这里少做了一个操作,那是因为框架是使用CTRunDraw(...)遍历绘制 run,在绘制 run 之前会用CGContextSetTextPosition(...)指定位置(这个位置是 line 相对于绘制区域计算的),所以这个地方的 y 坐标是否正确已经没有意义了。

绘制路径的矩形大小位置pathBox的计算:


比如这种情况, pathBox = (CGRect){50, 50, 100, 100},可想而知 pathBox指的就是真正绘制区域相对于绘制上下文的位置和大小,这个数据非常有用,意味着后面计算 line 和 run 的位置时,都要加上 cgPathBox.origin偏移,才能真正表示 line 和 run 相对于绘制上下文的位置(比如 line 的 origin是相对于绘制区域的一个点,而不是相对于绘制上下文)。

2、初始化 CTFramesetterRef 和 CTFrameRef

这一步很简单,利用两个函数就搞定:CTFramesetterCreateWithAttributedString(...) CTFramesetterCreateFrame(...)。值得注意的是框架支持了几个 CTFrameRef 的属性,比如kCTFramePathWidthAttributeName,这些属性同样是通过YYTextContainer配置的。

3、计算 line 总 frame 和行数

前面已经创建了一个富文本CTFrameRef,那么这里只需要遍历所有的 line 做计算,可以看到如下代码获取每一个 line 的位置大小:

// CoreText coordinate system
CGPoint ctLineOrigin = lineOrigins[i]; 
// UIKit coordinate system
CGPoint position;
position.x = cgPathBox.origin.x + ctLineOrigin.x;
position.y = cgPathBox.size.height + cgPathBox.origin.y - ctLineOrigin.y;

YYTextLine *line = [YYTextLine lineWithCTLine:ctLine position:position vertical:isVerticalForm];
CGRect rect = line.bounds;
复制代码

lineOrigins是通过CTFrameGetLineOrigins(...)得到的,所以需要转换为 UIKit 坐标系方便计算。可以看到转换时做了一个cgPathBox.origin的偏移,这就是之前计算的实际绘制矩形的偏移,以此得到的position就是相对于图形上下文的点了,然后利用这个点初始化YYTextLine,前面讲了YYTextLine的内部实现,这里就直接得到了当前 line 的位置和大小:rect

然后,利用CGRectUnion(...)函数将每一个 line 的rect合并起来,得到一个包含所有 line 的最小位置矩形textBoundingRect

计算 line 的行数

并不是一个 line 就占有一行,当有排除路径时,一行可能有两个 line:

所以,需要计算每个 line 所在的行,便于为后续的很多计算提供基础,比如最大行限制。

当当前 line 的高度大于 last line 的高度时,若当前 line 的 y0 在 baseline 以上,y1 在 baseline 以下,就说明没有换行。

当当前 line 的高度小于 last line 的高度时,若 last line 的 y0 在 baseline 以上,y1 在 baseline 以下,就说明没有换行。

4、获取行上下边界数组

typedef struct {
    CGFloat head;
    CGFloat foot;
} YYRowEdge;
复制代码

声明了一个YYRowEdge *lineRowsEdge = NULL;数组,YYRowEdge表示每一行的上下边界。计算逻辑大致是这样的: 遍历所有 line,当当前 line 和 last line 为同一行时,取 line 和 last line 共同的最大上下边界:

lastHead = MIN(lastHead, rect.origin.y);
lastFoot = MAX(lastFoot, rect.origin.y + rect.size.height);
复制代码

当当前 line 和 last line 为不同行时,取当前 line 的上下边界:

lastHead = rect.origin.y;
lastFoot = lastHead + rect.size.height;
复制代码

最终的结果可能是这样的:

foot1head2之间会存在一个间隙,这个间隙就是行间距,框架的处理是将这个间隙均分:

5、计算绘制区域总大小

上面已经计算了绘制路径的位置矩形pathBox,这只是实际绘制区域的大小,业务中若设置了YYTextContainer的线宽或者边距,那么实际业务需要的绘制区域总大小会更大:

图中蓝色填充区域即为实际绘制区域pathBox,绘制区域总大小应该是蓝色边框所覆盖的范围(请忽略线与线之间的小缝隙)。借助CGRectInset(...) UIEdgeInsetsInsetRect(...)等函数能轻易的计算出来,同样的需要用CGRectStandardize(...)纠正负值。

6、line 截断

当富文本超过限制时,可能需要对最后一行可显示的行末尾做一个省略号:aaaa...

首先有一个NSAttributedString *truncationToken;,这个 token 可以自定义,框架也有默认的,就是一个...省略号,然后将这个truncationToken拼接到最后一个line

NSMutableAttributedString *lastLineText = [text attributedSubstringFromRange:lastLine.range].mutableCopy;
[lastLineText appendAttributedString:truncationToken];
复制代码

当然,这样lastLineText肯定会超过绘制区域的范围,所以要使用系统提供的方法CTLineCreateTruncatedLine(...)来创建自动计算的截断 line,该方法返回一个CTLineRef,这里转换为YYTextLine并且作为YYTextLayout的一个属性truncatedLine

这也就意味着,YYText 的截断总是在富文本最后的,且只有一个。

7、缓存各种 BOOL 值

遍历富文本对象,缓存一系列的 BOOL 值:

void (^block)(NSDictionary *attrs, NSRange range, BOOL *stop) = ^(NSDictionary *attrs, NSRange range, BOOL *stop) {
    if (attrs[YYTextHighlightAttributeName]) layout.containsHighlight = YES;
    if (attrs[YYTextBlockBorderAttributeName]) layout.needDrawBlockBorder = YES;
    if (attrs[YYTextBackgroundBorderAttributeName]) layout.needDrawBackgroundBorder = YES;
    if (attrs[YYTextShadowAttributeName] || attrs[NSShadowAttributeName]) layout.needDrawShadow = YES;
...
};
[layout.text enumerateAttributesInRange:visibleRange options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired usingBlock:block];
复制代码

可以猜测,YYTextBlockBorderAttributeName等就是 YYText 定制的富文本属性,在初始化YYTextLayout时就将富文本中是否包含自定义 key 缓存起来。

想象一下,若此处不使用这些 BOOL 值,那么在绘制的时候框架也需要去遍历查找是否有自定义的 key,若有再执行自定义的绘制逻辑。也就是说,这个遍历是必须要做的,要么在初始化时做,要么是绘制的时候做。

按照框架的设定,初始化YYTextLayout和绘制都可以在主线程也可以在异步绘制执行,所以这里的目的主要不是为了将这个遍历逻辑放入异步线程,而是为了缓存。

初始化YYTextLayout时缓存这些 BOOL 值过后,二次绘制就不需要再遍历了,以此达到优化性能的目的。

8、合并所有的附件

前面有讲到,YYTextLine初始化时会将所有的附件及其相关位置信息装到数组里面,那么这里遍历所有的 line 将附件相关数组合并到一起,那么之后的绘制就不需要再去遍历 line 获取附件了。

9、小结

除开YYTextLayout初始化方法,还有在#pragma mark - Query标记下的一系列查询方法,这些查询方法都是基于上面的初始化计算数据。至于#pragma mark - Draw标记下的绘制相关方法后面再说。

YYTextLayout初始化方法非常的长,笔者试图将这个方法分解一下,发现这样会更复杂。原因是这个初始化方法里面包含了众多的需要手动管理的内存,比如CGPathRef CTFramesetterRef CTFrameRef等。

可能有人会说,哪个地方需要引用计数减一,手动release不就行了?

但是实际情况更加复杂,因为整个初始化过程随时可能会被中断。比如calloc(...)开辟内存可能会失败,CGPathCreateMutableCopy(...)创建路径可能会失败,所以,在任何情况失败需要中断初始化时,大概会如下写:

if (failed) {
    CFRelease(...);
    free(...);
    ...
    return nil;
}
复制代码

而且这个地方你必须要将前面所有手动管理的内存释放掉,当这个代码过多的时候,可能会让你疯掉。

所以作者用了一个很巧的方法,使用goto

fail:
    if (cgPath) CFRelease(cgPath);
    if (lineOrigins) free(lineOrigins);
    ...
    return nil;
复制代码

那么,当某个环节失败时,直接这么写:

if (failed) {
    goto fail;
}
复制代码

这个场景下,goto的使用确实非常适合。

四、自定义富文本属性

前面有提到 YYText 定制的富文本属性,

我们知道,NSMutableAttributedString对象使用addAttribute:value:range:等一系列方法可以添加富文本效果,这些效果有三个要素:名字 (key)、值 (value)、范围。YYText 也拓展了一些自己的名字 (YYTextAttribute 文件):

UIKIT_EXTERN NSString *const YYTextAttachmentAttributeName;
UIKIT_EXTERN NSString *const YYTextHighlightAttributeName;
...
复制代码

当然为这些 key 都创建了对应的 value (类),比如YYTextHighlightAttributeName对应YYTextHighlight。但是这些自定义的 key CoreText 是识别不了的,那么框架内部是如何处理的呢?

NSDictionary *attrs = (id)CTRunGetAttributes(run);
id anyValue = attrs[anyKey];
if (anyValue) { ... }
复制代码

很简单,实际上就是遍历富文本,通过上面这段代码就能找到某个 run 是否包含自定义的 key,然后做相应的绘制逻辑。

1、图文混排实现

YYText 大部分的自定义属性都算是“装饰”文本,所以只需要绘制的时候判断有没有包含对应的 key,若包含就做相应的绘制逻辑。但是有一个自定义属性比较特殊:

YYTextAttachmentAttributeName : YYTextAttachment
复制代码

因为这个是添加一个附件 (UIImage、UIView、CALayer),所以需要一个空位,那么设置这个自定义属性的时候还需要设置一个CTRunDelegateRef

NSMutableAttributedString *atr = [[NSMutableAttributedString alloc] initWithString:YYTextAttachmentToken];

YYTextAttachment *attach = [YYTextAttachment new];
attach.content = content; // UIImage、UIView、CALayer
...
[atr yy_setTextAttachment:attach range:NSMakeRange(0, atr.length)];

YYTextRunDelegate *delegate = [YYTextRunDelegate new];
...
CTRunDelegateRef delegateRef = delegate.CTRunDelegate;
[atr yy_setRunDelegate:delegateRef range:NSMakeRange(0, atr.length)];
复制代码

(1) 对齐方式

图文混排添加图片时,业务中往往有很多对齐方式,如何来对齐通过调整CTRunDelegateRefascent descent来控制,框架对其方式有三种:居上,居下,居中。

居上:

让占位 run 的ascent始终等于文本的ascent (若占位 run 太矮则贴着 baseline) 。

居下:

让占位 run 的descent始终等于文本的descent (若占位 run 太矮则贴着 baseline) 。

居中:

居中的计算相对复杂,需要让占位 run 的中点和文本的中点对齐 (如图),那么图中yOffset + (占位 run 的 height) * 0.5 就等于占位 run 的ascent (若占位 run 太矮则贴着 baseline) 。

当然,上面图中的图片可以为UIView CALayer。到目前为止,占位 run 的位置已经确定了,接下来就需要把 UIImage UIView CALayer绘制到相应的空位上了。

(2) 绘制附件

绘制的逻辑在YYTextLayout下的方法YYTextDrawAttachment(...),对于UIImage图片的附件,还能设置UIViewContentMode,会根据一开始设置的占位 run 的大小做图片填充变化,然后调用 CoreGraphics API 绘制图片:

CGImageRef ref = image.CGImage;
if (ref) {
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, 0, CGRectGetMaxY(rect) + CGRectGetMinY(rect));
    CGContextScaleCTM(context, 1, -1);
    CGContextDrawImage(context, rect, ref);
    CGContextRestoreGState(context);
}
复制代码

若附件的类型是UIView CALayer,那分别就需要额外的传入父视图、父 layer:targetView targetLayer,然后的操作就是简单的将UIView添加到targetView上或者将CALayer添加到targetLayer上。

2、点击高亮实现

YYTextHighlightAttributeName : YYTextHighlight
复制代码

YYTextHighlight包含了单击和长按的回调,还包括一些属性配置。在YYLabel中,通过下列方法来写触发逻辑:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
复制代码

涉及到判断点击的CGPoint点对应富文本中的具体位置,所以有很多复杂的计算,这里不展开了。

当找到了应该触发的YYTextHighlight,更换具体的YYTextLine为高亮状态的YYTextLine,然后重绘。当手松开时,切换会常态下的YYTextLine

这就是点击高亮的实现原理,实际上就是替换YYTextLine更新布局。

五、异步绘制

上面介绍了几种特殊的自定义富文本属性,对于其它的自定义属性,基本上都是使用 CoreGraphics API 绘制,比如边框、阴影等,当然 CoreText 自带有很多效果,YYText 做了一些改良和拓展。

可以看到绘制方法都会带有一个是否取消的 Block,比如static void YYTextDrawShadow(YYTextLayout *layout, CGContextRef context, CGSize size, CGPoint point, BOOL (^cancel)(void));。这个cancel就是用来判断是否需要取消本次绘制,这样就能在一次绘制的任意位置中断,及时的取消无用的绘制任务以提高效率。

YYText 富文本可以异步绘制,也可以在主线程绘制,创建布局类及其相关计算可以在任意线程,可以根据业务需求选择适合的策略。

具体实现有些复杂,所以关于异步绘制的具体原理可以看笔者专门的一篇博客: YYAsyncLayer 源码剖析:异步绘制 YYAsyncLayer 就是从 YYText 里面提取出来的组件,核心就是一个支持异步绘制的CALayer子类,相信看完 YYAsyncLayer 的解析会对异步绘制有较深的认识。

后语

YYText 确实过于重量,本文只是对基础部分取重点做了解析,除此之外还有非常多的计算和逻辑,感兴趣可以自行研究。

从代码质量来看,YYText 几乎无可挑剔,细节处理非常棒,逻辑代码很精炼,笔者尝试过重写部分逻辑代码,发现优化半天又回到了源码的写法 ?,不得不佩服作者的功底。

至此,笔者已经阅读了 YYKit 大部分源码,曾多次被作者的代码技巧所折服,几乎每一句代码都经得起推敲,笔者也更加深刻的理解了性能优化,明白了优化要从细节做起。

突然想起了笔者和一位好友的笑梗。每逢佳时:

“这确实是一个非常巧妙且令人兴奋的技巧”。

转载于:https://juejin.im/post/5d3fae8ee51d45620e0b99a5

 类似资料: