CoreText的绘制流程-转

来自:http://blog.sina.com.cn/s/blog_7c8dc2d50101lbb1.html

使用coreText进行文本绘制,需要在工程中添加CoreText.framework,然后在AttributedLabel.m里import就可以使用了。coreText负责绘制,那绘制的内容和属性则要靠NSAttributedString来存储,如果属性具有不确定性,可以使用NSMutableAttributedString,方便后面添加属性。

先来看下如何创建一个具有两个颜色,两种字体的“hello world”的NSMutableAttributedString实例。

NSString *text = @"hello word";

NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:text];

[attributedText addAttribute:(NSString*)(kCTForegroundColorAttributeName) value:(id)[[UIColor blueColor]CGColor] range:NSMakeRange(0,5)];

[attributedText addAttribute:(NSString*)(kCTForegroundColorAttributeName) value:(id)[[UIColor redColor]CGColor] range:NSMakeRange(6,5)];

CTFontRef  font_hello = CTFontCreateWithName((CFStringRef)@"Helvetica",16,NULL);

CTFontRef  font_world = CTFontCreateWithName((CFStringRef)@"GillSans",20,NULL);

[attributedText addAttribute: (NSString*)(kCTFontAttributeName) value:(id)font_hello range:NSMakeRange(0,5)];

[attributedText addAttribute: (NSString*)(kCTFontAttributeName) value:(id)font_world range:NSMakeRange(6,5)];

这样,一个包含简单绘制属性的NSMutableAttributedString实例就创建出来了。

接下来就要在drawTextInRect函数中开始绘制了。

普通视图坐标系原点在左上方,而QuartZ绘图的坐标系原点在左下方,所以我们先要调整坐标系。

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetTextMatrix(context,CGAffineTransformIdentity);//重置

CGContextTranslateCTM(context,0,self.bounds.size.height); //y轴高度

CGContextScaleCTM(context,1.0,-1.0);//y轴翻转

好了,可以开始绘制,因为"hello world"较短,一行就可以放下,那么可以这么绘制

CTLineRef line = CTLineCreateWithAttributedString(attributedText);

CGContextSetTextPosition(context,0,0);

CTLineDraw(line,context);

CFRelease(line);

OK,就这么多搞定。

那如果文本很长,希望换行来显示怎么办?

那我们先要给attributedText添加些关于行相关属性。

下面都是基本的,可以根据自己绘制情况调整,扩充相应的变量。

CTLineBreakMode lineBreakMode = kCTLineBreakByWordWrapping;//换行模式

CTTextAlignment alignment = kCTLeftTextAlignment;//对齐方式

float lineSpacing =2.0;//行间距

CTParagraphStyleSetting paraStyles[3] = {

{.spec = kCTParagraphStyleSpecifierLineBreakMode,.valueSize = sizeof(CTLineBreakMode), .value = (const void*)&lineBreakMode},

{.spec = kCTParagraphStyleSpecifierAlignment,.valueSize = sizeof(CTTextAlignment), .value = (const void*)&alignment},

{.spec = kCTParagraphStyleSpecifierLineSpacing,.valueSize = sizeof(CGFloat), .value = (const void*)&lineSpacing},

};

CTParagraphStyleRef style = CTParagraphStyleCreate(paraStyles,3);

[attributedText addAttribute:(NSString*)(kCTParagraphStyleAttributeName) value:(id)style range:NSMakeRange(0,[text length])];

CFRelease(style);
下面就可以绘制了
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attributedText);

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRect(path,NULL,self.bounds);

CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0,0),path,NULL);

CGContextSetTextPosition(context,0,0);

CTFrameDraw(frame,context);

CFRelease(framesetter);

CFRelease(frame);

这样绘制出来的可以自适应换行了,或者可以做的复杂点,通过上面获取的CTFrameRef frame来得到CTLineRef绘制

CFArrayRef lines = CTFrameGetLines(frame);

int lineNumber = CFArrayGetCount(lines);

CGPoint lineOrigins[lineNumber];

CTFrameGetLineOrigins(frame,CFRangeMake(0,lineNumber), lineOrigins);

for(int lineIndex = 0;lineIndex < lineNumber;lineIndex++){

CGPoint lineOrigin = lineOrigins[lineIndex];

CTLineRef line = CFArrayGetValueAtIndex(lines,lineIndex);

CGContextSetTextPosition(context,lineOrigin.x,lineOrigin.y);

CTLineDraw(line,context);

}

但这样绘制方法有个问题,就是即使行间距设为0.0(不能为负值)仍是比较分散的。如果希望更进一步控制好行间距,那自己就一行一行计算位置画

float lineHeight = 20; //行高

BOOL drawFlag = YES;//是否绘制

int lineCount = 0;//行数

CFIndex currentIndex = 0;//绘制计数

CTTypesetterRef typeSetter = CTTypesetterCreateWithAttributedString((CFAttributedStringRef)attributedText);

float fontAscender = MAX(font_hello.ascender,font_world.ascender);

float y = self.bounds.origin.y+self.bounds.size.height-fontAscender;

while(drawFlag)

{

CFIndex lineLength = CTTypesetterSuggestLineBreak(typeSetter,currentIndex,self.bounds.size.width);

CFRange lineRange = CFRangeMake(currentIndex,lineLength);

CTLineRef line = CTTypesetterCreateLine(typeSetter,lineRange);

float x = CTLineGetPenOffsetForFlush(line,0,self.bounds.size.width);

CGContextSetTextPosition(context,x,y);

CTLineDraw(line,context);

if(currentIndex + lineLength >= [text length]){

drawFlag = NO;

}

CFRelease(line);

count++;

y -=lineHeight;

currentIndex += lineLength;

}

