24.总结

8.UGUI基础-三大基础控件-Image图片控件

---

8.1 知识点

Image图片控件是什么

• Image是图像组件，是UGUI中用于显示精灵图片的关键组件。
• 除了背景图等大图，一般都使用Image来显示UI中的图片元素。

Image图片组件参数

Source Image 源图形：图片来源（图片类型必须是”精灵“类型）

Color 颜色：图像的颜色，在原图的基础上叠加

Material 材质：图像的材质（一般不修改，会使用UI的默认材质）

Raycast Target 射线目标：是否作为射线检测的目标（如果不勾选将不会响应射线检测，可以穿透当前控件点击到后面的控件）

Maskable：是否能被遮罩（之后结合遮罩相关知识点进行讲解）

Image Type 图片类型

Simple-普通模式：均匀缩放整个图片

Sliced-切片模式：9宫格拉伸，只拉伸中央十字区域

• 要打开精灵编辑开启设置九宫格
  
• Pixels Per UnitMultiplier：每单位像素乘数，一般不修改
• Fill Center：中心填充，不勾选图片会中间空心

Tiled-平铺模式：重复平铺中央部分

Filled-填充模式：

• 可以用于做血条、cd进度条等
  • Fill Method：填充方式
  • Fill Origin：填充原点
  • Fill Amount：填充量
  • Clockwise：顺时针方向

Use Sprite Mesh 使用精灵网格：勾选的话Unity会帮我们生成图片网格

Preserve Aspect 保持长宽比：确保图像保持其现有尺寸

Set Native Size 设置原生大小：设置为图片资源的原始大小

Image图片代码控制

GetComponent<Image>() 获取当前脚本所附加的 GameObject 上的 Image 组件

// 获取当前脚本所附加的 GameObject 上的 Image 组件
Image image = this.GetComponent<Image>();

Image.sprite变量 设置为 Image 的显示图像

// 从资源文件夹中加载名为 "ui_TY_fanhui_01" 的 Sprite，并将其设置为 Image 的显示图像
image.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

(transform as RectTransform).sizeDelta 设置为 Image 的宽高

// 将当前 GameObject 的 Transform 转换为 RectTransform，然后修改其尺寸为宽度 200、高度 200 的 Vector2
(transform as RectTransform).sizeDelta = new Vector2(200, 200);

Image.raycastTarget 是否进行射线检测

// 禁用该 Image 组件的射线检测，使其不响应用户的点击事件
image.raycastTarget = false;

Image.color Image的颜色

// 将该 Image 组件的颜色设置为红色
image.color = Color.red;

---

8.2 知识点代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Lesson08_UGUI基础_三大基础控件_Image图片控件 : MonoBehaviour
{
    void Start()
    {
        #region 知识点一 Image是什么？
        //Image是图像组件
        //是UGUI中用于显示精灵图片的关键组件
        //除了背景图等大图，一般都使用Image来显示UI中的图片元素
        #endregion

        #region 知识点二 Image参数相关

        #endregion

        #region 知识点三 代码控制Image

        // 获取当前脚本所附加的 GameObject 上的 Image 组件
        Image image = this.GetComponent<Image>();

        // 从资源文件夹中加载名为 "ui_TY_fanhui_01" 的 Sprite，并将其设置为 Image 的显示图像
        image.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

        // 将当前 GameObject 的 Transform 转换为 RectTransform，然后修改其尺寸为宽度 200、高度 200 的 Vector2
        (transform as RectTransform).sizeDelta = new Vector2(200, 200);

        // 禁用该 Image 组件的射线检测，使其不响应用户的点击事件
        image.raycastTarget = false;

        // 将该 Image 组件的颜色设置为红色
        image.color = Color.red;

        #endregion
    }
}

---

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com