欢迎光临散文网 会员登陆 & 注册

UE4 富文本

2021-06-29 16:58 作者:年年萧  | 我要投稿

在控件蓝图中加入 RichTextBlock 控件(由于 RichTextBlock 控件必须指定文本格式数据表格。否则无法显示任何文本内容)


  • 多样式文本设置

目前 RichTextBlock 控件支持样式文本和样式图片,样式文本需要借助编写数据表格(DataTable)来标注文本样式。步骤如下:

  1. 构建文本数据表格

  2. 构建文本格式数据

  3. 编写文本

  • 构建文本格式表格

    数据表格中的表头结构体不需要我们单独编写,引擎有提供表格的表头格式。直接在内容浏览器中右键杂项中选择

表头选择虚幻提供的富文本格式结构体


注意:RichImageRow是富文本中用来插入图片,标记图片格式的。RichTextStyleRow用来标记文本格式,我们选择文本格式

  • 构建文本格式数据

数据表格是用来构建标签标记的依据。将你希望使用的文本内容标记,通过添加数据条目来完成。条目名称即为标签名称。文本的外观、大小、颜色等信息均需要在表格中填入!

注意:表格中必须提供“Default”数据条目(Default用来指定默认文本格式)

  • 设置数据表格到RichTextBlock

在富文本中控件细节面板中将刚刚构建的数据表格进行设置即可

  • 编写文本

设置妥当后,文本编写就相对比较简单了,在RichTextBlock的细节面板中,找到Text输入文本即可。需要注意的是,输入后需要编译下才可以显示

如果编译后没有显示文本,请检查文本格式数据表格中,是否包含“Default”数据条目。

在数据表格中,我加入了数据条目“F01”并且设置了文本的样式,编译后就显示为图2的样子(图2测试文本也加入了图像),文本格式如下!

这是恢复魔法药品<F01>紫罗兰</>

注意,标签格式,和标签结尾,圈定内的文本将会使用数据表格中的标签名称条目的字体样式来显示

  • 多样式图像设置

图像设置和文本设置几乎相同,但是唯一区别在于设置到控件上时方式不同。总共分为以下几步:

  1. 构建图像格式数据表格

  2. 创建图像格式装饰类

  3. 应用装饰类

  4. 通过标签显示图像

构建图像格式表格

流程参照图3,图4,选择表格头为”Rich Image Row”。打开数据表格后,即可编辑图像。

同样,数据条目名称是用来标记富文本中插入图像的参考,不能随意命名。图片的格式需要在数据表格中设置完成,例如大小,对齐,填充方式等。

  • 创建图像装饰类 

与文本样式不同,图像样式无法直接设置到 RichTextBlock 控件上,需要通过使用装饰类来完成,装饰类构建非常简单,只需要创建蓝图继承装饰类即可。

创建完成后打开蓝图,在类设置中即可设置图像数据表格信息。

至此图像装饰类构建设置完成。

  • 应用装饰类

应用装饰类只需要在 RickTextBlock 控件的细节面板中进行添加即可。一个控件可以添加多个装饰类。

  • 添加图像标签

在文本中,添加图像标签即可,标签格式如下

<img id="icon02"/>

icon02就是你构建的图像数据表格中的数据条目名称。千万注意不能有多余的空格,可以直接复制上面的文本使用。多空格会导致解析错误。


UE4 富文本的评论 (共 条)

分享到微博请遵守国家法律