CoreText入门(二)-绘制图片

本文的主要内容是如何使用在CoreText绘制的文本内容中添加图片的绘制,实现一个简单的图文混排。此外,因为图文的混排复杂度上会比单纯的文本绘制高一些,涉及道德CoreText的一些概念的API也会在这篇文章有进行相关的详细的讲解,辅助队代码的理解。

其它文章:
CoreText入门(一)-文本绘制
CoreText入门(二)-绘制图片
CoreText进阶(三)-事件处理
CoreText进阶(四)-文字行数限制和显示更多
CoreText进阶(五)- 文字排版样式和效果
CoreText进阶(六)-内容大小计算和自动布局
CoreText进阶(七)-添加自定义View和对其

本文的主要内容

  • CoreText框架中重要的类
    • CTFrame
    • CTLine
    • CTRun
    • CTRunDelegate
  • 绘制图片
    • 计算图片位置流程图
    • 关键代码
  • 一些问题
    • CF对象 vs OC对象
    • 手动释放内存

Demo:CoreTextDemo

CoreText框架中重要的类

CoreText框架中重要的类示例图

CoreText框架中重要的类示例图

CTFrame

如上图中最外层(蓝色框)的内容区域对应的就是CTFrame,绘制的是一整段的内容,CTFrame有以下几个常用的方法

  • CTFrameGetLines 获取CTFrame中包含所有的CTLine
  • CTFrameGetLineOrigins 获取CTFrame中每一行的其实坐标,结果保存在返回参数中
  • CTFrameDraw 把CTFrame绘制到CGContext上下文

CTLine

如上图红色框中的内容就是CTLine,一共有三个CTLine对象,CTLine有以下几个常用的方法

  • CTLineGetGlyphRuns 获取CTLine包含的所有的CTRun
  • CTLineGetOffsetForStringIndex 获取CTRun的起始位置

CTRun

如上图绿色框中的内容就是CTRun,每一行中相同格式的一块内容是一个CTRun,一行中可以存在多个CTRun,CTRun有以下几个常用的方法

  • CTRunGetAttributes 获取CTRun保存的属性,获取到的内容哦是通过CFAttributedStringSetAttribute方法设置给图片属性字符串的NSDictionary,key为kCTRunDelegateAttributeName,值为CTRunDelegateRef ,更具体的内容查看下面讲解
  • CTRunGetTypographicBounds 获取CTRun的绘制属性ascentdesent,返回值是CTRun的宽度
  • CTRunGetStringRange 获取CTRun字符串的Range

CTRunDelegate

CTRunDelegate和CTRun是紧密联系的,CTFrame初始化的时候需要用到的图片信息是通过CTRunDelegate的callback获得到的,更具体的内容查看下面讲解,CTRunDelegate有以下几个常用的方法

  • CTRunDelegateCreate 创建CTRunDelegate对象,需要传递CTRunDelegateCallbacks对象,使用CFAttributedStringSetAttribute方法把CTRunDelegate对象和NSAttributedString对象绑定,在CTFrame初始化的时候回调用CTRunDelegate对象里面CTRunDelegateCallbacks对象的回调方法返回AscentDescentWidth信息

创建CTRunDelegate对象,传递callback和参数的代码:

- (NSAttributedString *)imageAttributeString {
    // 1 创建CTRunDelegateCallbacks
    CTRunDelegateCallbacks callback;
    memset(&callback, 0, sizeof(CTRunDelegateCallbacks));
    callback.getAscent = getAscent;
    callback.getDescent = getDescent;
    callback.getWidth = getWidth;
    
    // 2 创建CTRunDelegateRef
    NSDictionary *metaData = @{@"width": @120, @"height": @140};
    CTRunDelegateRef runDelegate = CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData));
    
    // 3 设置占位使用的图片属性字符串
    // 参考:https://en.wikipedia.org/wiki/Specials_(Unicode_block)  U+FFFC  OBJECT REPLACEMENT CHARACTER, placeholder in the text for another unspecified object, for example in a compound document.
    unichar objectReplacementChar = 0xFFFC;
    NSMutableAttributedString *imagePlaceHolderAttributeString = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithCharacters:&objectReplacementChar length:1] attributes:[self defaultTextAttributes]];
    
    // 4 设置RunDelegate代理
    CFAttributedStringSetAttribute((CFMutableAttributedStringRef)imagePlaceHolderAttributeString, CFRangeMake(0, 1), kCTRunDelegateAttributeName, runDelegate);
    CFRelease(runDelegate);
    return imagePlaceHolderAttributeString;
}
  • CTRunDelegateGetRefCon 获取到CTRunDelegateCreate初始时候设置的元数据,如下代码中的自动变量metaData
    // 2 创建CTRunDelegateRef
    NSDictionary *metaData = @{@"width": @120, @"height": @140};
    CTRunDelegateRef runDelegate = CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData));

