文章目录
一、Image
Image 是图像组件，是 UGUI 中用于显示精灵图片的关键组件
除了背景图等大图，一般都使用 Image 来显示 UI 中的图片元素
（一）参数介绍
-
Source Image：图片来源
图片类型必须是“精灵 Sprite”类型
-
Color：图像的颜色
-
Matreial：图像的材质
一般不修改，会使用 UI 的默认材质
-
Raycast Target：是否作为射线检测的目标
-
Maskable：是否能被遮罩
-
Image Type：图片类型
-
Simple：普通模式，均匀缩放整个图片
-
Sliced：切片模式，9 宫格拉伸，只拉伸中央十字区域
- Pixels Per UnitMultiplier：每单位像素乘数
- Fill Center：中心填充
点击 Sprite，点击 Inspector 面板上的 Sprite Editor
-
- Tiled：平铺模式，重复平铺中央部分
- Filled：填充模式
- Fill Method：填充方式
- Fill Origin：填充原点
- Fill Amount：填充量
- Clockwise：顺时针方向
-
Use Sprite Mesh：使用精灵网格
勾选的话 Unity 会帮我门生成图片网格
-
Preserve Aspect：确保图像保持其现有尺寸
-
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;
二、Text
（一）参数介绍
-
Text：文本显示内容
-
Font：字体
-
FontStyle：字体样式
- Normal：普通
- Bold：加粗
- Italic：斜体
- Bold And Italic：加粗 + 斜体
-
Font Size：字体大小
-
Line Spacing：行之间的垂直间距
-
Rich Text：是否开启富文本
加粗：
<b>文本内容</b>斜体：
<i>文本内容</i>大小：
<size=10>文本内容</size>颜色：
<color=red>文本内容</color>或<color=#00ff00ff>文本内容</color> -
Alignment：对齐方式
-
Align By Geometry：使用字形集合形状范围进行水平对齐，而不是字形指标
-
Horizontal Overflow：处理文本太宽无法放入矩形范围内时的处理方式
- Wrap：包裹模式——字体始终在矩形范围内，会自动换行
- Overflow：溢出模式——字体可以溢出矩形框
-
Vertial Overflow：处理文本太高无法放入矩形范围内时的处理方式
- Truncate：截断模式——字体始终在矩形范围内，超出部分裁剪
- Overflow：溢出模式——字体可以溢出矩形框
-
Best Fit：自动适应
忽略字体大小，始终把内容完全显示在矩形框中，会自动调整大小
- MinSize：最小字体大小
- MaxSize：最大字体大小
-
Color：文字的颜色
-
Matreial：图像的材质
一般不修改，会使用 UI 的默认材质
-
Raycast Target：是否作为射线检测的目标
-
Maskable：是否能被遮罩
（二）边缘和阴影效果
为 Text 添加边缘线组件 outline 和 阴影组件 Shadow 设置效果
- Effect Color：效果颜色
- Effect Distance：生效位置
- Use Graphic Alpha：是否启用透明通道
（三）代码示例
Text txt = this.GetComponent<Text>();
txt.text = "哈哈哈哈哈";
三、RawImage
RawImage 是原始图像组件，是 UGUI 中用于显示任何纹理图片的关键组件
它和 Image 的区别是，一般 RawImage 用于显示大图（背景图，不需要打入图集的图片，网络下载的图等等）
<img src="https://img-blog.csdnimg.cn/img_convert/154f33125e1ffe054a45f9bde8d4f629.png)
（一）参数介绍
-
Texture：图像纹理
可以是任意类型的图片，不必一定是 Sprite
-
Color：图像的颜色
-
Matreial：图像的材质
一般不修改，会使用 UI 的默认材质
-
Raycast Target：是否作为射线检测的目标
-
Maskable：是否能被遮罩
-
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);
