mirror of
https://github.com/galacean/engine.git
synced 2026-05-07 06:30:25 +08:00
54 lines
2.2 KiB
Plaintext
54 lines
2.2 KiB
Plaintext
---
|
||
order: 3
|
||
title: 创建文字
|
||
type: UI
|
||
label: UI
|
||
---
|
||
|
||
`Text` 组件用于在 `UICanvas` 中显示文字。
|
||
|
||
## 编辑器使用
|
||
|
||
### 添加 Text 节点
|
||
|
||
在 **[层级面板](/docs/interface/hierarchy/)** 添加 `Text` 节点
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*yklkSI-wIq0AAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
> 若父亲或祖先节点没有画布组件，会自动添加上根画布节点。
|
||
|
||
### 设置文本内容
|
||
|
||
选中添加了 `Text` 组件的节点，在 **[检查器面板](/docs/interface/inspector)** 修改 `text` 属性可以改变 `Text` 元素的显示内容。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*j46eSYWAfVYAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
### 设置字体
|
||
|
||
选中添加了 `Text` 组件的节点，在 **[检查器面板](/docs/interface/inspector)** 修改 `font` 属性可以改变 `Text` 元素的字体类型。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*vR-rR7eGHZkAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
### 修改字体大小
|
||
|
||
`Text` 组件可以通过调整 `FontSize` 修改渲染尺寸
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*DcrDR6Y_fKAAAAAAAAAAAAAAehuCAQ/original" style={{zoom:"50%"}} />
|
||
|
||
> 修改 `UITransform` 的 `size` 不会改变 `Text` 的渲染尺寸。
|
||
|
||
## 属性
|
||
|
||
| 属性名 | 描述 |
|
||
| :-- | :-- |
|
||
| `text` | 需要显示的文本 |
|
||
| `color` | 文本颜色 |
|
||
| `font` | 自定义字体 |
|
||
| `fontSize` | 文本的字体大小 |
|
||
| `fontStyle` | 字体样式设置：是否加粗/是否斜体 |
|
||
| `lineSpacing` | 行间距 |
|
||
| `horizontalAlignment` | 水平对齐方式，可选值有：Left/Center/Right |
|
||
| `verticalAlignment` | 竖直对齐方式，可选值有：Top/Center/Bottom |
|
||
| `enableWrapping` | 是否开启换行模式，打开换行模式后，会根据设置的宽来进行换行，如果这时候宽设置为 0，那么文本将不渲染 |
|
||
| `overflowMode` | 当文本总高度超出设置的高的时候的处理方式，可选值有：Overflow/Truncate， Overflow 表示直接溢出显示， Truncate 表示只保留设置高度以内的内容显示，具体显示内容还和文本在竖直方向上的对齐方式有关 |
|