绘制图片

绘制图片最重要的一个步骤就是计算图片所在的位置,最后是在drawRect绘制方法中使用CGContextDrawImage方法进行绘制图片即可

计算图片位置流程图

计算图片位置流程图

计算图片位置流程图

效果图

效果图

关键代码

创建CTRunDelegate对象,传递callback和参数的代码,创建CTFrame对象的时候会通过CTRunDelegatecallbak的几个回调方法getDescentgetDescentgetWidth返回绘制的图片的信息,方法getDescentgetDescentgetWidth中的参数是CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData))方法中的metaData参数,特别地,这里的参数需要把所有权交给CF对象,而不能使用简单的桥接,防止ARC模式下的OC对象自动释放,在方法getDescentgetDescentgetWidth访问会出现BAD_ACCESS的错误

- (NSAttributedString *)imageAttributeString {
    // 1 创建CTRunDelegateCallbacks
    CTRunDelegateCallbacks callback;
    memset(&callback, 0, sizeof(CTRunDelegateCallbacks));
    callback.getAscent = getAscent;
    callback.getDescent = getDescent;
    callback.getWidth = getWidth;
    
    // 2 创建CTRunDelegateRef
    NSDictionary *metaData = @{@"width": @120, @"height": @140};
    CTRunDelegateRef runDelegate = CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData));
    
    // 3 设置占位使用的图片属性字符串
    // 参考:https://en.wikipedia.org/wiki/Specials_(Unicode_block)  U+FFFC  OBJECT REPLACEMENT CHARACTER, placeholder in the text for another unspecified object, for example in a compound document.
    unichar objectReplacementChar = 0xFFFC;
    NSMutableAttributedString *imagePlaceHolderAttributeString = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithCharacters:&objectReplacementChar length:1] attributes:[self defaultTextAttributes]];
    
    // 4 设置RunDelegate代理
    CFAttributedStringSetAttribute((CFMutableAttributedStringRef)imagePlaceHolderAttributeString, CFRangeMake(0, 1), kCTRunDelegateAttributeName, runDelegate);
    CFRelease(runDelegate);
    return imagePlaceHolderAttributeString;
}

// MARK: - CTRunDelegateCallbacks 回调方法
static CGFloat getAscent(void *ref) {
    float height = [(NSNumber *)[(__bridge NSDictionary *)ref objectForKey:@"height"] floatValue];
    return height;
}

static CGFloat getDescent(void *ref) {
    return 0;
}

static CGFloat getWidth(void *ref) {
    float width = [(NSNumber *)[(__bridge NSDictionary *)ref objectForKey:@"width"] floatValue];
    return width;
}

计算图片所在的位置的代码:

