10 (OC)* Coretext

CoreText实现

看上图，我们可以知道，一个View包括CTFrame，CTFrame中间包括许多行CTLine，而一个CTLine中包括许多CTRun

我们主要说说CTLine和CTRun

    CTLine其实比较好理解，当我们用UILabel显示文本内容时，一行就是一个CTLine，一个CTLine中有一个或者多个CTRun，CTRun的个数取决于文本的具体内容，如果一行里面有两种大小的文字或者两种颜色不通的文字，可以简单的认为这一行就有两个CTRun，其中CTRun还可以是图片

1. CoreText框架基础

CoreText是Mac OS和iOS系统中处理文本的low-level API, 不管是使用OC还是swift, 实际我们使用CoreText都还是间接或直接使用C语言在写代码。CoreText是iOS和Mac OS中文本处理的根基, TextKit和WebKit都是构建于其上。

常用类、属性

CTFrameRef

CTFramesetterRef

CTLineRef

CTRunRef

CTTypesetterRef

CTGlyphInfoRef （NSGlyphInfo）

CTParagraphStyleRef （NSParagraphStyle）

CTFontRef （UIFont）

CFArrayRef （NSArray）

分析：

coreText 属于怎样一套API？

字体结构：

当我们进行字体绘制的时候很重要。

- CTFrame可以想象成画布, 画布的大小范围由CGPath决定
- CTFrame由很多CTLine组成, CTLine表示为一行
- CTLine由多个CTRun组成, CTRun相当于一行中的多个块, 但是CTRun不需要你自己创建, 由NSAttributedString的属性决定, 系统自动生成。每个CTRun对应不同属性。
- CTFramesetter是一个工厂, 创建CTFrame, 一个界面上可以有多个CTFrame
- CTFrame就是一个基本画布，然后一行一行绘制。 CoreText会自动根据传入的NSAttributedString属性创建CTRun，包括字体样式，颜色，间距等

更多详细的基础知识见末尾参考。

流程

如下图所示，这就是CoreText的基本处理流程：

 

1、创建AttributedString，定义样式

2、通过 CFAttributedStringRef 生成 CTFramesetter

3、通过CTFramesetter得到CTFrame

4、绘制 (CTFrameDraw)

5、如果有图片存在，先在AttributedString 对应位置添加占位符

6、通过回调函数确定图片的宽高（CTRunDelegateCallbacks）

7、遍历到对应CTRun上、获取对应CGRect、绘制图片（CGContextDrawImage）

2. 基本的文本样式实操

CoreText是需要自己处理绘制，不像UILabel等最上层的控件 ，所以我们必须在drawRect中绘制，为了更好地使用，我们稍微封装一下，自定义一个UIView。

我们在使用上层的控件时，坐标系的原点在左上角，而底层的Core Graphics的坐标系原点则是在左下角，以下是一个最基本的绘制示例：

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    //step 1:获取当前画布的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();

    //step 2:
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, self.bounds);

    //step 3:
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"xXHhofiyYI这是一段中文，前面是大小写"];

    //step 4:
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, [attributedString length]), path, NULL);

    //step 5:
    CTFrameDraw(frame,context);

    //step 6:
    CFRelease(frame);
    CFRelease(path);
    CFRelease(framesetter);
    //使用Create函数建立的对象引用，必须要使用CFRelease掉。
}

效果如下:

结果分析：发现文案是反的。原因就是因为coreText的坐标系是和UIKit的坐标系不一样的：

 

如上图，CoreText是基于CoreGraphics的，所以坐标系原点是左下角，我们需要进行翻转。将Y轴从向上转换为向下。

CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

翻转后，下面来进行一个最基本的富文本示例：

step 4 添加
    [attr addAttribute:(NSString *)kCTBackgroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, 10)];
    [attr addAttribute:(NSString *)kCTFontAttributeName value:(__bridge id _Nonnull)(fontRef) range:NSMakeRange(0, 10)];

效果如下:

 

上面的绘制方式是基于CTFrame绘制，还可以按行和按run绘制：

