UGUI之Image使用

顾名思义：Image就是用来显示图片的

Image中Image组件中有一个重要的熟悉：Image type

当作UI的时候。很多时候会用到图片做背景

比如你把图片放大。你会看到边框就失真了。即变得模糊了，即图片变大。边框也变大了。所以就模糊了

来看看这几个属性的不同用法：

添加一个Image。并给Source Image赋精灵，默认是Simple属性，

图片默认大小：

当图片放大，图片会变得模糊

所以这是不允许的。

一般我们不希望图片的边框跟着图片一起放大缩小，那怎么办呢。

这里就可以使用九宫切图

这时候会用到Image type的第二选项：Sliced

当选择Sliced的时候。下面会提示警告：说这个图片没有边框

首先把图片切成九宫图

选中图片，Sprite Editor

拖动绿色的点开始切图

其实也就是改变了Border

这样就分成了9格

那么这么切分成9格有什么好处呢。当我们利用它来做背景图片的时候，

1：4个角不会被拉伸

2：左右边框只会上下拉伸，

3：上下边框只会左右拉伸

只用中间那部分才会进行拉伸填充

现在设置完成后 Apply一下

在视图中看效果

记住：类型一定要是九宫格类型

Tiled类型

选择Tiled你 会发现

Tiled其实就是按照当前图片的大小进行平铺总个空间

Filled类型

Filled是用来显示当前图片的某一部分的。默认呢。是全部显示（Radial 360）

Radial 360表示以圆的方式进行切割

Fill Amout表示切割哪一部分

用这个可以做技能释放