- (void)calculateImagePosition {
    
    int imageIndex = 0;
    if (imageIndex >= self.richTextData.images.count) {
        return;
    }
    
    // CTFrameGetLines获取但CTFrame内容的行数
    NSArray *lines = (NSArray *)CTFrameGetLines(self.richTextData.ctFrame);
    // CTFrameGetLineOrigins获取每一行的起始点,保存在lineOrigins数组中
    CGPoint lineOrigins[lines.count];
    CTFrameGetLineOrigins(self.richTextData.ctFrame, CFRangeMake(0, 0), lineOrigins);
    for (int i = 0; i < lines.count; i++) {
        CTLineRef line = (__bridge CTLineRef)lines[i];
        
        NSArray *runs = (NSArray *)CTLineGetGlyphRuns(line);
        for (int j = 0; j < runs.count; j++) {
            CTRunRef run = (__bridge CTRunRef)(runs[j]);
            NSDictionary *attributes = (NSDictionary *)CTRunGetAttributes(run);
            if (!attributes) {
                continue;
            }
            // 从属性中获取到创建属性字符串使用CFAttributedStringSetAttribute设置的delegate值
            CTRunDelegateRef delegate = (__bridge CTRunDelegateRef)[attributes valueForKey:(id)kCTRunDelegateAttributeName];
            if (!delegate) {
                continue;
            }
            // CTRunDelegateGetRefCon方法从delegate中获取使用CTRunDelegateCreate初始时候设置的元数据
            NSDictionary *metaData = (NSDictionary *)CTRunDelegateGetRefCon(delegate);
            if (!metaData) {
                continue;
            }
            
            // 找到代理则开始计算图片位置信息
            CGFloat ascent;
            CGFloat desent;
            // 可以直接从metaData获取到图片的宽度和高度信息
            CGFloat width = CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &ascent, &desent, NULL);
            
            // CTLineGetOffsetForStringIndex获取CTRun的起始位置
            CGFloat xOffset = lineOrigins[i].x + CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL);
            CGFloat yOffset = lineOrigins[i].y;
         
            // 更新ImageItem对象的位置
            ImageItem *imageItem = self.richTextData.images[imageIndex];
            imageItem.frame = CGRectMake(xOffset, yOffset, width, ascent + desent);
            
            imageIndex ++;
            if (imageIndex >= self.richTextData.images.count) {
                return;
            }
        }
    }
}

绘制图片的代码,使用CGContextDrawImage方法绘制即可,图片的位置信息就是上一步的代码所获得的

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1, -1);
    
    // 使用CTFrame在CGContextRef上下文上绘制
    CTFrameDraw(self.data.ctFrame, context);
    
    // 在CGContextRef上下文上绘制图片
    for (int i = 0; i < self.data.images.count; i++) {
        ImageItem *imageItem = self.data.images[i];
        CGContextDrawImage(context, imageItem.frame, [UIImage imageNamed:imageItem.imageName].CGImage);
    }
}

一些问题

CF对象 vs OC对象

关于OC对象和CF对象之间的桥接转换的问题可以查看这篇文章上的讲解 OC对象 vs CF对象

这里有个主意的地方是创建CTRunDelegateRef对象的时候,这里的参数需要把所有权交给CF对象,需要使用__bridge_retained,而不能使用简单的桥接,防止ARC模式下的OC对象自动释放,在方法getDescentgetDescentgetWidth访问会出现BAD_ACCESS的错误

    // 2 创建CTRunDelegateRef
    NSDictionary *metaData = @{@"width": @120, @"height": @140};
    CTRunDelegateRef runDelegate = CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData));

手动释放内存

因为CoreText是属于CF的,需要手动管理内存,比如下面创建的临时变量需要使用CFRelease及时释放内存,否则会有内存溢出的问题

- (CTFrameRef)ctFrameWithAttributeString:(NSAttributedString *)attributeString frame:(CGRect)frame {
    // 绘制区域
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, (CGRect){{0, 0}, frame.size});
    
    // 使用NSMutableAttributedString创建CTFrame
    CTFramesetterRef ctFramesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributeString);
    CTFrameRef ctFrame = CTFramesetterCreateFrame(ctFramesetter, CFRangeMake(0, attributeString.length), path, NULL);
    
    CFRelease(ctFramesetter);
    CFRelease(path);
    
    return ctFrame;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容

  • CoreText 是用于处理文字和字体的底层技术。它直接和 Core Graphics(又被称为 Quartz)打...
    SpursGo阅读 1,711评论 0 2
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,969评论 3 119
  • 最近在网上看了一些大牛的文章,自己也试着写了一下,感觉图文混排真的很强大。 废话不多说,开始整 先上效果图跟代码,...
    AllureJM阅读 978评论 0 1
  • 一谈到跑步力量训练,跑友想到的、一直练习、练得最多的就是静蹲、下蹲,在之前慧跑的文章也给大家介绍了各式各样的下蹲练...
    2组13号石志霞阅读 1,215评论 0 5
  • 诗仙不知谦,纵横天地间,逍遥舒心境,把酒观大千。 原创作品 (Original Article)
    一诗一境界阅读 319评论 0 0