UE4-（蓝图）第五十五课图片九宫格拉伸的使用

一、为什么使用九宫格拉伸

在UI布局的时候，有时候使用的图片与我们要制作的UI大小有差距，如果图片是普通方式直接拉伸很可能造成图片四个角上的效果与原图片差距太大甚至是变形，这时候使用九宫格模式拉伸，可以保持图片四个角上的样式不发生改变，只对中间区域拉伸。

原始

正常拉伸：

九宫格拉伸：

二、图片参数设置

1.新建一个UI 控件蓝图，在CanvasPanel下拖入一个Image，选择一张图片进行显示。

2.在Image 细节面板，Appearance栏下的Draw As 更改为Box模式。

Margin：边缘 九宫格需要横竖分别两条线才能将图片分为九个区域，边缘的意思是指上下左右四条线分别距离各自对应图片一侧边缘的距离。