【Unity3D_UGUI速成班】——02. Image

这一节将主要讲述Image的各项用法。Image控件专门呈现UI层级上的图片显示，通常可作为界面的配图、渐进显示的提示框和进度条、血条等。

--------------------------

2. Image

在Hierarchy下右键==>UI，拓展菜单有13个栏目，点选最Image。那么在Hierarchy栏目下会多出携带了Image的Canvas控件和EventSystem控件。

此时选中Image控件，在Inspector下查看，项目非常少，这是因为还没有附上图片的缘故。所以现在要附上图片了。Image的图片来源必须是Sprite（精灵）图片，这种纹理格式与PNG图片是契合度最高的，能够呈现图片中的透明部分。所以请大家先选中已导入到Assets中的图片，在Inspector下将图片的纹理类型转换成Sprite，之后点击下方的apply。之后再将其拖入到Image组件的“Source Image”下。

Image组件下除了Source Image外，还有Color、Image Type等属性：

（1） Color可以抽象理解为对图片投射灯光的颜色，点开之后可以任意更改。Image组件会将Color的颜色与图片原先的颜色混合之后再呈现。笔者的图片源是用PS制作的一个黑白相间的圆环，下面呈现出在白光（默认）、蓝光、红光下的变化，由于黑色不受影响，所以三幅图中圆环黑色的部分一直不变；

     

（2） Preserve Aspect决定图片是否采用原先的纵横比。由于Image控件的宽高可以自由设置，所以很可能与图片源的原始宽高比并不相同；Preserve Aspect是保证不论Image如何变化，其呈现的图片宽高比都和原先相同。

（3） ImageType是呈现图片的类型，共有Simple、Sliced、Tilled和Filled四种选项。

① Tilled选中后，会强制将原图片以初始大小在Image控件的范围内平铺。先前的小圆环在Tilled模式下，令笔者不得不拓展Image的尺寸才能令大家看清效果。

② Filled模式可以理解为“渐进展开”，选中后会弹出一系列新选单。

Filled Method是图片渐近展开的方式，可选的有垂直方向展开、水平方向展开、90°螺旋展开、180°螺旋展开和360°螺旋展开。

Filled Origin则是图片展开的起点，螺旋展开式的起点为图片的上下左右边界，垂直展开的起点是图片的顶部或者底部，水平展开的起点是左或者右。

Filled Amount是图片展开的部分占图片总面积的百分比，大家可以尝试自主拖动来观察变化。

Clockwise是螺旋式展开特有的属性，方向：顺施针（勾选）或者逆时针（反勾选）。

下方gif从左到右依次呈现了水平方向以左为起点、竖直方向以下方为起点、螺旋360°顺时针方向以左为起点从零展开的变化。因此用UGUI Image来制作UI层面的进度条和血条都是非常理想的。

③ Sliced模式，可以理解为“保持边缘”，为了说明这个模式，我们将图片源换成黑白方框，然后将Image Type调味Sliced模式，会发现下方有一行提示：

翻译过来是：这幅图并未创立边界。

这时候我们需要在ASsets里点中图片源，在Inspector下点击Sprite Editor。

打开后，可以看见图片的边缘出现了绿色的、可拖动的细线。将这些细线往图片中部移动，那么4条细线会将图片分割为9个区域。处于外围的12346789号区域就是上图所说的border边界。在Sliced模式下，图片的Border的粗细不受图片缩放的影响。即将图片横向拉伸时，1、3、4、6、7、9区域的尺寸不变，而2、8号区域将会横向拉伸、纵向不变。这对存在边框的图片有莫大的作用。好吧，其实这模式用度并不高-.-||。

终于又到了激动人心的代码环节，老司机开车了！

 

using UnityEngine;
using System.Collections;
using UnityEngine.UI;//凡是对UGUI进行编辑的脚本都需要使用这个命名空间。
public class teachImage : MonoBehaviour {
    //Image是UI命名空间下的类，public后拖进一个已经建好的Image控件即可使用。
    public Image m_image;

    //定义一个计时器
    float timeCounter = 0;
    //设定一个时间总长，此处为3秒
    public float timeAmount = 3;

    // Use this for initialization
    void Start () {
        //设定图片为filled模式，填充方式为螺旋式，从0开始。
        m_image.type = Image.Type.Filled;
        m_image.fillMethod = Image.FillMethod.Radial360;
        m_image.fillAmount = 0;
    }
    
    // Update is called once per frame
    void Update () {
        //进度条会在5秒内逐渐填满
        if (timeCounter < timeAmount)
        {
            //计时器会不断累加当前这一帧的时间
            timeCounter += Time.deltaTime;
            //image图片会按照前时间/总时间的比例展开
            m_image.fillAmount = timeCounter / timeAmount;
        }
        //当时间超过了总时间，清空画面，变换图片的展开方式为水平从左向右再次展开
        else
        {
            m_image.fillMethod = Image.FillMethod.Horizontal;
            // fillOrigin的枚举中： 0为左边、1为右边，具体请按 F12 查看。
            m_image.fillOrigin = 0;
            timeCounter = 0;
        }
    }
}

 

 

运行结果如下：

 

代码中的要点在于：

 

①  Image对象的fillAmount、fillMethod、fillOrigin甚至ClockWise都是可以用代码改变的，这给予了图片显示的多样性。

②  结合Time类下的deltaTime，可以制作出结合了时间的进度条。