CoreText入坑一

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

一. 基础

1.在使用CoreText编写代码之前, 需要先了解一些基础知识。下图是CoreText的基础框架

• CTFrame可以想象成画布, 画布的大小范围由CGPath决定
• CTFrame由很多CTLine组成, CTLine表示为一行
• CTLine由多个CTRun组成, CTRun相当于一行中的多个块, 但是CTRun不需要你自己创建, 由NSAttributedString的属性决定, 系统自动生成。每个CTRun对应不同属性
• CTFramesetter是一个工厂, 创建CTFrame, 一个界面上可以有多个CTFrame

2.文字的样式包括很多, 而每个字符的显示要归功于字体, 而字体包括很多基础知识, 比如磅值, 样式, 基线, 连字等等, 这里就不做更多介绍, 推荐两篇文章阅读。
CoreText基础概念
CoreText入门

在这里, 贴出CoreText基础概念文中关于字体结构的图(图片版权归此文作者)

二. 使用基本步骤

新建一个UIView, 在view的drawRect函数中按步骤写入下面的代码

• 1.获取当前上下文

let context = UIGraphicsGetCurrentContext()

• 2.转换坐标系

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

• 3.初始化路径

let path = CGPathCreateWithRect(self.bounds, nil)

• 4.初始化字符串

let attrString = NSMutableAttributedString(string: "Hello CoreText")

• 5.初始化framesetter

let framesetter = CTFramesetterCreateWithAttributedString(attrString)

• 6.绘制frame

let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrString.length), path, nil)
CTFrameDraw(frame, context!)

绘制的步骤完成了, 然后在ViewController里面将此view加入到ViewController中, 记得将view的背景色设置为白色, 那么效果就应该如下了

文字绘制出来了, 这就是CoreText使用最基本的步骤了。

三.简单的富文本Label

上面简单的绘制步骤中, 最后一步绘制frame, 是将整个frame当做一块绘制, 至于什么换行, 行中的样式什么的都是系统自己决定了。在开始之前, 我们将这个绘制frame改成我们自己一行一行, 甚至一个run一个run的绘制

• 按行绘制

// 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)
}

将最后一步改成按行绘制, 最终得到的效果也和按frame绘制一样的, 接下来看下按Run绘制

• 按Run绘制

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

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

那么接下来实现一个简单的富文本Label, 将上面的view改名为TULabel

• 声明一个富文本变量给此Label

var attributedText: NSAttributedString?

• 将上面的第4步注释掉, 初始化framesetter的字符串直接传入此变量, 至于后面的绘制你可以用任意一种, 这样TULabel就可以实现一部分富文本了, 在controller中创建一个TULabel, 然后来个NSMutableAttributedString实例赋值给TULabel.attributedText, 下面列出此时可用的富文本样式

let attributedText = NSMutableAttributedString(string: ...)// CoreText支持的属性// 字体颜色
attributedText.addAttribute(NSForegroundColorAttributeName, value: UIColor.redColor(), range: NSMakeRange(0, 10))// 下划线
let underlineStyles = [NSUnderlineStyleAttributeName: NSUnderlineStyle.StyleSingle.rawValue,NSUnderlineColorAttributeName: UIColor.orangeColor()]
attributedText.addAttributes(underlineStyles, range: NSMakeRange(10, 10))// 字体
attributedText.addAttribute(NSFontAttributeName, value: UIFont.boldSystemFontOfSize(50), range: NSMakeRange(20, 10))// 描边(Stroke):组成字符的线或曲线。可以加粗或改变字符形状
let strokeStyles = [NSStrokeWidthAttributeName: 10,NSStrokeColorAttributeName: UIColor.blueColor()]
attributedText.addAttributes(strokeStyles, range: NSMakeRange(40, 20))// 横竖文本
attributedText.addAttribute(NSVerticalGlyphFormAttributeName, value: 0, range: NSMakeRange(70, 10))// 字符间隔
attributedText.addAttribute(NSKernAttributeName, value: 5, range: NSMakeRange(90, 10))// 段落样式
let paragraphStyle = NSMutableParagraphStyle()//对齐模式
paragraphStyle.alignment = .Center//换行裁剪模式
paragraphStyle.lineBreakMode = .ByWordWrapping// 行间距
paragraphStyle.lineSpacing = 5.0// 字符间距
paragraphStyle.paragraphSpacing = 2.0attributedText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSRange(location: 0, length: attributedText.length))

