富文本元素

阅读时间:2分钟更新于 2026-03-02 17:23

在一些特定场景下,单纯的文本元素无法满足设计师的设计需求,所以Galacean Effects 提供了可操作程度更高的富文本元素,借助富文本,用户能够实现多种自定义文本样式,极大地提升了文本设计的灵活性和可能性。

设计同学可以在场景中添加富文本元素 ,然后由开发同学根据实际场景更改其中的文本和样式内容(参考开发者文档:富文本)。

创建富文本元素

在左上角工具栏,文本元素列表中选择富文本

修改文本属性

富文本元素的文字属性可以单独设置,操作方式如下:

框选目标文本块,在编辑器上方属性控件处为文本配置独立的“字重”、“字型”、“颜色”和“字号”。

此外,您还可以像处理文本元素一样,对整段富文本应用全局样式,比如:

  • 文本的显示属性:
    • 基础字体
    • 字色
    • 字号
    • 字重(粗体/细体/常规)
    • 字型(斜体/常规)
  • 文本块布局属性(编辑器 2.7 版本新增):
    • 尺寸模式:自动宽度、自动高度、固定尺寸
    • 布局尺寸:
      • 自动宽度:文本块尺寸由文本内容调节
      • 自动高度:文本块高度由文本内容调节,宽度由用户输入决定。
      • 固定尺寸:用户输入决定文本块的宽、高。

注意:

  • 编辑器 2.7 版本升级了富文本元素的布局实现,2.7 之前版本的工程项目打开后,默认不可编辑布局尺寸,修改布局相关属性后会自动开启布局控制,详见:资源版本列表
    • 对齐方式:
      • 水平方向:居左对齐、居中对齐、居右对齐
      • 垂直方向:顶部对齐、居中对齐、底部对齐
    • 文字溢出:
      • 显示全部:显示超出文本块的文字内容
      • 尺寸适配:文字内容的尺寸会自动调整到文本块之间,需要结合「固定尺寸」的文本块布局使用
      • 裁剪溢出:裁剪超出文本块的文字内容
    • 文字换行:文本块超过文本块是否换行
  • 文本块显示属性:
    • 行高
    • 字符间距

富文本编辑器

实际的业务需求中经常需要动态修改富文本元素的内容,开发者除了按照开发文档动态设置文本内容,也可以由设计师提前制作多个【预设】,将视觉效果调整好的文本内容通过富文本编辑器的【复制】能力,将当前的富文本文案交付给开发者,这极大减少开发者手工设置内容的成本。

在【复制历史】中:

  1. 可以将复制过的文本重复复制到粘贴板中
  2. 将复制过的文本直接应用到当前选中的富文本元素上
  3. 删除单条复制历史

开发者

富文本同文本元素一样,支持在运行时实时替换文本内容。现在你可以替换类似上面操作 “红色 test” 部分,这是以前文本元素无法做到的事情。详见:富文本开发文档

Tips:

  • 帧动画默认会在元素生命周期内播放完成全部动画
  • 如果需要元素在播放完所有的序列帧后调整播放速率,可以通过修改元素生命周期,搭配结束行为完成
Preview