Core Text 编程指南02:常见文本布局操作
本章介绍了一些常见的文本布局操作,并说明了如何使用Core Text
执行它们。本章包含以下代码清单操作:
- 列出一个段落
- 简单的文字标签
- 列式布局
- 手动换行
- 应用段落样式
- 在非矩形区域中显示文本
列出一个段落
排版中最常见的操作之一是在任意大小的矩形区域内布置多线段。 Core Text
使此操作变得简单,只需要几行特定于Core Text
的代码。要布置段落,您需要绘制图形上下文,矩形路径以提供布置文本的区域以及属性字符串。此示例中的大多数代码都需要创建和初始化上下文,路径和字符串。完成此操作后,Core Text
只需要三行代码即可完成布局。
清单2-1
中的代码显示了段落的布局方式。此代码可以驻留在UIView
子类的drawRect:
方法中(OS X
中的NSView
子类)。
清单2-1排版一个简单的段落
// 在iOS中初始化图形上下文。
CGContextRef context = UIGraphicsGetCurrentContext();
// 翻转上下文坐标,仅限iOS。
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// 在OS X中初始化图形上下文是不同的:
// CGContextRef context =
// (CGContextRef)[[NSGraphicsContext currentContext] graphicsPort];
// 设置文本矩阵。
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
// 创建一个限定要绘制文本的区域的路径。
// 路径不需要一定是矩形。
CGMutablePathRef path = CGPathCreateMutable();
// 在这个简单的例子中,初始化一个矩形路径。
CGRect bounds = CGRectMake(10.0, 10.0, 200.0, 200.0);
CGPathAddRect(path, NULL, bounds );
// 初始化一个字符串。
CFStringRef textString = CFSTR("Hello, World! I know nothing in the world that has as much power as a word. Sometimes I write one, and I look at it, until it begins to shine.");
// 创建一个最大长度为0的可变属性字符串。
// 最大长度是关于要保留多少内部存储空间的提示。
// 0表示没有提示。
CFMutableAttributedStringRef attrString =
CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
// 将textString复制到新创建的attrString中
CFAttributedStringReplaceString (attrString, CFRangeMake(0, 0),
textString);
// 创建一个将作为属性添加到attrString的颜色。
CGColorSpaceRef rgbColorSpace =
CGColorSpaceCreateDeviceRGB();
CGFloat components[] = { 1.0, 0.0, 0.0, 0.8 };
CGColorRef red = CGColorCreate(rgbColorSpace, components);
CGColorSpaceRelease(rgbColorSpace);
// 将前12个字符的颜色设置为红色。
CFAttributedStringSetAttribute(attrString, CFRangeMake(0, 12),
kCTForegroundColorAttributeName, red);
// 使用属性字符串创建框架集。
CTFramesetterRef framesetter =
CTFramesetterCreateWithAttributedString(attrString);
CFRelease(attrString);
// 创建一个框架。
CTFrameRef frame =
CTFramesetterCreateFrame(framesetter,
CFRangeMake(0, 0), path, NULL);
// 在给定的上下文中绘制指定的帧。
CTFrameDraw(frame, context);
// 释放我们使用的对象。
CFRelease(frame);
CFRelease(path);
CFRelease(framesetter);
简单的文字标签
另一种常见的排版操作是绘制单行文本以用作用户界面元素的标签。在Core Text
中,这只需要两行代码:一行用于创建具有CFAttributedString
的行对象,另一行用于将行绘制到图形上下文中。
清单2-2
显示了如何在UIView
或NSView
子类的drawRect: 方法中完成此操作。该列表省略了纯文本字符串,字体和图形上下文的初始化,本文档中其他列表中显示的操作。它显示了如何创建属性字典并使用它来创建属性字符串。 (字体创建显示在Creating Font Descriptors 和Creating a Font from a Font Descriptor 。)
清单2-2
排版一个简单的文本标签
CFStringRef string; CTFontRef font; CGContextRef context;
// 初始化字符串,字体和上下文
CFStringRef keys[] = { kCTFontAttributeName };
CFTypeRef values[] = { font };
CFDictionaryRef attributes =
CFDictionaryCreate(kCFAllocatorDefault, (const void**)&keys,
(const void**)&values, sizeof(keys) / sizeof(keys[0]),
&kCFTypeDictionaryKeyCallBacks,
&kCFTypeDictionaryValueCallBacks);
CFAttributedStringRef attrString =
CFAttributedStringCreate(kCFAllocatorDefault, string, attributes);
CFRelease(string);
CFRelease(attributes);
CTLineRef line = CTLineCreateWithAttributedString(attrString);
// 设置文本位置并将线条绘制到图形上下文中
CGContextSetTextPosition(context, 10.0, 10.0);
CTLineDraw(line, context);
CFRelease(line);
列式布局
在多列中布置文本是另一种常见的排版操作。严格来说,Core Text
本身一次只列出一列,不计算列大小或位置。您在调用Core Text
之前执行这些操作,以在您计算的路径区域内布置文本。在此示例中,Core Text
除了在每列中布置文本外,还为每列提供了文本字符串中的子范围。
清单2-3
中的createColumnsWithColumnCount:
方法接受要绘制的列数作为参数,并返回路径数组,每列一个路径。
清单2-4
包含drawRect: 方法的实现,该方法调用本清单中首先定义的本地createColumnsWithColumnCount
方法。此代码驻留在UIView
子类(OS X
中的NSView
子类)中。子类包含一个attributesString
属性,此属性未在此处显示,但在此列表中调用其访问者以返回要布局的属性字符串。
清单2-3
将视图划分为列
- (CFArrayRef)createColumnsWithColumnCount:(int)columnCount
{
int column;
CGRect* columnRects = (CGRect*)calloc(columnCount, sizeof(*columnRects));
// 设置第一列以覆盖整个视图。
columnRects[0] = self.bounds;
// 在框架的宽度上平均分配列。
CGFloat columnWidth = CGRectGetWidth(self.bounds) / columnCount;
for (column = 0; column < columnCount - 1; column++) {
CGRectDivide(columnRects[column], &columnRects[column],
&columnRects[column + 1], columnWidth, CGRectMinXEdge);
}
// 将所有列插入几个像素的边距。
for (column = 0; column < columnCount; column++) {
columnRects[column] = CGRectInset(columnRects[column], 8.0, 15.0);
}
// 创建一个布局路径数组,每列一个。
CFMutableArrayRef array =
CFArrayCreateMutable(kCFAllocatorDefault,
columnCount, &kCFTypeArrayCallBacks);
for (column = 0; column < columnCount; column++) {
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, columnRects[column]);
CFArrayInsertValueAtIndex(array, column, path);
CFRelease(path);
}
free(columnRects);
return array;
}
清单2-4
执行列式文本布局
// Override drawRect: 将属性字符串绘制到列中。
// (在OS X中,NSView的drawRect:方法采用NSRect参数,
// 但该列表中未使用该参数。)
- (void)drawRect:(CGRect)rect{
// 在iOS中初始化图形上下文。
CGContextRef context = UIGraphicsGetCurrentContext();
// 仅在iOS中翻转上下文坐标。
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// 在OS X中初始化图形上下文是不同的:
// CGContextRef context =
// (CGContextRef)[[NSGraphicsContext currentContext] graphicsPort];
// 设置文本矩阵。
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
// 使用属性字符串创建框架集。
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(
(CFAttributedStringRef)self.attributedString);
// 调用createColumnsWithColumnCount函数来创建一个数组
// 三条路径(列)。
CFArrayRef columnPaths = [self createColumnsWithColumnCount:3];
CFIndex pathCount = CFArrayGetCount(columnPaths);
CFIndex startIndex = 0;
int column;
// 为每列(路径)创建一个框架。
for (column = 0; column < pathCount; column++) {
//获取此列的路径。
CGPathRef path = (CGPathRef)CFArrayGetValueAtIndex(columnPaths, column);
//为此列创建一个框架并绘制它。
CTFrameRef frame = CTFramesetterCreateFrame(
framesetter, CFRangeMake(startIndex, 0), path, NULL);
CTFrameDraw(frame, context);
//在此框架中不可见的第一个字符处开始下一帧。
CFRange frameRange = CTFrameGetVisibleStringRange(frame);
startIndex += frameRange.length;
CFRelease(frame);
}
CFRelease(columnPaths);
CFRelease(framesetter);
}
手动换行
在Core Text
中,除非您有特殊的连字过程或类似要求,否则通常不需要手动换行。framesetter
自动执行换行。或者,Core Tex
t使你可以准确指定每行文本的中断位置。清单2-5
显示了如何创建排版工具,框架集使用的对象,以及直接使用排版工具查找适当的换行符并手动创建排版行。此示例还显示了在绘制之前如何使线居中。
此代码可以位于UIView
子类的drawRect: 方法中(OS X
中的NSView
子类)。该列表未显示代码中使用的变量的初始化。
清单2-5
执行手动换行
double width; CGContextRef context; CGPoint textPosition; CFAttributedStringRef attrString;
// 初始化这些变量。
// 使用属性字符串创建排字机。
CTTypesetterRef typesetter =
CTTypesetterCreateWithAttributedString(attrString);
// 找到从字符串开头到给定宽度的行的中断。
CFIndex start = 0;
CFIndex count = CTTypesetterSuggestLineBreak(typesetter, start, width);
// 使用返回的字符数(到中断)来创建该行。
CTLineRef line = CTTypesetterCreateLine(typesetter, CFRangeMake(start, count));
// 获得使线条居中所需的偏移量。
float flush = 0.5; // centered
double penOffset = CTLineGetPenOffsetForFlush(line, flush, width);
// 按计算的偏移量移动给定的文本绘图位置并绘制线条。
CGContextSetTextPosition(context, textPosition.x + penOffset, textPosition.y);
CTLineDraw(line, context);
// 将索引移到换行符之外。
start += count;
应用段落样式
清单2-6
实现了一个将段落样式应用于属性字符串的函数。该函数接受字体名称,磅值和行间距作为参数,这增加或减少文本行之间的空间量。此函数由清单2-7
中的代码调用,该代码创建纯文本字符串,使用applyParaStyle
函数创建具有给定段落属性的属性字符串,然后创建框架集和框架,并绘制框架。
清单2-6
应用段落样式
NSAttributedString* applyParaStyle(
CFStringRef fontName , CGFloat pointSize,
NSString *plainText, CGFloat lineSpaceInc){
// 创建字体,以便我们确定其高度。
CTFontRef font = CTFontCreateWithName(fontName, pointSize, NULL);
// 设置行间距。
CGFloat lineSpacing = (CTFontGetLeading(font) + lineSpaceInc) * 2;
// 创建段落样式设置。
CTParagraphStyleSetting setting;
setting.spec = kCTParagraphStyleSpecifierLineSpacing;
setting.valueSize = sizeof(CGFloat);
setting.value = &lineSpacing;
CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(&setting, 1);
// 将段落样式添加到字典中。
NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id)font, (id)kCTFontNameAttribute,
(__bridge id)paragraphStyle,
(id)kCTParagraphStyleAttributeName, nil];
CFRelease(font);
CFRelease(paragraphStyle);
// 将段落样式应用于字符串以创建属性字符串。
NSAttributedString* attrString = [[NSAttributedString alloc]
initWithString:(NSString*)plainText
attributes:attributes];
return attrString;
}
在清单2-7
中,样式化字符串用于创建框架集。代码使用框架集创建框架并绘制框架。
清单2-7
绘制样式段落
- (void)drawRect:(CGRect)rect {
// 在iOS中初始化图形上下文。
CGContextRef context = UIGraphicsGetCurrentContext();
// 仅在iOS中翻转上下文坐标。
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// 设置文本矩阵。
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CFStringRef fontName = CFSTR("Didot Italic");
CGFloat pointSize = 24.0;
CFStringRef string = CFSTR("Hello, World! I know nothing in the world that has
as much power as a word. Sometimes I write one,
and I look at it, until it begins to shine.");
// 应用段落样式。
NSAttributedString* attrString = applyParaStyle(fontName, pointSize, string, 50.0);
// 将带有应用段落样式的属性字符串放入框架集中。
CTFramesetterRef framesetter =
CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attrString);
// 创建一个填充视图的路径。
CGPathRef path = CGPathCreateWithRect(rect, NULL);
// 创建一个绘制框架。
CTFrameRef frame = CTFramesetterCreateFrame(
framesetter, CFRangeMake(0, 0), path, NULL);
// 绘制frame。
CTFrameDraw(frame, context);
CFRelease(frame);
CGPathRelease(path);
CFRelease(framesetter);
}
在OS X
中,NSView
drawRect:方法接收NSRect参数,但CGPathCreateWithRect 函数需要CGRect
参数。因此,您必须使用以下函数调用将NSRect
对象转换为CGRect
对象:
CGRect myRect = NSRectToCGRect([self bounds]);
此外,在OS X
中,您可以获得不同的图形上下文,并且不会翻转其坐标,如清单2-7
中的注释所示。
在非矩形区域中显示文本
在非矩形区域中显示文本的困难部分是描述非矩形路径。清单2-8
中的AddSquashedDonutPath
函数返回一个环形路径。获得路径后,只需调用常用的Core Text
函数即可应用属性并绘制。
清单2-8
在非矩形路径中显示文本
// 创建一个甜甜圈形状的路径。
static void AddSquashedDonutPath(CGMutablePathRef path,
const CGAffineTransform *m, CGRect rect)
{
CGFloat width = CGRectGetWidth(rect);
CGFloat height = CGRectGetHeight(rect);
CGFloat radiusH = width / 3.0;
CGFloat radiusV = height / 3.0;
CGPathMoveToPoint( path, m, rect.origin.x, rect.origin.y + height - radiusV);
CGPathAddQuadCurveToPoint( path, m, rect.origin.x, rect.origin.y + height,
rect.origin.x + radiusH, rect.origin.y + height);
CGPathAddLineToPoint( path, m, rect.origin.x + width - radiusH,
rect.origin.y + height);
CGPathAddQuadCurveToPoint( path, m, rect.origin.x + width,
rect.origin.y + height,
rect.origin.x + width,
rect.origin.y + height - radiusV);
CGPathAddLineToPoint( path, m, rect.origin.x + width,
rect.origin.y + radiusV);
CGPathAddQuadCurveToPoint( path, m, rect.origin.x + width, rect.origin.y,
rect.origin.x + width - radiusH, rect.origin.y);
CGPathAddLineToPoint( path, m, rect.origin.x + radiusH, rect.origin.y);
CGPathAddQuadCurveToPoint( path, m, rect.origin.x, rect.origin.y,
rect.origin.x, rect.origin.y + radiusV);
CGPathCloseSubpath( path);
CGPathAddEllipseInRect( path, m,
CGRectMake( rect.origin.x + width / 2.0 - width / 5.0,
rect.origin.y + height / 2.0 - height / 5.0,
width / 5.0 * 2.0, height / 5.0 * 2.0));
}
// 生成drawRect调用之外的路径,以便仅计算路径一次。
- (NSArray *)paths{
CGMutablePathRef path = CGPathCreateMutable();
CGRect bounds = self.bounds;
bounds = CGRectInset(bounds, 10.0, 10.0);
AddSquashedDonutPath(path, NULL, bounds);
NSMutableArray *result =
[NSMutableArray
arrayWithObject:CFBridgingRelease(path)];
return result;
}
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
// 在iOS中初始化图形上下文。
CGContextRef context = UIGraphicsGetCurrentContext();
// 仅在iOS中翻转上下文坐标。
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// 设置文本矩阵。
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
// 初始化属性字符串。
CFStringRef textString = CFSTR("Hello, World! I know nothing in the world that
has as much power as a word. Sometimes I write one, and I look at it,
until it begins to shine.");
// 创建一个可变的属性字符串。
CFMutableAttributedStringRef attrString =
CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
// 将textString复制到新创建的attrString中。
CFAttributedStringReplaceString (attrString, CFRangeMake(0, 0), textString);
// 创建一个将作为属性添加到attrString的颜色。
CGColorSpaceRef rgbColorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = { 1.0, 0.0, 0.0, 0.8 };
CGColorRef red = CGColorCreate(rgbColorSpace, components);
CGColorSpaceRelease(rgbColorSpace);
// 将前13个字符的颜色设置为红色。
CFAttributedStringSetAttribute(attrString, CFRangeMake(0, 13),
kCTForegroundColorAttributeName, red);
// 使用属性字符串创建框架集。
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
// 创建用于绘制文本的路径数组。
NSArray *paths = [self paths];
CFIndex startIndex = 0;
// 在OS X中,使用NSColor而不是UIColor。
#define GREEN_COLOR [UIColor greenColor]
#define YELLOW_COLOR [UIColor yellowColor]
#define BLACK_COLOR [UIColor blackColor]
// 对于路径数组中的每个路径......
for (id object in paths) {
CGPathRef path = (__bridge CGPathRef)object;
// 将路径的背景设置为黄色。
CGContextSetFillColorWithColor(context, [YELLOW_COLOR CGColor]);
CGContextAddPath(context, path);
CGContextFillPath(context);
CGContextDrawPath(context, kCGPathStroke);
// 为此路径创建frame并绘制文本。
CTFrameRef frame = CTFramesetterCreateFrame(framesetter,
CFRangeMake(startIndex, 0), path, NULL);
CTFrameDraw(frame, context);
// 在此frame中不可见的第一个字符处开始下一帧。
CFRange frameRange = CTFrameGetVisibleStringRange(frame);
startIndex += frameRange.length;
CFRelease(frame);
}
CFRelease(attrString);
CFRelease(framesetter);
}
上一章 | 目录 | 下一章 |
---|