Core Text 入门

本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest，包含两个项目，一个Mac的NSTextView的测试项目，一个iOS的Core
Text的测试项目

NSTextView和Attribued String


第一次接触苹果系的富文本编程是在写Mac平台上的一个输入框的时候，输入框中的文字可以设置各种样式，并可以在文字中间插入图片，好在Mac的AppKit中提供了NSTextView这个支持富文本编辑器控件。此控件背后是通过什么方式来描述富文本的呢？答案是NSAttributedString，很多编程语言都提供了AttributedString的概念。NSAttributedString比NSString多了一个Attribute的概念，一个NSAttributedString的对象包含很多的属性，每一个属性都有其对应的字符区域，在这里是使用NSRange来进行描述的。下面是一个NSTextView显示富文本的例子

[html] view
plaincopy

  1. NSMutableAttributedString *attributedString = [[[NSMutableAttributedString alloc] initWithString:@"测试富文本显示"] autorelease];  
  2. //为所有文本设置字体  
  3. [attributedString addAttribute:NSFontAttributeName value:[NSFont systemFontOfSize:24] range:NSMakeRange(0, [attributedString length])];  
  4. //将“测试”两字字体颜色设置为蓝色  
  5. [attributedString addAttribute:NSForegroundColorAttributeName value:[NSColor blueColor] range:NSMakeRange(0, 2)];  
  6. //将“富文本”三个字字体颜色设置为红色  
  7. [attributedString addAttribute:NSForegroundColorAttributeName value:[NSColor redColor] range:NSMakeRange(2, 3)];  
  8.       
  9. //在“测”和“试”两字之间插入一张图片  
  10. NSString *imageName = @"taobao.png";  
  11. NSFileWrapper *imageFileWrapper = [[[NSFileWrapper alloc] initRegularFileWithContents:[[NSImage imageNamed:imageName] TIFFRepresentation]] autorelease];  
  12. imageFileWrapper.filename = imageName;  
  13. imageFileWrapper.preferredFilename = imageName;  
  14.       
  15. NSTextAttachment *imageAttachment = [[[NSTextAttachment alloc] initWithFileWrapper:imageFileWrapper] autorelease];  
  16. NSAttributedString *imageAttributedString = [NSAttributedString attributedStringWithAttachment:imageAttachment];  
  17. [attributedString insertAttributedString:imageAttributedString atIndex:1];  
  18.   
  19. /*  
  20. 其实插入图片附件之后 attributedString的长度增加了1 变成了8，所以可以预见其实图片附件属性对应的内容应该是一个长度的字符  
  21. Printing description of attributedString:  
  22. 测{  
  23.     NSColor = "NSCalibratedRGBColorSpace 0 0 1 1";  
  24.     NSFont = "\"LucidaGrande 24.00 pt. P [] (0x10051bfd0) fobj=0x101e687f0, spc=7.59\"";  
  25. }{  
  26.     NSAttachment = "<NSTextAttachment: 0x101e0c9c0> \"taobao.png\"";  
  27. }试{  
  28.     NSColor = "NSCalibratedRGBColorSpace 0 0 1 1";  
  29.     NSFont = "\"LucidaGrande 24.00 pt. P [] (0x10051bfd0) fobj=0x101e687f0, spc=7.59\"";  
  30. }富文本{  
  31.     NSColor = "NSCalibratedRGBColorSpace 1 0 0 1";  
  32.     NSFont = "\"LucidaGrande 24.00 pt. P [] (0x10051bfd0) fobj=0x101e687f0, spc=7.59\"";  
  33. }显示{  
  34.     NSFont = "\"LucidaGrande 24.00 pt. P [] (0x10051bfd0) fobj=0x101e687f0, spc=7.59\"";  
  35. }  
  36. */  
  37.   
  38.   
  39. [_textView insertText:attributedString];  

还有就是NSAttributedString提供对所有属性进行遍历的方法，也提供了计算在特定size下渲染实际所占的区域（boundingRectWithSize:options:） 这些这里就不介绍了。 从上面的代码可以看出其实Mac下的富文本的渲染并不是很复杂，只要将Attributed String理解和使用好，其余的事情都交给NSTextView来做了，你完全不用考虑其底层是如何取渲染的。但是在iOS平台上就没有这么幸运了，虽然iOS从3。2开始也提供了NSAttributedString，但是并没有类似NSTextView这样的控件直接来渲染Attributed
String。 这个时候你就得使用Core Text了。

