布局 (Layouts)
N轴切片 (N-Slicing)
什么是 N轴切片？
N轴切片 (N-Slicing) 是一种技术，允许你将位图或矢量设计划分为多个区域，使其在某些方向上可以拉伸或重复，而其他部分保持固定尺寸。这对于创建可伸缩的 UI 组件（如按钮、面板、对话框框架）至关重要。
常见切片类型
- 1-Slice：单一方向的拉伸。
- 3-Slice：水平方向分为左、中、右三段（左右固定，中间拉伸）。
- 9-Slice：水平和垂直方向都分割，形成 9 个区域（四角固定，边缘拉伸，中心可填充）。
为什么使用 N轴切片？
如果不使用切片，当你缩放一个带有圆角的按钮时，圆角会被拉伸变形。通过 N-Slice，你可以确保：
- 圆角保持固定半径。
- 边框粗细不变。
- 只有中间区域被拉伸或平铺。
设置 N轴切片
- 选中目标对象（一个形状或图片）。
- 在检查器 (Inspector) 中找到 N-Slice 选项。
- 定义切片的边界（上下左右的像素值）。
- 选择填充模式：拉伸 (Stretch) 或 平铺 (Tile)。
矢量图的 N轴切片
Rive 不仅支持位图的 N-Slice，还支持矢量资产的切片。这意味着你可以创建保持锐利度的、完全可缩放的 UI 框架——无论在任何分辨率下都不会模糊。
常见应用场景
- 按钮：固定圆角，拉伸中间以适应文本长度。
- 对话框/弹窗：固定边框装饰，扩展内容区域。
- 进度条：两端固定，中间填充。
- 游戏 UI 面板：保持装饰性边角，适应各种尺寸。