文字背景模板
三段式背景、Padding 和元素覆盖字段参考
文字背景由左端、可重复中段和右端组成:
左端 + 左内边距 + 文字 + 右内边距 + 右端需要完整操作流程时,先阅读文字背景与内边距。本页代码未标为完整文件时,均为对应节点中的片段。
文件关系
config.yml
background_left.png
background_center.png
background_right.png
tutorial.yml
tutorial_background.yml
背景模板
文件位于 core/background:
下面依赖背景教程已登记的 tutorial/background 图片组。
modern_text:
namespace: tutorial
basename: background
left: left
center: center
right: right
padding:
left: 6
right: 6| 字段 | 类型 / 省略值 | 说明 | 生效 |
|---|---|---|---|
| 顶层节点 | 字符串 | 背景模板 ID | 打包 |
namespace | 字符串 / 必填 | 图片命名空间 | 打包 |
basename | 字符串 / 必填 | 图片组 | 打包 |
left | 图片 ID / 无 | 左端图片 | 打包 |
center | 图片 ID / 必填 | 可横向重复的中段 | 打包 |
right | 图片 ID / 无 | 右端图片 | 打包 |
padding.left | 整数 0~512 / 0 | 默认左内边距,GUI 像素 | 打包 |
padding.right | 整数 0~512 / 0 | 默认右内边距,GUI 像素 | 打包 |
三张图片的配置显示高度应一致。推荐把中段制作成窄 PNG,Xerr 会自动生成 1px 和 32px 组合片段。
生成片段保存在内部缓存 cache/background,不会写入图片资产目录,也无需随素材包分发。修改源图片后重载配置并重新生成资源包,即可更新背景。
Layout 元素字段
background:
id: modern_text
x: -2
y: 18
padding:
left: 10
right: 14| 字段 | 类型 / 省略值 | 说明 |
|---|---|---|
id | 字符串 / 无 | 背景模板 ID |
x | 整数 / 0 | 只移动背景,不移动文字 |
y | 整数 / 0 | 与文字共用基准的独立顶部坐标,不叠加文字 y |
padding.left | 整数 0~512 / 继承 | 单次覆盖左内边距 |
padding.right | 整数 0~512 / 继承 | 单次覆盖右内边距 |
Padding 会扩大背景,但不会移动文字。当前只支持左右 Padding;上下留白由背景 PNG 高度和独立 y 决定,不存在 padding.top/bottom 字段。
例如文字 y: 20、背景 y: 24,背景顶部比文字向上 4px,不是 44px。
多行与边界
- 每行文字单独测量和绘制背景。
- 空文字不绘制背景。
- Stack 会把端点、背景和 Padding 计入自动边界。
- 不希望装饰影响边界时,在元素上设置
affect-bounds: false。