按CTLine绘制

// 1.获得CTLine数组
let lines = CTFrameGetLines(frame)
// 2.获得行数
let numberOfLines = CFArrayGetCount(lines)
// 3.获得每一行的origin, CoreText的origin是在字形的baseLine处的, 请参考字形图
var lineOrigins = [CGPoint](count: numberOfLines, repeatedValue: CGPointZero)
CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), &lineOrigins)
// 4.遍历每一行进行绘制
for index in 0..<numberOfLines {
  let origin = lineOrigins[index]
  // 参考: http://swifter.tips/unsafe/
  let line = unsafeBitCast(CFArrayGetValueAtIndex(lines, index), CTLine.self)
  // 设置每一行的位置
  CGContextSetTextPosition(context, origin.x, origin.y)
  // 开始一行的绘制
  CTLineDraw(line, context)
}

按CTRun绘制

用下面函数替换CTLineDraw(line, context)这一句就可以了, 效果也如上面。

// 画一行
func drawLine(line: CTLine, context: CGContext) {
   let runs = CTLineGetGlyphRuns(line) as Array
   runs.forEach { run in
       CTRunDraw(run as! CTRun, context, CFRangeMake(0, 0))
       }
   }
}

3. 图文混排

CoreText本身是不提供UIImage的绘制，所以UIImage肯定只能通过Core Graphics绘制，但是绘制时双必须要知道此绘制单元的长宽，庆幸的是CoreText绘制的最小单元CTRun提供了CTRunDelegate，也就是当设置了kCTRunDelegateAttributeName过后，CTRun的绘制时所需的参考（长宽等）将可从委托中获取，我们即可通过此方法实现图片的绘制。在需要绘制图片的位置，提前预留空白占位。
CTRun有几个委托用以实现CTRun的几个参数的获取。

以下是CTRunDelegateCallbacks的几个委托代理 。

typedef struct
{
    CFIndex                         version;
    CTRunDelegateDeallocateCallback dealloc;
    CTRunDelegateGetAscentCallback  getAscent;
    CTRunDelegateGetDescentCallback getDescent;
    CTRunDelegateGetWidthCallback   getWidth;
} CTRunDelegateCallbacks;

以下是一个最基本的图片绘制原型：遍历查询图片，即查找含有imgName attribute的CTRun,并绘制。

step 4 前面添加:

CTRunDelegateCallbacks imageCallBacks;
imageCallBacks.version = kCTRunDelegateCurrentVersion;
imageCallBacks.dealloc = ImgRunDelegateDeallocCallback;
imageCallBacks.getAscent = ImgRunDelegateGetAscentCallback;
imageCallBacks.getDescent = ImgRunDelegateGetDescentCallback;
imageCallBacks.getWidth = ImgRunDelegateGetWidthCallback;

NSString *imgName = @"test.jpg";
CTRunDelegateRef imgRunDelegate = CTRunDelegateCreate(&imageCallBacks, (__bridge void * _Nullable)(imgName));//我们也可以传入其它参数
NSMutableAttributedString *imgAttributedStr = [[NSMutableAttributedString alloc]initWithString:@" "];
[imgAttributedStr addAttribute:(NSString *)kCTRunDelegateAttributeName value:(__bridge id)imgRunDelegate range:NSMakeRange(0, 1)];
CFRelease(imgRunDelegate);

#define kImgName @"imgName"
//图片占位符添加
[imgAttributedStr addAttribute:kImgName value:imgName range:NSMakeRange(0, 1)];
[attributedString insertAttributedString:imgAttributedStr atIndex:30];

step 5 后面添加:

