Unity UGUI3——三大基础控件

news/2024/10/30 17:29:40/

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

http://www.ppmy.cn/news/452130.html

相关文章

帝国cms城市分站系统开发:首页友情链接和分站友情链接分开调用

第一步&#xff1a;phome_enewslink 增加myarea字段 字段类型&#xff1a;int&#xff0c;长度6&#xff0c;非null字段&#xff0c;默认值0 或者在帝国cms后台执行 sql语句&#xff1a; alter table [!db.pre!]enewslink add myarea int(6) not null; 第二步&#xff1a;修…

Stable-Diffusion环境搭建

硬件可以采用DELL R7525 搭配L4 或者T4 等等企业级显卡 环境如下&#xff1a; 可以看到有相应的GPU卡信息 esxi 7.u3 信息 设置GPU穿透方式 查看相应的虚拟机参数信息 PCI 设备加载穿透GPU信息 启动uefi 设置相应的参数信息 https://docs.nvidia.com/grid/latest/grid-vgpu-re…

Mac环境下设置打印机驱动程序

转载请注明出处&#xff1a;http://blog.csdn.net/dongdong9223/article/details/126406070 本文出自【我是干勾鱼的博客】 注意第4步&#xff0c;点击“使用”右侧的按钮后要选择“选择软件”&#xff0c;然后在里面找到对应的驱动版本&#xff0c;选择后点击“好”&#xff0…

计算机管理删除打印机驱动,彻底删除打印机驱动的方法

《彻底删除打印机驱动的方法》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《彻底删除打印机驱动的方法(1页珍藏版)》请在人人文库网上搜索。 1、彻底删除打印机驱动的方法删除打印机: 1.打开所有打印机列表,开始设置打印机 2.删除所需要的打印机 3.打印机列表空白处…

芯烨打印机android驱动,80mm芯烨打印机所有驱动

芯烨80打印机驱动是芯烨80mm热敏打印机的官方通用驱动&#xff0c;适用于所有型号的芯烨80mm打印机&#xff0c;包括XP-H160N、XP-T160H、XP-H230M、XP-N160II等&#xff0c;支持32位和64位的WindowsXP/7/8/8.1/10操作系统。 芯烨80打印机驱动支持的打印机型号 XP-H160N XP-T16…

linux手动连接网络打印机驱动_怎么在Linux上安装打印机驱动

怎么在Linux上安装打印机驱动(以Ubuntu为例) 通常来说,你不需要手动在Linux上安装硬件驱动。系统会自动检测计算机硬件,然后自动为你安装驱动。但是,对于打印机,情况就不一样了。事实上,Linux是通过CUPS(Common Unix Printing System)处理打印服务。Apple是CUPS的主要开发…

vue基础--计算商品的总价格

计算商品的总价格&#xff1a; 1、在 父组件中 通过计算属性 动态把总价格计算出来&#xff0c; 2、通过 父向子传值&#xff0c;通过自定义属性&#xff0c;把值传给 子组件 父组件&#xff1a; 1、使用计算属性computed 计算总价格&#xff1a; 1.1、先用filter 过滤出 数…

dockerfile配置neo4j图形数据库连接和查询

简易版本dockerfile编写 # 请注意&#xff0c;跨docker访问的时候尽量还是配置一下neo4j的配置文件 FROM neo4jEXPOSE 7474 EXPOSE 7687加载数据 此处由于导入csv到dockerfile有点复杂&#xff0c;还是直接手动添加数据&#xff0c;下面算是自己实际的一个例子&#xff0c;可惜…