美文网首页iOS开发之常用技术点Cocoapods DR·Kun
YYText 源码剖析:CoreText 与异步绘制

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

作者: 波儿菜 | 来源:发表于2019-03-04 21:41 被阅读366次

    系列文章:
    YYText 源码剖析:CoreText 与异步绘制
    YYAsyncLayer 源码剖析:异步绘制
    YYCache 源码剖析:一览亮点
    YYModel 源码剖析:关注性能
    YYImage 源码剖析:图片处理技巧
    YYWebImage 源码剖析:线程处理与缓存策略

    前言

    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 官方介绍),这里放上两个结构图便于理解(图会有偏差):

    结构图1 结构图2

    二、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 大部分源码,曾多次被作者的代码技巧所折服,几乎每一句代码都经得起推敲,笔者也更加深刻的理解了性能优化,明白了优化要从细节做起。

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

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

    相关文章

      网友评论

        本文标题:YYText 源码剖析:CoreText 与异步绘制

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