Core Text


下面讨论的Core Text相关编程都是特指在iOS平台下。 Core Text是和Core Graphics配合使用的，一般是在UIView的drawRect方法中的Graphics Context上进行绘制的。 且Core Text真正负责绘制的是文本部分，图片还是需要自己去手动绘制，所以你必须关注很多绘制的细节部分。

一.Core Text知识准备

在进入任何一个新的编程领域之前，我们肯定要先接触相关的领域模型的知识。比如你软件是进行科学计算的，那么你就必须理解大量的数学原理；如果你的软件是搞银行系统，那么你就得事先了解相关的银行的业务知识。这些都是不可避免的事情。通常情况下领域知识具有较高的通用性。但在特定的环境下，某些知识点也会被特殊处理。 Core Text是用来进行文字精细排版的，所以了解文字相关的知识也不可避免。

1.字符（Character）和字形（Glyphs）

排版系统中文本显示的一个重要的过程就是字符到字形的转换，字符是信息本身的元素，而字形是字符的图形表征，字符还会有其它表征比如发音。 字符在计算机中其实就是一个编码，某个字符集中的编码，比如Unicode字符集，就囊括了大都数存在的字符。 而字形则是图形，一般都存储在字体文件中，字形也有它的编码，也就是它在字体中的索引。 一个字符可以对应多个字形（不同的字体，或者同种字体的不同样式:粗体斜体等）；多个字符也可能对应一个字形，比如字符的连写（ Ligatures）。 
 
Roman Ligatures

下面就来详情看看字形的各个参数也就是所谓的字形度量Glyph Metrics

 

  • bounding box（边界框 bbox），这是一个假想的框子，它尽可能紧密的装入字形。
  • baseline（基线），一条假想的线,一行上的字形都以此线作为上下位置的参考，在这条线的左侧存在一个点叫做基线的原点，
  • ascent（上行高度）从原点到字体中最高（这里的高深都是以基线为参照线的）的字形的顶部的距离，ascent是一个正值
  • descent（下行高度）从原点到字体中最深的字形底部的距离，descent是一个负值（比如一个字体原点到最深的字形的底部的距离为2，那么descent就为-2）
  • linegap（行距），linegap也可以称作leading（其实准确点讲应该叫做External leading）,行高lineHeight则可以通过 ascent + |descent| + linegap 来计算。

一些Metrics专业知识还可以参考Free Type的文档 Glyph
metrics，其实iOS就是使用Free
Type库来进行字体渲染的。

以上图片和部分概念来自苹果文档 Querying
Font Metrics ，Text
Layout

2.坐标系

首先不得不说 苹果编程中的坐标系花样百出，经常让开发者措手不及。 传统的Mac中的坐标系的原点在左下角，比如NSView默认的坐标系，原点就在左下角。但Mac中有些View为了其实现的便捷将原点变换到左上角，像NSTableView的坐标系坐标原点就在左上角。iOS UIKit的UIView的坐标系原点在左上角。 
往底层看，Core Graphics的context使用的坐标系的原点是在左下角。而在iOS中的底层界面绘制就是通过Core Graphics进行的，那么坐标系列是如何变换的呢？ 在UIView的drawRect方法中我们可以通过UIGraphicsGetCurrentContext()来获得当前的Graphics Context。drawRect方法在被调用前，这个Graphics Context被创建和配置好，你只管使用便是。如果你细心，通过CGContextGetCTM(CGContextRef c)可以看到其返回的值并不是CGAffineTransformIdentity，通过打印出来看到值为

[html] view
plaincopy

  1. Printing description of contextCTM:  
  2. (CGAffineTransform) contextCTM = {  
  3.         a = 1  
  4.         b = 0  
  5.         c = 0  
  6.         d = -1  
  7.         tx = 0  
  8.         ty = 460  
  9. }         

