一、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 用于显示大图（背景图，不需要打入图集的图片，网络下载的图等等）
（一）参数介绍
-
Texture：图像纹理
可以是任意类型的图片，不必一定是 Sprite
-
Color：图像的颜色
-
Matreial：图像的材质
一般不修改，会使用 UI 的默认材质
-
Raycast Target：是否作为射线检测的目标
-
Maskable：是否能被遮罩
-
UV Rect：图像在 UI 矩形内的偏移和大小文章来源：https://www.toymoban.com/news/detail-489603.html
改变它们，图像边缘将进行平铺拉伸来填充 UV 矩形周围的空间文章来源地址https://www.toymoban.com/news/detail-489603.html
（二）代码示例
RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");
raw.uvRect = new Rect(0, 0, 1, 1);
到了这里，关于Unity UGUI3——三大基础控件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
