跳转到正文
iPlugin

文字背景模板

三段式背景、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。