//绘制图片
CFArrayRef lines = CTFrameGetLines(frame);
CGPoint lineOrigins[CFArrayGetCount(lines)];
CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), lineOrigins);//获取第行的起始点
for (int i = 0; i < CFArrayGetCount(lines); i++) {
    CTLineRef line = CFArrayGetValueAtIndex(lines, i);
    CGFloat lineAscent;//上缘线
    CGFloat lineDescent;//下缘线
    CGFloat lineLeading;//行间距
    CTLineGetTypographicBounds(line, &lineAscent, &lineDescent, &lineLeading);//获取此行的字形参数

    //获取此行中每个CTRun
    CFArrayRef runs = CTLineGetGlyphRuns(line);
    for(int j = 0;j< CFArrayGetCount(runs);j++){
        CGFloat runAscent;//此CTRun上缘线
        CGFloat runDescent;//此CTRun下缘线
        CGPoint lineOrigin = lineOrigins[i];//此行起点

        CTRunRef run = CFArrayGetValueAtIndex(runs, j);//获取此CTRun
        NSDictionary *attributes = (NSDictionary *)CTRunGetAttributes(run);

        CGRect runRect;
        //获取此CTRun的上缘线，下缘线,并由此获取CTRun和宽度
        runRect.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &runAscent, &runDescent, NULL);

        //CTRun的X坐标
        CGFloat runOrgX = lineOrigin.x + CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL);
        runRect = CGRectMake(runOrgX,lineOrigin.y-runDescent,runRect.size.width,runAscent+runDescent );

        NSString *imgName = [attributes objectForKey:kImgName];
        if (imgName) {
            UIImage *image = [UIImage imageNamed:imgName];
            if(image){
                CGRect imageRect ;
                imageRect.size = image.size;
                imageRect.origin.x = runRect.origin.x + lineOrigin.x;
                imageRect.origin.y = lineOrigin.y;
                CGContextDrawImage(context, imageRect, image.CGImage);
            }
        }
    }
}

代理函数：

#pragma mark - CTRunDelegateCallbacks

void ImgRunDelegateDeallocCallback( void* refCon ){

}

CGFloat ImgRunDelegateGetAscentCallback( void *refCon ){
    NSString *imageName = (__bridge NSString *)refCon;
    return [UIImage imageNamed:imageName].size.height;
}

CGFloat ImgRunDelegateGetDescentCallback(void *refCon){
    return 0;
}

CGFloat ImgRunDelegateGetWidthCallback(void *refCon){
    NSString *imageName = (__bridge NSString *)refCon;
    return [UIImage imageNamed:imageName].size.width;
}

效果如下：

 

基于以上这个原型，我们可以封装一个比较完整的富文本控件，比如定义HTML协议或者JSON，然后在内部进行解析，然后根据类型与相应的属性进行绘制。

4. 图片点击事件

CoreText就是将内容绘制到画布上，自然没有事件处理，我们要实现图片与链接的点击效果就需要使用触摸事件了。当点击的位置在图片的Rect中，那我们做相应的操作即可，所以基本步骤如下：

记录所有图片所在画布中作为一个CTRun的位置 -> 获取每个图片所在画布中所占的Rect矩形区域 -> 当点击事件发生时，判断点击的点是否在某个需要处理的图片Rect内。

这里为了演示的简单，我们直接在drawRect中记录图片的相应坐标，但是一般我们会在CTRichView渲染之前对数据进行相应的处理，比如处理传入的样式数据、记录图片与链接等信息。

用于记录图片信息类

@interface CTImageData : NSObject
@property (nonatomic,strong) NSString *imgHolder;
@property (nonatomic,strong) NSURL *imgPath;
@property (nonatomic) NSInteger idx;
@property (nonatomic) CGRect imageRect;
@end

//记录图片信息

//以下操作仅仅是演示示例，实战时请在渲染之前处理数据，做到最佳实践。
if(!_imageDataArray){
    _imageDataArray = [[NSMutableArray alloc]init];
}
BOOL imgExist = NO;
for (CTImageData *ctImageData in _imageDataArray) {
    if (ctImageData.idx == idx) {
        imgExist = YES;
        break;
    }
}
if(!imgExist){
    CTImageData *ctImageData = [[CTImageData alloc]init];
    ctImageData.imgHolder = imgName;
    ctImageData.imageRect = imageRect;
    ctImageData.idx = idx;
    [_imageDataArray addObject:ctImageData];
}

