iOS CoreText实现上下角标

应用场景:比如有个化学方程式2H2+O2=2H2O,比如要显示2的3次方,2^3.


实现效果

一、CoreText基本使用

请挪步至:iOS实现仿真翻页及CoreText文字图片排版

二、CTRun的使用

CTFrameRef粒度较大,处理单行单个属性时使用CTRun最合适。

2.1CTFrameRef转CTLineRef

CFArrayRef Lines = CTFrameGetLines(frameRef);//获取frame中CTLineRef数组
CFIndex lineCount = CFArrayGetCount(Lines);//获取数组Lines中的个数
CTLineRef lineRef = CFArrayGetValueAtIndex(Lines, i);//获取单行CTLineRef

2.2 CTLineRef转CTRun

CFArrayRef runs = CTLineGetGlyphRuns(_lineRef);//获取lineRef中CTRunRef数组
CFIndex runCount = CFArrayGetCount(runs);//获取数组runs中的个数

2.3 CTRun绘制

CGContextSetTextPosition(context, textPosition.x, textPosition.y);//设置CTRun的位置
CTRunDraw(_runRef, context, CFRangeMake(0, 0));//绘制CTRun

三、右下标实现

3.1实现原理

获取sub标签,把对应字符的y设置为Baseline,height设置为Decent,角标的字体是正常的2/3。

贴一张Glyphs 字形常见参数


字形

3.2height设置为Decent

高度设置是在解析中设置的。

追加字符后,设置CTRun的高度
NSRange badgeRange = NSMakeRange(contentRange.location, contentRange.length);
[attr addAttribute:NSBaselineOffsetAttributeName value:@(baselineOffset) range:badgeRange];
设置对应属性
CFAttributedStringSetAttributes(_contentAttributed, contentRange, dictionary, NO);

3.3y设置为Baseline

考虑到CTFrame粒度太大,采用更小的粒度CTRun。

CTRunDraw是绘制CTRun的方法,需要设置CGPoint
CGFloat y = [oneRun frameOfGlyphAtIndex:0].origin.y;
CGPoint textPosition = CGPointMake(oneLine.lineFrame.origin.x, configManager.height - y - oneRun.ascent);
CGContextSetTextPosition(context, textPosition.x, textPosition.y);

3.4角标的字体是正常的2/3

UIFont *badgeFont = [UIFont fontWithName:fontFamily size:fontSize * 2 / 3];
UIFont *textFont = [UIFont fontWithName:fontFamily size:fontSize];

3.5右上角角标实现

同sub类似,y和height赋值略有不同。

总结:具体实现上,细节还需要打磨。最后附上demo.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.iOS中的round、ceil、floor函数略解 round如果参数是小数,则求本身的四舍五入.ceil如果...
    K_Gopher阅读 1,201评论 1 0
  • 系列文章: CoreText实现图文混排 CoreText实现图文混排之点击事件 CoreText实现图文混排之文...
    老司机Wicky阅读 40,295评论 221 432
  • 苹果文档 https://developer.apple.com/documentation/coretext C...
    阳明AGI阅读 441评论 0 4
  • 目前社交类型的App也是层出不穷,无论是QQ的说说,还是微信的动态,微博的帖子。这种类型的App都会涉及到点赞文本...
    墨香茉香阅读 687评论 0 3
  • 从小体弱多病,可是从来没有下过决心去努力锻练身体,所以年复一年,日复一日,我依然是自己柔弱的样子,眼看步入中年,才...
    暖暖的被爱阅读 265评论 0 1