UGUI内核大探究(九)Image与RawImage

Image组件是UGUI里最常用的组件(可能没有之一),我们知道其实还有一个RawImage组件。那么二者的区别是什么呢?之前的文章UGUI内核大探究(八)MaskableGraphic中我们提到过,二者(连同Text)都继承自MaskableGraphic。但是同为图片组件,Image的代码有接近一千行之多,而RawImage却只有120行。

RawImage顾名思义,未加工的生肉图片,RawImage只为我们提供了修改UV的方法,除此之外都是继承自MaskableGraphic的方法。是一个清纯不做作的组件。

而Image提供了四种ImageType:Simple(普通)、Sliced(切割)、Tiled(平铺)、Filled(填充),而且它还是布局元素(ILayoutElement),可以被各种布局组(ILayoutGroup)所包含,将它和其他布局元素进行布局。

所以假如我们要在UI上添加图片的时候,不妨考虑一下你到底需要的是轻量级的RawImage还是功能丰富的Image。

按照惯例,附上UGUI源码下载地址

那么既然RawImage代码只有120行,那本文就先介绍RawImage。

最重要的一个方法:

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            Texture tex = mainTexture;
            vh.Clear();
            if (tex != null)
            {
                var r = GetPixelAdjustedRect();
                var v = new Vector4(r.x, r.y, r.x + r.width, r.y + r.height);

                {
                    var color32 = color;
                    vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(m_UVRect.xMin, m_UVRect.yMin));
                    vh.AddVert(new Vector3(v.x, v.w), color32, new Vector2(m_UVRect.xMin, m_UVRect.yMax));
       
<think>根据用户问题,需要解决如何在Unity UGUI中对RawImage进行宫格切割。但根据引用内容,RawImage并没有直接提供宫格切割的功能。引用[1]中提到了Image组件的宫格切割,而引用[2]中展示的是RawImage的UV动画。因此,需要明确:RawImage本身不支持宫格切割,因为宫格切割通常用于Sprite(精灵),而RawImage使用的是Texture(纹理)。 但是,用户的需求是在RawImage上实现类似宫格的效果。我们可以通过以下思路解决: 1. 使用Image组件代替,因为Image支持宫格切割(Sliced类型)。 2. 如果必须使用RawImage(例如需要动态改变纹理),则可能需要自定义Shader或通过其他方式模拟宫格效果。 由于引用中没有提到RawImage宫格切割,因此需要根据UGUI的知识来回答。 步骤: 1. 解释RawImageImage宫格支持上的区别。 2. 如果用户必须使用RawImage,提供替代方案(例如自定义Shader或脚本模拟)。 注意:引用[1]中详细说明了Image宫格切割,而引用[2]中的RawImage示例是用于UV动画的。 因此,回答应分为两部分: - 直接方法:使用Image组件(推荐) - 间接方法:在RawImage上模拟宫格(较复杂) 同时,根据指令,需要生成相关问题。 回答结构: 1. 问题分析:指出RawImage不支持宫格切割,但Image支持。 2. 解决方案1:使用Image组件并设置宫格。 3. 解决方案2:自定义方法(简要说明)。 4. 生成相关问题。 引用标识:在引用参考内容的地方添加[^1]或[^2]。</think>### Unity UGUI RawImage 宫格切割方法 在Unity UGUI中,**RawImage组件原生不支持宫格切割(Sliced)功能**,这Image组件有本质区别。根据引用内容: - Image组件可通过`ImageType > Sliced`实现宫格[^1] - RawImage主要用于显示动态纹理(如RenderTexture)或UV动画[^2],其属性面板无宫格选项 以下是两种实现方案: --- ### 方案1:改用Image组件(推荐) 若需宫格效果,建议直接使用**Image组件**: 1. **准备精灵图** - 导入图片 → 在Inspector窗口设置`Texture Type = Sprite (2D and UI)` - 点击`Sprite Editor` → 设置绿色宫格边界线(定义拉伸区域) ```csharp // 示例:代码设置宫格 Image img = GetComponent<Image>(); img.type = Image.Type.Sliced; // 关键设置 ``` 2. **组件属性配置** - `Source Image`:拖入切割后的精灵 - `Image Type`:选择 **Sliced** - `Color`:调整透明度/颜色 - `Raycast Target`:按需启用点击事件 > 此方案性能最优,直接利用UGUI内置功能[^1] --- ### 方案2:RawImage自定义实现(复杂) 若必须使用RawImage,需通过Shader模拟: 1. **创建宫格Shader** 编写片段着色器,根据UV坐标分区采样: ```glsl fixed4 frag (v2f i) : SV_Target { // 计算宫格区域(需预定义border尺寸) float2 border = float2(0.3, 0.3); // 边界比例 float2 uv = i.uv; // 中心区域拉伸 if(uv.x > border.x && uv.x < 1-border.x && uv.y > border.y && uv.y < 1-border.y) { uv = float2( (uv.x - border.x)/(1-2*border.x), (uv.y - border.y)/(1-2*border.y) ); } return tex2D(_MainTex, uv); } ``` 2. **应用到RawImage** - 将Shader赋给材质 → 拖入RawImage的`Material`属性 - 动态纹理通过`rawImage.texture`赋值 > 注意:此方案需手动处理边缘拉伸逻辑,且性能低于Image原生方案 --- ### 总结建议 | 组件 | 宫格支持 | 适用场景 | |-----------|------------|-------------------------| | Image | ✅ 原生 | 静态UI、按钮、面板 | | RawImage | ❌ 需自定义 | 视频流、动态渲染纹理 | **优先选择Image组件**实现宫格效果,这是UGUI的标准工作流[^1]。若项目强依赖RawImage(如实时视频显示),再考虑Shader方案。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值