yytextview多种格式_YYText之图文混排
YYText之图文混排
1.图文混排的原理?
我觉得,查看代码前,最重要的一件事是知道图文混排到底是怎么实现的。
核心思想:生成富文本时把,一张图片先用一个占位符代替。实际渲染时,图片占位符的渲染处理会更多一些。
根据这个原理,我们开始深入的学习。本文Demo基于YYKitExample。
2.YYTextAttachmentExample
我们先看YYTextAttachmentExample.m中的代码实现。self.view上有3个富文本,并且末尾都带了图片。我们可以看出,设置富文本的核心方法如下,深入看看其中做了什么。
+ (NSMutableAttributedString *)attachmentStringWithContent:(id)content
contentMode:(UIViewContentMode)contentMode
attachmentSize:(CGSize)attachmentSize
alignToFont:(UIFont *)font
alignment:(YYTextVerticalAlignment)alignment;
结合代码运行流程,我们分为以下几个部分:
2.1 生成NSMutableAttributedString实例
初始化时提供了一个占位符@"\uFFFC",用于代替图片信息。
2.2 YYTextAttachment
说到图文混排,必然会用到NSTextAttachment,它是NSAttributedString的类簇,设置富文本时对应的key是NSAttachmentAttributeName。简而言之,我们给一个NSAttributedString实例添加图片时,就是将image实例作为以上key的value。YYText自身实现了一个YYTextAttachment,作者是这么介绍的:
YYTextAttachment是NSAttributedString的类簇,它的实例作为富文本key属性YYTextAttachmentAttributeName的value。当富文本包含YYTextAttachment时,它会采用文本规则展示。比如,attachment的内容是UIImage时,它会被绘制为CGContext;attachment的内容是UIView或CALayer时,它会被加入到text container的view层或layer层上。
2.3 YYTextRunDelegate
在这之前我们先要知道,NSAttributedString相比于NSString多了很多attribute的概念,比如下划线、背景色等。每个字符都有一个字符区域,渲染每个字符多种多样的attributes都是在这个区域的基础上的。转换成代码是什么意思呢?CoreText的为我们提供了这个体系:
CTFrame.jpg
NSAttributedString初始化后会生成CTFramesetter,CTFramesetter根据不同的CGPath生成对应的CTFrame,一个CTFrame由多行CTLine组成,一个CTLine会包含多个CTRun(字形绘制的最小单元)。
结合之前说的绘制的核心思想,可以这么理解:一行带有文字和图片的富文本,包含若干个CTRun绘制单元,图片的绘制单元相对特殊一些。为什么呢?因为CoreText并不能直接将一个图片转换为CTRun来绘制,所以它先用占位符预留空间,而真正的图片绘制是交给CoreGraphics完成的。
问题又来了,CoreGraphics是如何拿到这些绘图信息(descent、ascent、width等)呢?到这终于引出了CTRunDelegate。我们为富文本的kCTRunDelegateAttributeName属性赋值一个CTRunDelegate实例,CoreText可以根据它拿到它内部的属性,如descent、ascent、width等。
2.4 小结
通过以上3个步骤,一个富文本就生成了。其中涉及到了CoreText的许多类,尤其是NSTextAttachment和CTRunDelegate。还有,富文本的文本结构。详细内容,推荐《Text Programming Guide for iOS》
yytextview多种格式_YYText之图文混排相关推荐
- 计算机基础图文混排教案,中职《Word图文混排》教学设计|word图文混排教学设计...
摘 要 文章举例说明了中等职业学校计算机教学中的<word图文混排>教学设计并通过此设计实现了图文混排在实际生活中的应用,培养及提高了学生团结合作.分析问题和解决问题的能力,特别是应用计算 ...
- iOS - 图文混排技术方案分享
前言 不少同学在工作中都能遇到图文混排的需求.但是实现图文混排的技术方案有好几种,相应的方案优劣也有差别.今天和大家一起分享一下图文混排的技术方案以及我的选择. Demo和解析工具已经开源 GitHu ...
- 大学计算机word图文混排,Word 2003从入门到精通第五讲(图文混排)讲稿
<Word 2003从入门到精通>第五讲(图文混排) 讲师 朱先忠Part 0主要内容 Part 1插入图形 在WORD2003中,插入图片的8种途径: 剪贴画 来自文件 来自扫描仪或者照 ...
- java swing实现图文混排_跟我学Java Swing之游戏设计(4)
你有没有经历过装修?尽管它是件劳神费力的事,可现代人还是不遗余力地在装修上花尽心思.毕竟,在这个视觉支配感观的时代里,谁会嫌自己家太漂亮呢?今天,就让我们秉着精益求精的完美主义精神,在上次已经完成的游 ...
- 计算机制作画报说课稿,运用word图文混排制作海报说课稿
尊敬的各位评委老师: 你们好!我是砀山二中的信息教师苏婷,今天,我说课的题目是<运用WORD图文混排制作海报>,选自广东教育出版社<信息技术基础>必修第三章信息加工与表达(上) ...
- 计算机基础图文混排笔记,计算机基础知识与基本操作——图文混排课件.doc
文档介绍: Forpersonaluseonlyinstudyandresearch;mercialuse第25~28课次图文混排[本节要点]本节主要要求掌握图片的插入.图片格式的设置.图形的绘制.艺 ...
- android多媒体图文混排,干货!!!Android富文本实现图文混排
效果图 rich.jpg 像图中的效果,大家在开发并不少见,大家可能不知道android提供了实现图文混排的类.大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标. and ...
- 计算机基础知识与基本操作文档,计算机基础知识与基本操作——图文混排课件...
版权所有-中职教学资源网 第25-28课次 图文混排 [本节要点] 本节主要要求掌握图片的插入.图片格式的设置.图形的绘制.艺术字的使用和文本框的使用. [老师寄语] 图文混排是WORD的特色功能之一 ...
- NGUI-制作位图字体以及图文混排
制作字体过程 首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载 1.新建txt文件,输入字体里面包含的文字 2.保存为utf-8格式:点击文件另存为,选择编码格式 ...
- 计算机应用基础word说课,全国“XX杯”说课大赛计算机应用基础类优秀作品:Word图文混排教案.doc...
全国"XX杯"说课大赛计算机应用基础类优秀作品:Word图文混排教案.doc 文档编号:1054624 文档页数:5 上传时间: 2020-05-30 文档级别:精品资源 文档类型 ...
最新文章
- java access 分页查询语句,简单又高效的Access分页语句
- [转帖]IP地址、子网掩码、网络号、主机号、网络地址、主机地址以及ip段/数字-如192.168.0.1/24是什么意思?...
- learning to rank
- 码云上传代码添加标签_第一次使用Git Bash Here 将本地代码上传到码云
- ubuntu不会自动休眠_关机、睡眠、休眠有啥区别?微软说非特殊情况不要关机
- 发布不同类型的话题问题
- Symantec BE 安装及备份oracle 完整版
- Visual FoxPro已经过时了吗 ?我也经常问自己!
- 2021年全球及中国区块链投融资及技术专利情况:中国区块链相关注册企业达到9.36万余家,新增专利15985项 [图]
- [总结]国家电网计算机类备考总结
- android tasker,Android 神器,Tasker 实战
- 数据库中COMMENT关键字的使用
- 视频编码器h.264和mpeg4的区别?
- 四、SLAM学习笔记—— Ubuntu18.04交叉编译OpenCV4.5.5至ARM64位平台firefly-RK3566
- 双十一就要到啦,教你用Python制作抢购脚本,秒杀一切商品
- 10万+爆文怎么写?这些软文写作技巧你掌握了吗?
- 百度地图在地图上添加多个点,并调整地图层级及中心点至合适位置大小
- svn 文件前前面的标识符
- A10-7860K试装DSM
- 2021玉林芳草中学高考成绩查询,成都玉林中学2021年招生录取分数线