文本组件是在画布上展示一段任意文本的组件。
94.png

一、添加组件

点击“组件”打开组件库列表,点击“文本”组件拖到画布区。
95.gif

二、调整组件位置

通用的调整组件位置方法,请参考文档:调整组件位置

三、调整组件大小

通用的调整组件大小方法,请参考文档:调整组件大小

四、通用

组件通用配置请参考文档:组件通用配置

五、文本内容

设置文本组件中显示的内容。可以设置为固定值,在下边文本框中输入文本内容。也可以关联数据,使用数据源为组件动态设置文本内容。
96.gif

文本组件的文本内容禁止使用 数组 对象 类型的数据源。但是当选择的数据源为 对象 类型时,可以在 数据字段 中选择使用哪个字段来给文本内容赋值。

该字段的值也不能是 数组 对象 类型的数据。 如果需要使用数组或对象的数据时,请创使用数据过滤脚本,过滤出符合要求的数据。

97.gif

六、文本样式

1. 颜色

  • 使用固定值的颜色时,文字的颜色固定不变。可以通过调色盘(下图左)中设置颜色和透明度,或者直接在颜色代码框(下图右)中直接输入颜色的六位十六进制代码值和透明度值。

98.png99.png

  • 使用关联数据的颜色时,文本颜色由数据源动态决定。
    • 数据源的数据可以是:颜色单词(例如:redbluewhite 等);
    • 六位或八位十六进制颜色码(例如:#FFFFFF#FFFFFFFF 等);
    • RGB/RGBA颜色值(例如:RGB(255,0,255)RGBA(255,0,255) 等)。

八位颜色码前两位为透明度,00为完全透明,FF为完全不透明。

100.gif

2. 字号

文本内容的字号默认是 20px,可以点击字号的下拉框,选择合适的字号。目前提供的字号为:18px、20px、24px、32px、36px 和 64px。
101.gif

当字号过大,使得文字大小超过组件的边界时,组件的边界不会随之扩大。

3. 字重

字重有 常规粗体 两个选项。默认是常规,可以选择粗体使文本内容加粗。
102.gif

4. 行高

当一个组件中的文本内容在多行中显示时,可以设置 行高 属性来控制多行文本间的距离。默认是20,可设置的区间为 [0-64]。

可以拖动滑动条设置,也可以直接输入行高值。
103.gif

七、对齐方式

如果组件边界较大但文字较少,可以设置对齐方式来决定文字在组件中展示的位置。

对齐方式分为:

  • 水平 左对齐/水平居中/右对齐
  • 垂直 上对齐/垂直居中/下对齐

104.gif

八、交互

通用的交互配置请参考文档:组件交互