这是非retina分辨率下的结果，如果是如果是retina上面的a,d,ty的值将会乘2，如果是iPhone 5，ty的值会再大些。 但是作用都是一样的就是将上下文空间坐标系进行了flip，使得原本左下角原点变到左上角，y轴正方向也变换成向下。

上面说了一大堆，下面进入正题，Core Text一开始便是定位于桌面的排版系统，使用了传统的原点在左下角的坐标系，所以它在绘制文本的时候都是参照左下角的原点进行绘制的。 但是iOS的UIView的drawRect方法的context被做了次flip，如果你啥也不做处理，直接在这个context上进行Core Text绘制，你会发现文字是镜像且上下颠倒。 
 
所以在UIView的drawRect方法中的context上进行Core Text绘制之前需要对context进行一次Flip。 

这里再提及一个函数CGContextSetTextMatrix，它可以用来为每一个显示的字形单独设置变形矩阵。

3.NSMutableAttributedString 和 CFMutableAttributedStringRef

Core Foundation和Foundation中的有些数据类型只需要简单的强制类型转换就可以互换使用，这类类型我们叫他们为Toll-Free
Bridged Types。 
CFMutableAttributedStringRef和NSMutableAttributedString就是其中的一对，Core Foundation的接口基本是C的接口，功能强大，但是使用起来没有Foundation中提供的Objc的接口简单好使，所以很多时候我们可以使用高层接口组织数据，然后将其传给低层函数接口使用。

二.Core Text对象模型

这节主要来看看Core Text绘制的一些细节问题了，首先是Core Text绘制的流程： 

  • framesetter framesetter对应的类型是 CTFramesetter，通过CFAttributedString进行初始化，它作为CTFrame对象的生产工厂，负责根据path生产对应的CTFrame
  • CTFrame CTFrame是可以通过CTFrameDraw函数直接绘制到context上的，当然你可以在绘制之前，操作CTFrame中的CTLine，进行一些参数的微调
  • CTLine 可以看做Core Text绘制中的一行的对象 通过它可以获得当前行的line ascent,line descent ,line leading,还可以获得Line下的所有Glyph Runs
  • CTRun 或者叫做 Glyph Run，是一组共享想相同attributes（属性）的字形的集合体

上面说了这么多对也没一个东西和图片绘制有关系，其实吧，Core Text本身并不支持图片绘制，图片的绘制你还得通过Core Graphics来进行。只是Core Text可以通过CTRun的设置为你的图片在文本绘制的过程中留出适当的空间。这个设置就使用到CTRunDelegate了，看这个名字大概就可以知道什么意思了，CTRunDelegate作为CTRun相关属性或操作扩展的一个入口，使得我们可以对CTRun做一些自定义的行为。为图片留位置的方法就是加入一个空白的CTRun，自定义其ascent，descent，width等参数，使得绘制文本的时候留下空白位置给相应的图片。然后图片在相应的空白位置上使用Core
Graphics接口进行绘制。 
使用CTRunDelegateCreate可以创建一个CTRunDelegate，它接收两个参数，一个是callbacks结构体，一个是所有callback调用的时候需要传入的对象。 callbacks的结构体为CTRunDelegateCallbacks，主要是包含一些回调函数，比如有返回当前run的ascent，descent，width这些值的回调函数，至于函数中如何鉴别当前是哪个run，可以在CTRunDelegateCreate的第二个参数来达到目的，因为CTRunDelegateCreate的第二个参数会作为每一个回调调用时的入参。

三.Core Text实战

这里使用Core Text实现一个和之前NSTextView显示类似的图文混排的例子。

直接贴上代码大家体会下:

