CoreText入门（二）-绘制图片

时间  2019-11-12
标签 coretext 入门 绘制 图片 栏目 iOS 繁體版
原文   原文链接

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

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

本文的主要内容框架

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

Demo：CoreTextDemo布局

CoreText框架中重要的类

CoreText框架中重要的类示例图
 CoreText框架中重要的类示例图.net

CTFrame

如上图中最外层（蓝色框）的内容区域对应的就是CTFrame，绘制的是一整段的内容，CTFrame有如下几个经常使用的方法代理

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

CTLine

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

  • CTLineGetGlyphRuns 获取CTLine包含的全部的CTRun
  • CTLineGetOffsetForStringIndex 获取CTRun的起始位置

CTRun

如上图绿色框中的内容就是CTRun，每一行中相同格式的一块内容是一个CTRun，一行中能够存在多个CTRun，CTRun有如下几个经常使用的方法orm

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

CTRunDelegate

CTRunDelegate和CTRun是紧密联系的，CTFrame初始化的时候须要用到的图片信息是经过CTRunDelegate的callback得到到的，更具体的内容查看下面讲解，CTRunDelegate有如下几个经常使用的方法对象

  • CTRunDelegateCreate 建立CTRunDelegate对象，须要传递CTRunDelegateCallbacks对象，使用CFAttributedStringSetAttribute方法把CTRunDelegate对象和NSAttributedString对象绑定，在CTFrame初始化的时候回调用CTRunDelegate对象里面CTRunDelegateCallbacks对象的回调方法返回Ascent、Descent、Width信息

建立CTRunDelegate对象，传递callback和参数的代码：blog

- (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对象的时候会经过CTRunDelegate中callbak的几个回调方法getDescent、getDescent、getWidth返回绘制的图片的信息，方法getDescent、getDescent、getWidth中的参数是CTRunDelegateCreate(&callback, (__bridge_retained void *)(metaData))方法中的metaData参数，特别地，这里的参数须要把全部权交给CF对象，而不能使用简单的桥接，防止ARC模式下的OC对象自动释放，在方法getDescent、getDescent、getWidth访问会出现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对象自动释放，在方法getDescent、getDescent、getWidth访问会出现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;
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程