RawImage

这张图展示的是 Unity UGUI 中的 Raw Image（原始图像）组件。它与 Image 最大的区别是：Raw Image 直接显示 Texture，特别适合小地图、摄像机画面、视频和网络图片。

一、截图当前状态

从截图可以读出：

• 对象名称：RawImage
• Layer：UI
• 锚点位于父对象中心
• Position：0, 0, 0
• 尺寸：512 × 256，宽高比为 2:1
• Texture：None，目前没有指定纹理
• Color：白色，不改变纹理原色
• Raycast Target：关闭，不会阻挡后方按钮
• Maskable：开启，可以接受父级遮罩
• UV Rect：X=0、Y=0、W=1、H=1，表示显示完整纹理

二、Rect Transform

Rect Transform 决定 Raw Image 在 Canvas 中的位置和大小。

• Position X/Y/Z：相对于锚点的位置。
• Width/Height：控件显示区域的宽度和高度。
• Anchor Min/Max：对象跟随父级的参考位置。截图中都是 0.5，表示固定在父级中心。
• Pivot：对象自身的旋转、缩放和尺寸变化中心。0.5, 0.5 表示正中心。
• Rotation：UI 的旋转角度。
• Scale：额外缩放比例，通常保持 1,1,1。

如果纹理不是 2:1，放进当前 512 × 256 的矩形后可能被拉伸。可调整宽高，或者添加 Aspect Ratio Fitter 保持原始比例。

三、Canvas Renderer

这是负责把 UI 顶点、材质和纹理提交给 Canvas 的底层渲染组件，通常不需要手动操作。

Cull Transparent Mesh 表示：当 UI 所有顶点的 Alpha 接近零时，可以忽略这块几何体，减少完全透明对象的无效绘制，通常保持勾选即可。Unity CanvasRenderer API

四、Raw Image 字段

字段	用法
Texture	指定要显示的纹理，可接受 Texture2D、RenderTexture、WebCamTexture 等
Color	与纹理颜色相乘；白色保留原色，Alpha 控制透明度
Material	指定自定义 UI 材质，用于灰度、圆角、模糊等效果
Raycast Target	是否参与鼠标或触摸的 UI 点击检测
Raycast Padding	调整 Raw Image 四周的点击判定区域
Maskable	是否允许被父级 Mask 或 Rect Mask 2D 裁剪
UV Rect	控制显示纹理的哪个区域

截图底部的 Default UI Material 是 Unity 默认 UI 材质，使用 UI/Default Shader。一般不要直接修改它；需要特殊效果时，应新建一个 Material，再赋给上方的 Material 字段。

五、UV Rect 详解

UV 坐标的原点位于纹理左下角：

• X/Y：从纹理什么位置开始取样。
• W/H：取样区域的宽度和高度。
• 修改 UV 不会改变 Rect Transform 的大小。

常用配置：

X=0,    Y=0,    W=1,   H=1    显示整张纹理
X=0,    Y=0,    W=0.5, H=1    显示左半边
X=0.5,  Y=0,    W=0.5, H=1    显示右半边
X=0.25, Y=0.25, W=0.5, H=0.5  显示中心区域

当纹理的 Wrap Mode 设置为 Repeat 时，让 W/H 大于 1 可以平铺纹理；持续改变 X/Y 可以制作流动背景。Unity Raw Image 手册

六、典型使用流程

• 小地图：Camera → RenderTexture → Raw Image
• 角色模型预览：预览相机 → RenderTexture → Raw Image
• 视频：VideoPlayer → RenderTexture → Raw Image
• 摄像头：WebCamTexture → Raw Image
• 网络图片：下载得到 Texture2D → Raw Image

运行时赋值示例：

using UnityEngine;
using UnityEngine.UI;

public class RawImageDemo : MonoBehaviour
{
    [SerializeField] private RawImage preview;
    [SerializeField] private Texture picture;

    private void Start()
    {
        preview.texture = picture;
        preview.uvRect = new Rect(0, 0, 1, 1);
        preview.raycastTarget = false;
    }
}

preview.SetNativeSize() 可以把 Rect Transform 调整为纹理原始像素尺寸，但高分辨率图片可能因此变得非常大。