[html] view
plaincopy

  1. void RunDelegateDeallocCallback( void* refCon ){  
  2.       
  3. }  
  4.   
  5. CGFloat RunDelegateGetAscentCallback( void *refCon ){  
  6.     NSString *imageName = (NSString *)refCon;  
  7.     return [UIImage imageNamed:imageName].size.height;  
  8. }  
  9.   
  10. CGFloat RunDelegateGetDescentCallback(void *refCon){  
  11.     return 0;  
  12. }  
  13.   
  14. CGFloat RunDelegateGetWidthCallback(void *refCon){  
  15.     NSString *imageName = (NSString *)refCon;  
  16.     return [UIImage imageNamed:imageName].size.width;  
  17. }  
  18.   
  19.   
  20. - (void)drawRect:(CGRect)rect  
  21. {  
  22.     CGContextRef context = UIGraphicsGetCurrentContext();  
  23.       
  24.     //这四行代码只是简单测试drawRect中context的坐标系  
  25.     CGContextSetRGBFillColor (context, 1, 0, 0, 1);  
  26.     CGContextFillRect (context, CGRectMake (0, 200, 200, 100 ));  
  27.     CGContextSetRGBFillColor (context, 0, 0, 1, .5);  
  28.     CGContextFillRect (context, CGRectMake (0, 200, 100, 200));  
  29.       
  30.     CGContextSetTextMatrix(context, CGAffineTransformIdentity);//设置字形变换矩阵为CGAffineTransformIdentity，也就是说每一个字形都不做图形变换  
  31.       
  32.     CGAffineTransform flipVertical = CGAffineTransformMake(1,0,0,-1,0,self.bounds.size.height);  
  33.     CGContextConcatCTM(context, flipVertical);//将当前context的坐标系进行flip  
  34.       
  35.     NSMutableAttributedString *attributedString = [[[NSMutableAttributedString alloc] initWithString:@"测试富文本显示"] autorelease];  
  36.       
  37.     //为所有文本设置字体  
  38.     //[attributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:24] range:NSMakeRange(0, [attributedString length])]; // 6.0+  
  39.     UIFont *font = [UIFont systemFontOfSize:24];  
  40.     CTFontRef fontRef = CTFontCreateWithName((CFStringRef)font.fontName, font.pointSize, NULL);  
  41.     [attributedString addAttribute:(NSString *)kCTFontAttributeName value:(id)fontRef range:NSMakeRange(0, [attributedString length])];  
  42.       
  43.     //将“测试”两字字体颜色设置为蓝色  
  44.     //[attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 2)]; //6.0+  
  45.     [attributedString addAttribute:(NSString *)kCTForegroundColorAttributeName value:(id)[UIColor blueColor].CGColor range:NSMakeRange(0, 2)];  
  46.       
  47.     //将“富文本”三个字字体颜色设置为红色  
  48.     //[attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(2, 3)]; //6.0+  
  49.     [attributedString addAttribute:(NSString *)kCTForegroundColorAttributeName value:(id)[UIColor redColor].CGColor range:NSMakeRange(2, 3)];  
  50.       
  51.       
  52.     //为图片设置CTRunDelegate,delegate决定留给图片的空间大小  
  53.     NSString *taobaoImageName = @"taobao.png";  
  54.     CTRunDelegateCallbacks imageCallbacks;  
  55.     imageCallbacks.version = kCTRunDelegateVersion1;  
  56.     imageCallbacks.dealloc = RunDelegateDeallocCallback;  
  57.     imageCallbacks.getAscent = RunDelegateGetAscentCallback;  
  58.     imageCallbacks.getDescent = RunDelegateGetDescentCallback;  
  59.     imageCallbacks.getWidth = RunDelegateGetWidthCallback;  
  60.     CTRunDelegateRef runDelegate = CTRunDelegateCreate(&imageCallbacks, taobaoImageName);  
  61.     NSMutableAttributedString *imageAttributedString = [[NSMutableAttributedString alloc] initWithString:@" "];//空格用于给图片留位置  
  62.     [imageAttributedString addAttribute:(NSString *)kCTRunDelegateAttributeName value:(id)runDelegate range:NSMakeRange(0, 1)];  
  63.     CFRelease(runDelegate);  
  64.       
  65.     [imageAttributedString addAttribute:@"imageName" value:taobaoImageName range:NSMakeRange(0, 1)];  
  66.       
  67.     [attributedString insertAttributedString:imageAttributedString atIndex:1];  
  68.       
  69.     CTFramesetterRef ctFramesetter = CTFramesetterCreateWithAttributedString((CFMutableAttributedStringRef)attributedString);  
  70.       
  71.     CGMutablePathRef path = CGPathCreateMutable();  
  72.     CGRect bounds = CGRectMake(0.0, 0.0, self.bounds.size.width, self.bounds.size.height);  
  73.     CGPathAddRect(path, NULL, bounds);  
  74.       
  75.     CTFrameRef ctFrame = CTFramesetterCreateFrame(ctFramesetter,CFRangeMake(0, 0), path, NULL);  
  76.     CTFrameDraw(ctFrame, context);  
  77.       
  78.     CFArrayRef lines = CTFrameGetLines(ctFrame);  
  79.     CGPoint lineOrigins[CFArrayGetCount(lines)];  
  80.     CTFrameGetLineOrigins(ctFrame, CFRangeMake(0, 0), lineOrigins);  
  81.       
  82.     for (int i = 0; i < CFArrayGetCount(lines); i++) {  
  83.         CTLineRef line = CFArrayGetValueAtIndex(lines, i);  
  84.         CGFloat lineAscent;  
  85.         CGFloat lineDescent;  
  86.         CGFloat lineLeading;  
  87.         CTLineGetTypographicBounds(line, &lineAscent, &lineDescent, &lineLeading);  
  88.           
  89.         CFArrayRef runs = CTLineGetGlyphRuns(line);  
  90.         for (int j = 0; j < CFArrayGetCount(runs); j++) {  
  91.             CGFloat runAscent;  
  92.             CGFloat runDescent;  
  93.             CGPoint lineOrigin = lineOrigins[i];  
  94.             CTRunRef run = CFArrayGetValueAtIndex(runs, j);  
  95.             NSDictionary* attributes = (NSDictionary*)CTRunGetAttributes(run);  
  96.             CGRect runRect;  
  97.             runRect.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0,0), &runAscent, &runDescent, NULL);  
  98.               
  99.             runRect=CGRectMake(lineOrigin.x + CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL), lineOrigin.y - runDescent, runRect.size.width, runAscent + runDescent);  
  100.               
  101.             NSString *imageName = [attributes objectForKey:@"imageName"];  
  102.             //图片渲染逻辑  
  103.             if (imageName) {  
  104.                 UIImage *image = [UIImage imageNamed:imageName];  
  105.                 if (image) {  
  106.                     CGRect imageDrawRect;  
  107.                     imageDrawRect.size = image.size;  
  108.                     imageDrawRect.origin.x = runRect.origin.x + lineOrigin.x;  
  109.                     imageDrawRect.origin.y = lineOrigin.y;  
  110.                     CGContextDrawImage(context, imageDrawRect, image.CGImage);  
  111.                 }  
  112.             }  
  113.         }  
  114.     }  
  115.       
  116.     CFRelease(ctFrame);  
  117.     CFRelease(path);  
  118.     CFRelease(ctFramesetter);  
  119. }  
