Skip to main content

基础控件 - Image

Image就是用来显示图片的关键组件，一般都是用Image组件来显示UI中的图片元素

Image参数：控件中的设置

Source Image：

指定图片，图片必须是Sprite类型；

  • 在导入图片到Unity中后，可以选中图片在Inspector窗口中调整TextureType为Sprite(2D and UI)

    image.png

Color：

指定颜色，允许调节R，G，B，Alpha；

image.png

Material：

指定材质，一般为默认UI Material，也可以自己创建使用；

Raycast Target：

此图像是否会被射线检测（默认勾选则会被射线检测，也就是能被玩家互动，如不想让其被互动或穿过对象则取消勾选）；

Maskable：

是否会被遮罩；

Image Type：图片类型
  • Simple：默认普通模式，如果调整RectTransform则会正常均匀拉伸这个图片；一般用来显示一些固定好的图形或文字效果等
  • Sliced：切片模式，将图片分为九宫格，仅拉伸中央十字区域；一般可以用来制作Panel，通过圆形基础形状制作一个带有倒角的Panel等；
    • 设置边框： 
      • 切片模式的九宫格（边框）需要手动设置，再此之前我们需要手动导入 一个Unity包：2D Sprite

        image.png

      • 导入成功后选中图片在Inspector窗口中选择Sprite Editor 来进行编辑
      • 在编辑面板中，通过调整Border的左右上下位置，来设置九宫格（边框），让中间部分拉伸

        image.png

      • 设置完成后按Apply应用；
    • Pixels Per UnitMultiplier ：每单位像素乘数，一般不调整，效果大致为可以让边框变得更细腻或粗糙；
    • Fill Center：中心填充（默认开启，如果关闭则九宫格被拉伸区域将不会填充）；
  • Tiled：平铺模式，重复平铺中央部分；一般可以用一张简单图形平铺成UI底图肌理；
  • Filled：填充模式
    • Fill Method：填充方法，有水平（Horizontal），垂直（Vertical），径向（Radial）填充90°/180°/360°
      • 水平（进度条）
      • 垂直（音量条等）
      • 径向（技能CD等）
    • Fill Origin：填充原点，如果水平填充就是左右，垂直就是上下，径向则根据角度不同，原点可能是上下左右或左上，左下等；
    • Fill Amount：填充量
    • ClockWise：（仅限径向填充方法）顺时针方向，如果勾选，填充量0-1就是顺时针，否则相反；
Use Sprite Mesh：

是否使用Sprite Mesh，如果使用那这个Image就会以Mesh的形式存在渲染；

Preserve Aspect：

是否保持图片现有尺寸；

Preserve Aspect：

保持宽高比；无论矩形缩放拉伸什么样，图片显示内容始终呈现原始宽高比；

Set Native Size：

设置为图片的原始大小；

 

RawImage：直接调用Texture的图形控件

一般作用于不要进入图集的图片，大的背景图等，它和Image控件的区别就是它直接调用的Texture，而不是Sprite。

 

代码相关：

引用：using UnityEngine.UI;
类名：Image

No Comments
Back to top