七、Raw Image 与 Image

• 普通按钮、图标、面板、九宫格背景、血条：优先使用 Image。
• 视频、摄像机输出、小地图、网络图片、动态纹理：使用 Raw Image。
• Image 支持 Simple、Sliced、Tiled、Filled。
• Raw Image 没有这些类型，但可以直接接受各种 Texture，并通过 UV Rect 控制取样区域。

Unity API 文档也提醒，大量 Raw Image，尤其使用不同纹理时，可能增加 Draw Call，因此不适合无节制地用于大量普通图标。Unity RawImage API

常问：Raw Image 与 Image 的区别？

一句话概括：

Image 用来显示 Sprite，适合常规 UI；Raw Image 用来显示 Texture，适合动态画面。

对比项	Image	Raw Image
资源字段	Source Image	Texture
接受类型	Sprite	Texture2D、RenderTexture、WebCamTexture 等
图片导入设置	通常设为 Sprite (2D and UI)	可以直接使用普通 Texture
显示类型	Simple、Sliced、Tiled、Filled	没有这些类型
特有功能	九宫格、平铺、进度填充、保持比例	UV Rect 裁剪、缩放、滚动纹理
常用场景	按钮、图标、面板、血条、技能图标	小地图、视频、摄像头、模型预览、网络图片
图集支持	Sprite 可以放进 Sprite Atlas	不使用 Sprite Atlas
批处理	同材质、同图集时更容易合批	使用不同纹理时更容易增加 Draw Call

Image 适合普通界面

Image 专门围绕 Sprite 设计，最大的优势是支持多种显示模式：

• Simple：普通显示图片。
• Sliced：九宫格拉伸，保护四角和边框。
• Tiled：重复平铺 Sprite。
• Filled：水平、垂直或径向填充，常用于血条和技能冷却。
• Preserve Aspect：保持 Sprite 原始宽高比。
• Set Native Size：将控件调整为 Sprite 原始尺寸。

[SerializeField] private Image icon;
[SerializeField] private Sprite iconSprite;

private void Start()
{
    icon.sprite = iconSprite;
}

Raw Image 适合动态纹理

Raw Image 可以直接显示 Texture，不需要先转换为 Sprite：

• Camera 输出的 RenderTexture
• VideoPlayer 播放画面
• WebCamTexture 摄像头画面
• 运行时下载得到的 Texture2D
• 小地图、监控画面和角色模型预览

[SerializeField] private RawImage preview;
[SerializeField] private RenderTexture renderTexture;

private void Start()
{
    preview.texture = renderTexture;
}

UV Rect 是 Raw Image 的重点：

X=0, Y=0, W=1, H=1       显示整张纹理
X=0, Y=0, W=0.5, H=1     显示左半边
X=0.5, Y=0, W=0.5, H=1   显示右半边

如果网络下载的是 Texture2D：

rawImage.texture = downloadedTexture;

如果必须放进 Image，则需要额外创建 Sprite：

image.sprite = Sprite.Create(
    downloadedTexture,
    new Rect(0, 0, downloadedTexture.width, downloadedTexture.height),
    new Vector2(0.5f, 0.5f)
);

两者都有 Rect Transform、Color、Material、Raycast Target 和 Maskable。选择时记住：

• 界面美术资源、按钮、九宫格、血条：用 Image。
• Camera、视频、摄像头、网络 Texture：用 Raw Image。

参考：Unity Raw Image 手册。SVG 已完成预览检查，没有文字重叠或越框。

八、常见问题

• 看不到内容：检查 Texture 是否为 None、Color Alpha 是否为 0、对象是否启用、是否被父级遮罩裁掉。
• 图片被拉伸：让 Rect 宽高比匹配纹理，或者添加 Aspect Ratio Fitter。
• 后面的按钮点不到：关闭装饰性 Raw Image 的 Raycast Target。
• 点击仍然无效：检查 Canvas 是否有 Graphic Raycaster，场景中是否有 EventSystem。
• 自定义材质无法被遮罩：Shader 可能没有正确支持 UI Stencil 或裁剪。
• UV 平铺无效：检查纹理的 Wrap Mode 是否为 Repeat。