时间： 2024-04-25 16:48:46

Core Text 入门的相关文章

[翻译] Core Text Objective-C Wrapper

Core Text Objective-C Wrapper https://github.com/akosma/CoreTextWrapper Introduction(介绍) One of the most promising and mysterious new frameworks introduced in iOS 3.2 is Core Text. Apple defines Core Text as a "text drawing engine", which allows

详解ASP.NET Core 之 Identity 入门（三）_实用技巧

前言 最早2005年 ASP.NET 2.0 的时候开始, Web 应用程序在处理身份验证和授权有了很多的变化,多了比如手机端,平板等,所以那个时候为了适应这种变化就引入了ASP.NET Membership,但是随着时间的发展一些社交网站或者程序聚集了大量的用户,比如Facebook,Twitter,QQ等,这个时候用户希望能够使用他们在这些社交站点身份来登陆当前网站,这样可以免除注册这些琐碎而又必要的操作,用户也不必记住大量的账户密码. 又随着互联网的发展,越来越多的开发者不只是关注具体业务

详解ASP.NET Core 之 Identity 入门（二）_实用技巧

前言 在 上篇文章 中讲了关于 Identity 需要了解的单词以及相对应的几个知识点,并且知道了Identity处在整个登入流程中的位置,本篇主要是在 .NET 整个认证系统中比较重要的一个环节,就是 认证(Authentication),因为想要把 Identity 讲清楚,是绕不过 Authentication 的. 其实 Identity 也是认证系统的一个具体使用,大家一定要把 Authentication 和 Identity 当作是两个东西,一旦混淆,你就容易陷入进去. 下面就来说

