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

一、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


    1. Tiled:平铺模式,重复平铺中央部分

    2. 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;
二、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 = "哈哈哈哈哈";
三、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);
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔗理苦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值