2022-04-23 Unity UGUI3——三大基础控件_unity image maskable

一、Image

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

（一）参数介绍

1. Source Image：图片来源

   图片类型必须是“精灵 Sprite”类型

2. Color：图像的颜色

3. Matreial：图像的材质

   一般不修改，会使用 UI 的默认材质

4. Raycast Target：是否作为射线检测的目标

5. Maskable：是否能被遮罩

6. Image Type：图片类型

   1. Simple：普通模式，均匀缩放整个图片

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

      • Pixels Per UnitMultiplier：每单位像素乘数
      • Fill Center：中心填充

      点击 Sprite，点击 Inspector 面板上的 Sprite Editor

   
   

   3. Tiled：平铺模式，重复平铺中央部分

   4. Filled：填充模式

      • Fill Method：填充方式
      • Fill Origin：填充原点
      • Fill Amount：填充量
      • Clockwise：顺时针方向

7. Use Sprite Mesh：使用精灵网格

   勾选的话 Unity 会帮我门生成图片网格

8. Preserve Aspect：确保图像保持其现有尺寸

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

（二）代码示例

Image img = this.GetComponent<Image>();
img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

((RectTransform)transform).sizeDelta = new Vector2(200, 200);
img.raycastTarget                    = false;

img.color = Color.red;
1
2
3
4
5
6
7

二、Text

（一）参数介绍

1. Text：文本显示内容

2. Font：字体

3. FontStyle：字体样式

   • Normal：普通
   • Bold：加粗
   • Italic：斜体
   • Bold And Italic：加粗 + 斜体

4. Font Size：字体大小

5. Line Spacing：行之间的垂直间距

6. Rich Text：是否开启富文本

   加粗：<b>文本内容</b>

   斜体：<i>文本内容</i>

   大小：<size=10>文本内容</size>

   颜色：<color=red>文本内容</color> 或 <color=#00ff00ff>文本内容</color>

7. Alignment：对齐方式

8. Align By Geometry：使用字形集合形状范围进行水平对齐，而不是字形指标

9. Horizontal Overflow：处理文本太宽无法放入矩形范围内时的处理方式

   • Wrap：包裹模式——字体始终在矩形范围内，会自动换行
   • Overflow：溢出模式——字体可以溢出矩形框

10. Vertial Overflow：处理文本太高无法放入矩形范围内时的处理方式

    • Truncate：截断模式——字体始终在矩形范围内，超出部分裁剪
    • Overflow：溢出模式——字体可以溢出矩形框

11. Best Fit：自动适应

    忽略字体大小，始终把内容完全显示在矩形框中，会自动调整大小

    • MinSize：最小字体大小
    • MaxSize：最大字体大小

12. Color：文字的颜色

13. Matreial：图像的材质

    一般不修改，会使用 UI 的默认材质

14. Raycast Target：是否作为射线检测的目标

15. Maskable：是否能被遮罩

（二）边缘和阴影效果

​ 为 Text 添加边缘线组件 outline 和 阴影组件 Shadow 设置效果

1. Effect Color：效果颜色
2. Effect Distance：生效位置
3. Use Graphic Alpha：是否启用透明通道

（三）代码示例

Text txt = this.GetComponent<Text>();
txt.text = "哈哈哈哈哈";
1
2

三、RawImage

​ RawImage 是原始图像组件，是 UGUI 中用于显示任何纹理图片的关键组件

​ 它和 Image 的区别是，一般 RawImage 用于显示大图（背景图，不需要打入图集的图片，网络下载的图等等）

（一）参数介绍

1. Texture：图像纹理

   可以是任意类型的图片，不必一定是 Sprite

2. Color：图像的颜色

3. Matreial：图像的材质

   一般不修改，会使用 UI 的默认材质

4. Raycast Target：是否作为射线检测的目标

5. Maskable：是否能被遮罩

6. UV Rect：图像在 UI 矩形内的偏移和大小

   改变它们，图像边缘将进行平铺拉伸来填充 UV 矩形周围的空间

（二）代码示例

RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");
raw.uvRect  = new Rect(0, 0, 1, 1);
1
2
3