零基础入门 10： 编辑器下的UGUI Image

从这篇开始，最近的分享都将会以UGUI组件的使用为主题，进行分享。

今天先来分享下在Unity编辑器里，UGUI Image的使用方法。

正题开始：

Image

Image组件是Unity里显示图片的组件，可以将Sprite类型的图片显示在Canvas下。

如下图，我先从桌面拷贝一张图片到项目内。

拷贝到项目内的图片，默认的类型是Texture。

Image组件是不支持使用Texture类型的贴图的。

下面我们再来创建一个Image

然后我们先不管刚导入进来的图片类型，我们尝试把名为IU的图拖动到Image上。如下图，我们发现无法拖动一个Texture类型的贴图到Image组件上。

然后我们将Texture的贴图类型修改为Sprite。

如上图，当我们把IU的图从Texture类型修改为Sprite类型后，就可以把这个图拖动到Image组件上了。

Image上图是有了，但是怎么感觉好像被压缩的这么严重？

接下来我们点击一下Set Native Size，设置成本地原始大小来看看变化。

如下图我们可以看见，默认的Image 的宽高是100*100，当我们点一下还原默认大小的时候，图片的宽高就变成了486*200的默认大小。这样显示起来就正常了。

我们去文件夹里看看这张图的默认大小是不是486*200呢？

这就是Image组件上设置贴图默认大小的功能。

然后我们来继续看看Image组件上的其他功能。

如下图，Color可以改变图片的颜色。

点击效果如下。

Material是指可以在Image上拖入一个材质球，来修改图片的显示。

RayCast Target。指的是是否接收射线检测。举个例子。在图片的后面，再放置一个按钮，如果前面的这张图片RayCast是勾选的，那么点击图片，后面的按钮是无法响应点击事件的，但是如果去掉Raycast，尽管图片盖在上面，按钮依然可以穿过图片，接收点击事件。

举例如。我们创建一个脚本，一个按钮，将按钮放到图片下面。如下图，我把按钮设置为黑色，并且完全被图片遮挡，当我们把图片的透明度调0的时候，就可以看到后面的按钮了。

然后我为按钮增加点击事件，点击按钮的时候输出一句日志。

如下图，我们运行后，先把图片隐藏，看看按钮正常情况下的点击事件。

动图可见，按钮点击是有日志的。然后我们再把图片显示出来。并且确保RayCast是勾选的。然后再次点击按钮，日志就无法输出了。

此时我们把图片上的Raycast勾选去掉。然后再次点击按钮。

这就是Image组件上Raycast的作用，不光是Image，UGUI里好多的UI组件，都有Raycast，作用都是一致的。

Image Type：图片类型。

图片类型分成几种，有最基础的普通类型Simple，还有Slice，Tiled和Filled。

Sliced的图片类型需要图形上有border支持。否则会提示：

Sliced这种图片类型，可以完美的支持九宫格。从一定程度上解决了重复图形不同尺寸的问题。

第三种类型是Tiled，平铺。

第四种类型Filled，填充，说下这个类型。

如上图，当图片的类型修改为Filled填充的时候，组件就发生了一些变化。实际上，Image组件里，这种类型可以被用在很多地方，比如说技能CD等等。那表现究竟是什么样呢？如下图。

效果很多，包括设置原点，设置填充的方式，顺时针还是逆时针，90度还是180或者360，水平还是垂直。等等。供大家使用。

关键点，就在于不同的表现形式，核心在于Fill Amount的值。0的时候最小，1的时候最大。0-1之间过渡的同时，图形显示发生变化。

下面的Clockwise就是设置时针的选项。

好了，Image在编辑器里的使用到这就结束了。

今天的内容不是很多，就是一个Image组件，不熟悉的可以打开Unity，创建一个玩一玩。

下篇分享，将通过创建代码，来实现对Image组件的使用。