UntiyGUI系统之Image

Image用于显示显示一张图片

一、Image的基本属性

0、Material :给图片添加一个材质，然后通过着色器使图片具有一些特殊的效果

1、Sucrce Image ：指定Image控件需要显示的图片

2、Color : 指定Image的颜色

3、Preserve Aspect ：当勾选这个选项之后再对图片进行操作时，会保持图片的宽度和高度的比例不发生改变。

4、Set Native Size ：当点击这个按钮时则会恢复图片原本的大小

5、Image Type : 设置图片的显示方式，Unity给我们提供了几种方式：

1、Tiled :当图片没有Image控件区域大时，则通过重复显示图片来填满整个控件区域。

2、Sliced : 通过编辑图片，对图片进行编辑，在选定区域内的部分在对图片进行缩放时则该区域内部分会被缩放，而在区域外的绿色线框左右部分只会上下伸缩，而上下线框外的部分只会左右拉伸，四个角则无论怎样缩放都不会变化。
选择图片：

选择Sprite Editor选项进行对图片缩放区域的编辑：

当我们选择外部的边框不随图片缩放而变化时的结果为：

3、 Filled :用于显示图片的部分区域。
在选择这个选项时会出现多个选项：

Fill Method : 图片的填充方式

Horizontal : 左右填充
Vertical ：上下填充

Fill Origin :填充的起始和结束方向

Fill Amount : 填充的比例

6、Raycast Tagrt :是否会与射线进行碰撞检测，勾选则是。

三、对Image控件进行操作：

1、按下Shift按键时在对Imag进行操作时会使图片的宽和高同时缩放。

2、按下Ctrl按键时在对Image进行操作时会使当前图片的面积保持不变，宽和高缩放一定的比例。

3、按下Alt按键时在对Image进行操作时会使Image宽度或者高度的两边同时的增加或者减少。

四、Image案例，制作技能冷却时间

1、技能控件的制作

Image :底部的背景图片

Bg : 冷却完成时显示的技能图片

Bgtp ：正在冷却时显示的技能显示图片

Text : 显示冷却时间

代码实现

using UnityEngine;
using System.Collections;
using UnityEngine.UI;//使用UI控件时引入的命名空间

public class ImageCD : MonoBehaviour {
    public float cdTime = 100;//技能需要冷却时间
    public bool isState=false;  //判断当前技能是否进入冷却状态
    private float time = 0;//技能已经冷却的时间
    public Image image;
    public Text text;

    void Start()
    {
        text.enabled = false;
    }

    //设置释放技能的按键
    public KeyCode keyCode;

    void Update ()
    {
        if(Input.GetKeyDown(keyCode))
        {
            isState = true;
        }

        if(isState)
        {
            text.enabled = isState;
            //冷却的时间
            time +=Time.deltaTime;
            image.fillAmount = (cdTime - time) / cdTime;
            string s = time.ToString();
            text.text = s;
        }
        //技能冷却完成
        if(time>=cdTime)
        {
            isState = false;
            image.fillAmount = 0;
            time = 0;
            text.enabled = isState;
        }
    }
}

运行结果：