UGUI的Image与RawImage组件

UGUI系统中提供了2种显示图片的组件即Image与RawImage。本篇文章主要是介绍这2个组件含义与使用。
1.Image

(1)SourceImage:指定要显示的目标图片资源。需要注意的是,它只支持Sprite类型的图片,因此需要将目标图片资源的格式改成如下图所示的格式:

(2)Color:设置Color属性值,会改变图片显示的色调。类似给图片开了某种颜色的“灯”照射该图片。(网上找的图,侵删)

(3)Material:设定用于渲染图片的材质。
(4)RaycastTarget:决定是否接收射线碰撞检测。换句话说,就是是否能够成为事件监听目标。
(5)Image Type:用于设定图片的显示类型,如Simple/Sliced/Tiled/Filled。不同的显示类型会导致Sprite“填充”Image组件的方式不同。
a.Simple,此模式下如果Image控件大小与Sprite的不相同时,Sprite将会被拉伸到与Image控件一般大。如下图所示:

值得注意的是,如果勾选上PreserveAspect选项时,Sprite将会根据Sprite原宽高比例进行拉伸。如下图所示:

b.Sliced俗称九宫格,需要做成九宫格的图片一般都是当做背景用的(如很多游戏中都有黑色的背景)。经过九宫格处理的Sprite,在缩放过程中,会保持4个角的切片不做缩放,4个边的切片只完成拉伸,只有中间的切片做缩放操作。Fill Center选项,如果取消勾选,Image不能完整显示,只会显示切片的边缘图片。

九宫格操作参考我的另一片文章http://www.cnblogs.com/wang-jin-fu/p/8277774.html

c.Tiled俗称“地面砖平铺”,此种情况下,Sprite本身大小会保持不变,Sprite会像铺地面砖那样填充满整个Image控件。

d.Filled俗称“呈现方式”,一般设置此模式的Image,都是用做有“CD”效果的技能按钮等,让Image以一定地展现方式一部分一部分地完全展示出来。

属性
作用
Fill Method
指定填充呈现方式,选项有Horizontal[水平方向]、Vertical[竖直方向]、Radial90[1/4圆呈现]、Radial180[半圆呈现]、Radial360[整圆显现]
Fill Origin
指定填充显现操作的起点。
Fill Amount
指定了填充的进度。
Clock Wise
针对Radial90/180/190类型的填充显示方式,取消与勾选该项,会“翻转”填充显示“方向”
Preserve Aspect
根据Sprite宽高比,缩放Image

举例:设定Fill Method为Radial360,当改变FillAmount值,从0到1时,效果如下所示

(6) SetNative Size:按下此按钮后,会发现Image控件的大小会变成与Sprite图片本身大小一致。

2.RawImage
RawImage功能上与Image组件类似,但属性并不完全相同。

属性 作用
Textture 指定要显示的图片,注意:图片类型可以是任何类型
Color 设置图片的主颜色
Material 设定Image控件的渲染材质
Raycast Target 决定是否可接收射线碰撞事件检测(取消勾选不会挡住下层UI事件)
UV Rect 可以让图片的一部分显示在RawImage组件中,x、y属性用于控制UV左右、上下偏移,W、H用于控制UV的重复次数。

原文地址:https://www.cnblogs.com/wang-jin-fu/p/8277828.html

时间: 2024-08-08 06:58:22

UGUI的Image与RawImage组件的相关文章

【Unity笔记】UGUI的Image、RawImage控件