此时, 你就会看到如下效果

• 效果出来了, 你是否就满足了。那其他平常可以使用的样式要怎么样使用CoreText来实现了? 我们就先实现一个样式--删除线, 将上面的drawLine函数改成如下

// 画一行
func drawLine(line: CTLine, context: CGContext) {let runs = CTLineGetGlyphRuns(line) as Arrayruns.forEach { run inCTRunDraw(run as! CTRun, context, CFRangeMake(0, 0))// 获得run的所有样式let attributes = CTRunGetAttributes(run as! CTRun) as NSDictionary// 判断是run是否含有删除线样式if nil != attributes[NSStrikethroughStyleAttributeName] {// 开始画删除线drawStrikethroughStyle(run as! CTRun, attributes: attributes, context: context)}}  
}

• 当然, 你要将CTLineDraw(line, context)换成自定义的画行函数drawLine(line, context: context), 那么接下来就是画删除线了

// 画删除线, 这里涉及到字体相关知识, 请参考第二节, 画删除线实际画在字的中间, 而字体的高度不一样, 实际是画在x高度的一半位置
func drawStrikethroughStyle(run: CTRun, attributes: NSDictionary, context: CGContext) {// 1.获取删除线样式let styleRef = attributes[NSStrikethroughStyleAttributeName]var style: NSUnderlineStyle = .StyleNoneCFNumberGetValue(styleRef as! CFNumber, CFNumberType.SInt64Type, &style)// 如果定义为none, 就不用画了guard style != .StyleNone else {return}// 2.获得画线的宽度var lineWidth: CGFloat = 1if (style.rawValue & NSUnderlineStyle.StyleThick.rawValue) == NSUnderlineStyle.StyleThick.rawValue {lineWidth *= 2}CGContextSetLineWidth(context, lineWidth)// 3.获取画线的起点var firstPosition = CGPointZerolet firstGlyphPosition = CTRunGetPositionsPtr(run)if nil == firstGlyphPosition {let positions = UnsafeMutablePointer<CGPoint>.alloc(1)positions.initialize(CGPointZero)CTRunGetPositions(run, CFRangeMake(0, 0), positions)firstPosition = positions.memorypositions.destroy()} else {firstPosition = firstGlyphPosition.memory}// 4.我们要开始画线了CGContextBeginPath(context)// 5.获取定义的线的颜色, 默认为黑色let lineColor = attributes[NSStrikethroughColorAttributeName]if nil == lineColor {CGContextSetStrokeColorWithColor(context, UIColor.blackColor().CGColor)} else {CGContextSetStrokeColorWithColor(context, (lineColor as! UIColor).CGColor)}// 6.字体高度, 中间位置为x高度的一半let font = attributes[NSFontAttributeName] ?? UIFont.systemFontOfSize(UIFont.systemFontSize())var strikeHeight: CGFloat = font.xHeight / 2.0 + firstPosition.y// 多行调整let pt = CGContextGetTextPosition(context)strikeHeight += pt.y// 画线的宽度let typographicWidth = CGFloat(CTRunGetTypographicBounds(run, CFRangeMake(0, 0), nil, nil, nil))// 7.开始画线CGContextMoveToPoint(context, pt.x + firstPosition.x, strikeHeight)CGContextAddLineToPoint(context, pt.x + firstPosition.x + typographicWidth, strikeHeight)CGContextStrokePath(context)
}

• 然后在controller中给attributedText添加删除线样式

// 删除线
let strikethroughStyle = [NSStrikethroughStyleAttributeName: NSUnderlineStyle.StyleSingle.rawValue,NSStrikethroughColorAttributeName: UIColor.cyanColor()]
attributedText.addAttributes(strikethroughStyle, range: NSMakeRange(150, 20))

这样就实现了删除线样式效果了

至此, 删除线的样式就完成了, 其他样式将可能在下一篇CoreText文章中实现。
源码在此, 请参考源码中的CoreText/1文件夹!!!

参考:
CoreText基础概念
CoreText入门
Nimbus

本文由啸寒原创, 转载请注明出处!!!