- (void)setupEvents{
    UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(userTapGestureDetected:)];

    [self addGestureRecognizer:tapRecognizer];

    self.userInteractionEnabled = YES;
}

- (void)userTapGestureDetected:(UIGestureRecognizer *)recognizer{
    CGPoint point = [recognizer locationInView:self];
    //先判断是否是点击的图片Rect
    for(CTImageData *imageData in _imageDataArray){
        CGRect imageRect = imageData.imageRect;
        CGFloat imageOriginY = self.bounds.size.height - imageRect.origin.y - imageRect.size.height;
        CGRect rect = CGRectMake(imageRect.origin.x,imageOriginY, imageRect.size.width, imageRect.size.height);
        if(CGRectContainsPoint(rect, point)){
            NSLog(@"tap image handle");
            return;
        }
    }

    //再判断链接
}

5. 链接点击事件

记录链接信息类

@interface CTLinkData : NSObject
@property (nonatomic ,strong) NSString *text;
@property (nonatomic ,strong) NSString *url;
@property (nonatomic ,assign) NSRange range;
@end

记录链接信息

if(!_linkDataArray){
    _linkDataArray = [[NSMutableArray alloc]init];
}
CTLinkData *ctLinkData = [[CTLinkData alloc]init];
ctLinkData.text = [attributedString.string substringWithRange:linkRange];
ctLinkData.url = @"http://www.baidu.com";
ctLinkData.range = linkRange;
[_linkDataArray addObject:ctLinkData];

处理链接事件

- (void)userTapGestureDetected:(UIGestureRecognizer *)recognizer{
    CGPoint point = [recognizer locationInView:self];
    //先判断是否是点击的图片Rect
    //......
    //再判断链接
    CFIndex idx = [self touchPointOffset:point];
    if (idx != -1) {
        for(CTLinkData *linkData in _linkDataArray){
            if (NSLocationInRange(idx, linkData.range)) {
                NSLog(@"tap link handle,url:%@",linkData.url);
                break;
            }
        }
    }
}

根据点击点获取字符串偏移

- (CFIndex)touchPointOffset:(CGPoint)point{
    //获取所有行
    CFArrayRef lines = CTFrameGetLines(_ctFrame);

    if(lines == nil){
        return -1;
    }
    CFIndex count = CFArrayGetCount(lines);

    //获取每行起点
    CGPoint origins[count];
    CTFrameGetLineOrigins(_ctFrame, CFRangeMake(0, 0), origins);

    //Flip
    CGAffineTransform transform =  CGAffineTransformMakeTranslation(0, self.bounds.size.height);
    transform = CGAffineTransformScale(transform, 1.f, -1.f);

    CFIndex idx = -1;
    for (int i = 0; i< count; i++) {
        CGPoint lineOrigin = origins[i];
        CTLineRef line = CFArrayGetValueAtIndex(lines, i);

        //获取每一行Rect
        CGFloat ascent = 0.0f;
        CGFloat descent = 0.0f;
        CGFloat leading = 0.0f;
        CGFloat width = (CGFloat)CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
        CGRect lineRect = CGRectMake(lineOrigin.x, lineOrigin.y - descent, width, ascent + descent);

        lineRect = CGRectApplyAffineTransform(lineRect, transform);

        if(CGRectContainsPoint(lineRect,point)){
            //将point相对于view的坐标转换为相对于该行的坐标
            CGPoint linePoint = CGPointMake(point.x-lineRect.origin.x, point.y-lineRect.origin.y);
            //根据当前行的坐标获取相对整个CoreText串的偏移
            idx = CTLineGetStringIndexForPosition(line, linePoint);
        }
    }
    return idx;
}

6、微博类型富文本实现异步绘制

当我们涉及到图文混排时候的高度计算

http://www.jianshu.com/p/a7f55e456539

YYLable

1、解析@、超链接、图片、表情

2、逐行逐Run异步绘制，

3、点击高亮背景绘制

3、点击效果、事件

参考

iOS富文本

Text Programming Guide for iOS

CoreText基础概念