1 紋理（Texture）

Image 控件和 RawImage 控件都是承載渲染圖片的控件，都需要指定一個紋理（Texture）圖片。在 Assets 窗口選中一張圖片，在 Inspector 窗口的參數(shù)設(shè)置面板可以查看和編輯圖片屬性。圖片屬性中最重要的是圖片類型（Texture Type），有 Default、Normal map、Editor GUI and Legacy GUI、Sprite（2D and UI）、Coursor、Cookie、Lightmap、Single Channel 8 種類型，其中最常用的是 Default 和 Sprite 2 種類型，以下是這 2 種類型圖片的參數(shù)設(shè)置面板。

當給圖片設(shè)置精靈（Sprite）類型時，可以點擊【Sprite Editor】按鈕編輯圖片的邊框，以解決圖片邊界變形問題：圖片在橫向拉伸時，左右兩邊的邊邊界不會拉伸；圖片縱向拉伸時，上下兩邊的邊界不會拉伸；無論水平還是縱向拉伸，四個角的邊界始終不變形。

2 Image 控件

1）面板屬性

Image 控件只能添加精靈（Sprite）類型圖片， 面板屬性如下：

2）Image Type

Image Type 有 Simple、Sliced、Tiled、Filled 4 種類型，對應(yīng)面板屬性如下：

• Simple：圖片適配控件大小自由拉伸，勾選 Preserve Aspect 保持圖片寬高比不變，Set Native Size 設(shè)置控件寬高為圖片原始寬高；
• Sliced：圖片適配控件大小自由拉伸，需要設(shè)置邊界，4 個角的邊界始終不變形，取消 Fill Center 只繪制邊界；
• Tiled：當控件比較大、圖片比較小時，圖片從下往上、從左往右重復(fù)平鋪，鋪滿整個控件空間；
• Filled：只顯示圖片的一部分，可以用于技能 CD，Set Native Size 設(shè)置控件寬高為圖片原始寬高。

重復(fù)平鋪：

繪制部分：

3）遮掩（Mask）

可以給 Image 控件添加 Mask 組件，以控制子控件的顯示區(qū)域，如：創(chuàng)建一個 Image 控件，改名為 MaskImage，將 Source Image 設(shè)置為一個圓形的圖片（已修改為 Sprite 類型），并為其添加 Mask 組件；在 MaskImage 下創(chuàng)建 Image 子控件，將 Source Image 設(shè)置為一個正方形的 Sprite 圖片?？丶蛹?、Mask 組件、原圖如下：

顯示效果如下：

注意： MaskImage 中的圓形圖片，必須是 png 格式的，并且圓形外面無像素（不是白色或黑色）。

3 RawImage 控件

RayImage 對圖片類型沒有要求，但是沒有 Image Type 屬性，面板屬性如下：

4 應(yīng)用

本節(jié)將通過技能 CD 的案例，展示 Image 控件的應(yīng)用。

1）創(chuàng)建 UI

創(chuàng)建 3 個 Image 控件，分別重命名為 Circle、Skill、White，并給 Circle 添加 Mask 組件，再創(chuàng)建一個 Text 控件，這些控件的寬高都是 300，控件層級結(jié)構(gòu)如下：

Circle、Skill、White 對應(yīng)的圖片如下：

將 White 控件的 Image Type 設(shè)置為 Filled，F(xiàn)ill Origin 設(shè)置為 Top，取消 Clockwise 選項，如下：

2）腳本組件

SkillCD.cs

using UnityEngine;
using UnityEngine.UI;

public class SkillCD : MonoBehaviour {
    private Image skillWhiteImage;
    private Text skillWaitText;
    private bool hasReleaseSkill = false;
    private float skillInterval = 2; // 技能冷卻時間
    private float skillWaitTime = 0; // 釋放技能后等待時間

    private void Start () {
        skillWhiteImage = transform.Find("White").GetComponent<Image>();
        skillWaitText = transform.Find("Text").GetComponent<Text>();
        skillWhiteImage.fillAmount = 0;
    }

    private void Update () {
        skillWaitTime += Time.deltaTime;
        if (!hasReleaseSkill && Input.GetMouseButtonDown(0)) {
            releaseSkill();
        }
        waitSkill();
    }

    private void releaseSkill() { // 釋放技能
        skillWhiteImage.fillAmount = 1;
        skillWaitText.text = skillInterval.ToString("0.0");
        hasReleaseSkill = true;
        skillWaitTime = 0;
    }

    private void waitSkill() { // 等待技能點亮
        if (hasReleaseSkill) {
            float resTime = skillInterval - skillWaitTime;
            skillWhiteImage.fillAmount = resTime / skillInterval;
            skillWaitText.text = resTime.ToString("0.0");
            if (skillWaitTime > skillInterval) {
                hasReleaseSkill = false;
                skillWaitText.text = "";
            }
        }
    }
}

3）運行效果

聲明：本文轉(zhuǎn)自【Unity3D】UGUI之Image和RawImage