Image控件只能使用Sprite图片,RawImage通常使用Texture类型图片.项目设为2D模式后导入的图片Texture Type会自动转为Sprite. 没有选择源图片时,可以只选择颜色. 关于Image Type: Simple:图片根据控件宽高自动拉伸,宽高比可变. Sliced:九宫图.需要给原图编辑九宫图的切割线后才能用. Tiled:瓦片.图片按原宽高布局,根据控件的大小,能以重复瓦片的形式填满控件,或者只显示原图的一部分. Filled:填充.可以选择填充方式(水平/垂直

UGUI学习笔记之Canvas组件

此次记录数据为Unity4.6 B21版本.新版的UGUI已经有很好的效果,开发效率也大大的提高.跟NGUI操作类似,制作3D UI也非常方便. 一.Canvas->Render Mode提供了三种渲染模式. 1.Screen Space-Overlay模式不支持分辨率自适应,在Rect Transform调整的Rotation参数无法对其造成影响. 2.Screen Spcae-Camera 采用相机渲染,这种模式需要设置一个UI相机来专门对UI渲染,类似NGUI的Camera,且支持分辨率自

【Unity笔记】UGUI物体的Rect Transform组件(Pivot中心点,Anchor锚点)

Pivot:自身中心点,图标是小蓝点.表示图片以哪个点来计算坐标值.默认在UI元素的几何中心点(0.5, 0,5). Anchor:锚点,图标是四个小三角形.表示该UI元素以父物体的哪个位置作为缩放参考,锚点不能选在父容器外面.父物体缩放时,影响到子物体的缩放,锚点4个点分开时,图片四个顶点距离锚点的距离,在伸缩时保持不变,控制锚点位置来控制缩放方式. PosX,PosY:自身中心点以锚点为原点的坐标值(依据锚点来设置位置的),必须锚点4个小三角合并在一个点上才出现该属性. Left,Right

关于Unity中RawImage和Button

1.贴图的Texture Type属性值 Texture:会把贴图的大小转换为最相近的2的n次方,比如400X1369会转换为512X1024. Sprite 2D:是贴图的原始大小. 2.创建一个RawImage类型的UI节点,贴图属性是Texture,与Image是不一样的,Image是Sprite2D类型的. RawImage比Image多一个Raw Image组件,里面的UV rect属性是比较特殊的. UV rect的x,y的意思就是从贴图的哪个地方开始显示在Canvas中的.以左下角

UGUI之Canvas和EventSystem

先介绍一下UGUI必不可缺的两个组件:Canvas和EventSystem 事实上在场景中第一次创建UGUI控件的时候,这两个物体都会自动添加到场景中,当然,必不可缺的不是这两个物体,而是他们身上挂载的组件. 一.Canvas作为所有UGUI控件的父级,他管理着下属所有控件的布局. Canvas组件: Render Mode(渲染模式):这里一般选择Screen Space - Camera,类似于NGUI的方式用特定的UI摄像机渲染UI,这种渲染模式个人觉得是最佳的,他完全将场景物体和UI进行

基于Shader实现的UGUI描边解决方案

基于Shader实现的UGUI描边解决方案 前言 大扎好,我系狗猥.当大家都以为我鸽了的时候,我又出现了,这也是一种鸽.创业两年失败后归来,今天想给大家分享一个我最近研究出来的好康的,比游戏还刺激,还可以教你登dua郎喔(大误 这次给大家带来的是基于Shader实现的UGUI描边,也支持对Text组件使用. 首先请大家看看最终效果(上面放了一个Image和一个Text): (8102年了怎么还在舰 接下来,我会向大家介绍思路和具体实现过程.如果你想直接代到项目里使用,请自行跳转到本文最后,那里有

(九)Mask详解

1.前言 本文从逻辑和原理上详细分析Ugui的Mask组件.Mask组件的逻辑没有RectMask2D复杂,但是原理稍微麻烦一点,用得到渲染的模板检测. 2.模板遮罩原理 2.1 模板值 以下图为例,假如均没有开启模板检测,canvas上只有一个RawImage组件,那么整个背景模板值为0.如果图中RawImage开启模板检测,并设置模板检测值为2(模板检测参考值是自定义的).那么图片区域模板值为2,以外红色区域为0(模板值是以像素为单位进行设置的),如果开启根据透明通道值设置(Use Alph

【Unity3D】调用手机相机

public class UITest : MonoBehaviour { public string deviceName; public WebCamTexture webCam; // 图片组件 public RawImage rawImage; void Start() { StartCoroutine(Call()); } public IEnumerator Call() { // 请求权限 yield return Application.RequestUserAuthorizat

UnityEngine.UI类库UML图

今天看了下UGUI的源码,然后简单画了下他的UML图,以后若是碰到问题可以从UML图里找或者需要实现什么功能可以先到类库查看一下UGUI本身带有了那些组件给我们.