博舍

NGUI的图文混排 人工智能图文混排案例

NGUI的图文混排

NGUI的图文混排功能(踩坑记录)鄙人思路

首先在网上找到了好几种思路(个人也是新手,勿喷):

1.使用NGUI自带的BBCode功能,通过创建Bitmap字体实现。2.使用一个Lable加上多个图片实现。3.使用多个Lable多个图片实现。4.使用两个Lable,其中一个为带BBCode字体的Lable实现。(现在修改为使用一个Lable,借助BBCode,不修改源码实现)5.使用一个Lable,一个Texture实现(推荐)。

方案一:用NGUI自带的BBCode功能,通过创建Bitmap字体实现

主要是通过NGUI自带的FontMaker进行Bitmap的字体的创建,选择好制作完毕的表情包图集,点击CreattheFont,通过设置表情的依赖文字即可显示表情,缺点在于使用大量的中文的时候非常蛋疼,个别中文的话可以自己写入字体的Custom中。具体可以借鉴雨松MOMO大神的文章:https://www.xuanyusong.com/archives/2908(雨松MOMO2014年07月03日于雨松MOMO程序研究院发表)

方案二:使用一个Lable加上多个图片实现。

首先把所有文字输入都某个函数,识别出第一个图片信息的字符串,把这个包含图片信息的字符串以及前面的文字裁剪下来,和裁剪以后的文字形成两部分。把裁剪的前面部分(包含图片信息)分析出图片信息,各种计算,最后得到图片的position,生成gameObject并摆放好。保存各种信息。图片部分用空格留出位置,形成新的字符串,和裁剪的第二部分的文字组合成新文字。输入到1里的那个函数。递归。最终一次过输出所有文字。具体可以借鉴chrisfxs大神的文章:https://blog.csdn.net/chrisfxs/article/details/51259295Demo链接:http://pan.baidu.com/s/1hs1LzYs

方案三:使用多个Lable多个图片实现。没找到原文链接,附上Demo:https://pan.baidu.com/s/1qranGDEZC9tiwisUKw30_g

方案四:使用两个Lable,其中一个为带BBCode字体的Lable实现。现在修改为使用一个Lable,借助BBCode,不修改源码实现此方案笔者这段时间在开发聊天系统的时候觉得很好用,通过NGUI的自带的FontMaker制作工具:其中中文字库的制作方法这里介绍下,是一张很大的png图片,通过Bmfont制作的,大家可以看这个链接,有教程:https://blog.csdn.net/wuming22222/article/details/51713350

最后给大家看一下效果图,勿喷:

附上源码地址:链接:https://pan.baidu.com/s/1Gt5KTwYTv8LvRlWzRkzpfQ密码:shll

方案四:使用一个Lable,一个Texture实现。

Oyyming大神文章:https://blog.csdn.net/u014051620/article/details/78029035

大神前言众所周知,UILabel的静态字体是支持表情的,不过需要将表情与文字打包到一个图集中,并且因为受限于静态字体,几乎不适用于中文日文等文字的图文混排。

这几天因为项目需要研究了一下动态字体中使用表情的解决方案,不过好像并没有搜到比较好的方案,最终研究了一下NGUI中的源码,决定采取类似于UIInput生成光标和高亮的做法。

原理原理基本上就是在UILabel每次处理文本的ProcessText方法中判断当前文本是否含有表情符号,如果有,就在UILabel下添加一个UITexture,并将计算好的顶点坐标和UV坐标写入UITexture中;另外还需要相应的修改NGUIText中计算顶点坐标和UV坐标的类,确保UILabel中文字的坐标空出了表情的位置。

直观一点描述就是,UILabel中只显示文字,UITexture中显示表情,这两个控件叠在一起就形成了图文混排的效果。

从目前达到的效果来看还算不错,需要显示表情时会动态创建UITexture,并不会带来过多的内存开销,另外我给UILabel加了useEmoji这个开关来控制是否检查表情,默认为false,如果某些UILabel需要显示表情,就给设成true就好,当然也可以在代码中修改。

另外我又给UILabel加了emojiAlignment这个属性,可以控制表情和文字的垂直对齐方式,默认的选项是Top,即表情和文字的上边缘对齐;Center则垂直居中对齐;当然比较常见的应该是Bottom对齐,即下边缘对齐。

最后放上Github地址:https://github.com/OYYMING/EmojiLabel

第一次写博客,主要是为了记录下自己踩得坑,虽然记录的都是诸位大神的文章,也希望大家少踩一点坑吧。如有侵权,请及时联系!

《Word图文混排》教学案例

欢迎下载

 

Word

图文混排》教学案例

 

 

一、教学目标:

 

1

、知识与技能

 

①了解各种图文混排版式特点及适用范围

②根据需要灵活选用合适的版式进行图文混排。

 

③了解图像层次关系并掌握图像层次调整方法。

 

④了解文本框、艺术字的版式设计与层次调整。

 

2

、过程与方法

 

以实际需要为引入点,

以问题带动探究,

以任务驱动教学,

让学生在实践体

验中总结深入。主要通过引导学生观察对比将文字设置为不同版式后的版面效

果,

然后自己归纳出各种混排版式的特点和适用范围,

从而可以根据需要选择合

适的版式,

给学生提供一个自由发挥的平台,

培养学生的观察、

思考与归纳总结

的能力,培养学生灵活运用所学知识解决问题的能力。

 

3

、情感态度与价值观

 

①提高学生团结协作、互助共进的意识与能力

 

②培养学生科学的审美观,

提升灵活运用所学知识安排版面、

调整布局的能

力。

 

二、重难点

 

1

、重点:掌握不同的图文混排版式的特点及适用范围

 

2

、难点:能够合理、灵活地运用各种图文混排的版式

 

三、设计思路:

 

课堂教学中我始终坚信“兴趣是最好的老师”,所以本节课中我以学生的探究

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

上一篇

下一篇