制作可任意拉伸的 UI 图像

    上图右边为原始贴图大小的显示,左边是选择 Sliced 模式并放大 属性后的显示效果。

    • 场景编辑器 中选中想要九宫格化的图像节点,然后在 属性检查器 的 Sprite 组件里,找到并按下Sprite Frame属性右侧的编辑按钮。
      打开 Sprite 编辑器 以后,可以看到图像周围有一圈绿色的线条,表示当前九宫格分割线的位置。将鼠标移动到分割线上,可以看到光标形状改变了,这时候就可以按下并拖拽鼠标来更改分割线的位置。

    我们分别拖动上下左右四条分割线,将图像切分成九宫格,九个区域在 Sprite 尺寸(size)变化时会应用不同的缩放策略,见下图:

    sliced

    完成切分后别忘记点击 Sprite 编辑器 右上角的绿色对勾来保存对资源的修改。

    • 然后通过矩形变换工具拖拽控制点使节点的 属性变大。您也可以直接在 属性检查器 中输入数值来修改 size 属性。如果图像资源是用九宫格的形式生产的,那么不管 Sprite 如何放大,都不会产生模糊或变形。

    在使用矩形变换工具或直接修改 Sliced Sprite 的size属性时,注意属性值不能为负数,否则不能以 Sliced 模式正常显示。