CFRelease(typeSetter);

到这里的时候,又有个问题,就是用同样的字体和字号,绘制的字总是会比UILabel显示的粗些。

查看kCTStrokeWidthAttributeName属性发现默认已经为0.0,但这个值是可以为负值,那就变通的解决这个问题。

在attributedText里添加两个属性值

CGFloat widthValue = -1.0;

CFNumberRef strokeWidth = CFNumberCreate(NULL,kCFNumberFloatType,&widthValue);

[attributedText addAttribute:(NSString*)(kCTStrokeWidthAttributeName) value:(id)strokeWidth range:NSMakeRange(0,[text length])];

[attributedText addAttribute:(NSString*)(kCTStrokeColorAttributeName) value:(id)[[UIColor whiteColor]CGColor] range:NSMakeRange(0,[text length])];

这样绘制出来的字就细致些

时间: 2024-10-13 00:01:00

CoreText的绘制流程-转的相关文章

Android中View绘制流程以及invalidate()等相关方法分析

前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 .同时真挚地向渴望了解 Android 框架层的网友,推荐这本书,希望你们能够在Android开发里学到更多的知识 . 整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简单概况为 根据之前设置的状态,判断是否需要重新计算视图大小(measure).是否重新需要安置视图的位置(layout).以及是否需要重绘 (d

Android View的绘制流程

View 绘制机制 1. View 树的绘图流程 当 Activity 接收到焦点的时候,它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始,对布局树进行 measure 和 draw.整个 View 树的绘图流程在ViewRoot.java类的performTraversals()函数展开,该函数所做 的工作可简单概况为是否需要重新计算视图大小(measure).是否需要重新安置视图的位置(layout).以及是否需要重绘(draw),流程图如下: Vi

Android中View绘制流程分析

创建Window 在Activity的attach方法中通过调用PolicyManager.makeNewWindo创建Window,将一个View add到WindowManager时,WindowManagerImpl创建一个ViewRoot来管理该窗口的根View.并通过ViewRoot.setView方法把该View传给ViewRoot. final void attach(Context context, ActivityThread aThread, Instrumentation

android源码解析(十八)--&gt;Activity布局绘制流程

这篇文章是承接上一篇文章(Android布局加载流程:http://blog.csdn.net/qq_23547831/article/details/51284556)来写的,大家都知道Activity在Android体系中扮演者一个界面展示的角色,通过上一篇文章的分析,我们知道Activity是通过Window来控制界面的展示的,一个Window对象就是一个窗口对象,而每个Activity中都有一个相应的Window对象,所以说一个Activity对象也就可以说是一个窗口对象,而Window

Android视图View绘制流程与源码分析(全)

来源:[工匠若水 http://blog.csdn.net/yanbober] 1 背景 还记得前面<Android应用setContentView与LayoutInflater加载解析机制源码分析>这篇文章吗?我们有分析到Activity中界面加载显示的基本流程原理,记不记得最终分析结果就是下面的关系: 看见没有,如上图中id为content的内容就是整个View树的结构,所以对每个具体View对象的操作,其实就是个递归的实现. 前面<Android触摸屏事件派发机制详解与源码分析一(

Android视图绘制流程完全解析,带你一步步深入了解View(二)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/16330267 在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧.那么本篇文章中,我们将继续对View进行深入探究,看一看它的绘制流程到底是什么样的.如果你还没有看过我的上一篇文章,可以先去阅读 Android LayoutInflater原理分析,带你一步步深入了解View(一) . 相 信每个Android

Android自定义控件_View的绘制流程

每一个View/ViewGroup的显示都会经过三个过程:1.measure过程(测量View显示的大小,位置):2.layout过程(布局view的位置):3.draw过程(上一篇文章说到的通过canvas绘制到界面上显示,形成了各色的View) 下面分析一下各个过程:measure过程: 因为DecorView实际上是派生自FrameLayout的类,也即一个ViewGroup实例,该ViewGroup内部的ContentViews又是一个ViewGroup实例,依次内嵌View或ViewG

产品经理业务流程图的绘制流程分享

产品经理业务流程图的绘制流程分享 2012/06/28 阅读(72102) 评论(12) 收藏(159) 来人人都是产品经理[起点学院],BAT实战派产品总监手把手系统带你学产品.学运营.点此查看详情 图1:用即时贴与白板做的简单流程图 前言:近来一段时间,忙于整理业务流程图,期间,关于流程图的绘制方法和工具也与内部团队和外部做了心得交流,恰好,个人生活也牵涉在买房,婚礼,户口迁移等流程中.不知不觉,伴随着实践与反思,个人所得的系统知识趋于完整,今儿天气极好,坐在飘窗一隅,听着间或几声鸟鸣歌唱,

Android中View绘制流程以及invalidate()等相关方法分析(转载的文章,出处在正文已表明)

转载请注明出处:http://blog.csdn.net/qinjuning 前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 .同时真挚地向渴望了解 Android 框架层的网友,推荐这本书,希望你们能够在Android开发里学到更多的知识 . 整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简单概况为 根据之前设置的状态,判断是否需要重新计算视图大小(mea