九宫格切图UI 九宫格
九宫格切图
按九宫格规则切分 UI 素材,预览拉伸区域并导出切片
九宫格切图
将 UI 面板切成九宫格切片,保留四角细节,同时预览边缘和中心区域的拉伸效果。
切线预览
实时显示参考线
九宫格导出
自动生成 9 片
拉伸预览
模拟 UI 缩放
ZIP 下载
切片统一打包
1上传底图
拖拽 UI 底图到此处
支持 PNG、JPG、WebP
建议上传四角固定、中间可拉伸的界面素材
尚未添加底图本地处理
上传后会显示原图缩略图
2切线参数
按示例尺寸预设
自定义模板
0 个px
px
px
px
2.0x
四角保持原样,四边按单轴拉伸,中心区域双向拉伸。切线越贴近边框装饰,最终 UI 适配越稳定。
Unity:把四边距填入 Sprite Editor 的 Border,中心区使用 Sliced。
Cocos:将 left / right / top / bottom 填入九宫格边距,四角保持不拉伸。
Godot:NinePatchRect 使用 Patch Margin,对应左、右、上、下四个数值。
3预览与下载
上传九宫格底图后,这里会显示切线和拉伸预览
拉伸效果预览
切分完成后会显示 9 个切片