详解ASP.NET Core 之 Identity 入门（一）_实用技巧

前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库,负责对用户的身份进行认证,总体来说的话,没有MVC 5 里面那么复杂,因为在MVC 5里面引入了OWIN的东西,所以很多初学者在学习来很费劲,对于 Identity 都是一头雾水,包括我也是,曾经在学 identity 这个东西前后花了一个多月来搞懂里面的原理.所以大部分开发者对于 Identity 并没有爱,也并没有使用它,会觉得被绑架. 值得庆幸的是,在 ASP.NET Core 中,由于对模

20款覆盖全面的响应式网站设计工具

  灵活的栅格和布局,响应式的图片和智能的CSS媒体查询,构成了响应式网页的主要特征.当用户扔下沉重的笔记本电脑拿起平板,响应式的网站能够自然而然地随之适配,掏出手机也毫无压力,图片和文字都会随着特定的屏幕和分辨率而调整,这就是它的优势.你以为这就完了?当然不会!在未来,一摸兜里手机忘带了,抬起左手唤醒智能手表,打开网页,也能看! 不得不说,创建响应式网站越来越容易,即使你不是专业的前端也可以轻松搞得定.挑选合适的工具,搜几个符合需求的jQuery插件,配合合理的设计,你也可以实现期待中的响应速

网页字体全知道:网站字体渲染过程

文章描述:我们知道同一种字体在不同浏览器上的表现有可能是不同的,除了浏览器,还有哪些导致表现不同的因素呢?不同系统下字形的渲染也是不一样的,根本原因是什么呢?我们希望各浏览器下字体排版一致,实现的话有完美的方案吗? 前言 我们知道同一种字体在不同浏览器上的表现有可能是不同的,除了浏览器,还有哪些导致表现不同的因素呢?不同系统下字形的渲染也是不一样的,根本原因是什么呢?我们希望各浏览器下字体排版一致,实现的话有完美的方案吗? 带着这些问题我们来看看字体渲染的过程: 解码 了解解码之前,我们稍微先简

各浏览器下字体排版一致的问题

  我们知道同一种字体在不同浏览器上的表现有可能是不同的,除了浏览器,还有哪些导致表现不同的因素呢?不同系统下字形的渲染也是不一样的,根本原因是什么呢?我们希望各浏览器下字体排版一致,实现的话有完美的方案吗? 带着这些问题我们来看看字体渲染的过程: 解码 了解解码之前,我们稍微先简单回顾下编码的一些知识,常见的名词有:ASCII .GB2312.Big5.Unicode.UTF-8,它们之前有什么区别或联系呢?简单来说,起初美国国家标准协会ANSI制定了一个标准,规定了常 用字符的集合以及每个字

[转] iOS文字排版(CoreText)那些事儿

iOS文字排版(CoreText)那些事儿 转自阿毛的蛋疼地   第一次比较深入接触iOS文字排版相关内容是在12年底,实现某IM项目聊天内容的图文混排,照着nimbus的AttributedLabel和Raywenderlish上的这篇文章<Core Text Tutorial for iOS: Making a Magazine App>改出了一个比较适用于聊天内容展现的图文混排(文字和表情)控件.   选择自己写而不是直接使用现有第三方库的原因有三: 1. 在这之前也做过一个iOS上的I

网站字体渲染过程

前言 我们知道同一种字体在不同浏览器上的表现有可能是不同的,除了浏览器,还有哪些导致表现不同的因素呢?不同系统下字形的渲染也是不一样的,根本原因是什么呢?我们希望各浏览器下字体排版一致,实现的话有完美的方案吗? 带着这些问题我们来看看字体渲染的过程: 解码 了解解码之前,我们稍微先简单回顾下编码的一些知识,常见的名词有:ASCII .GB2312.Big5.Unicode.UTF-8,它们之前有什么区别或联系呢?简单来说,起初美国国家标准协会ANSI制定了一个标准,规定了常用字符的集合以及每个字