UGUI（七）- RawImage

RawImage 与 Image

二者都是 UGUI 的图片组件，都继承自 MaskableGraphic， RawImage 相对 Image 功能简单很多，是 Image 的乞丐版

 

RawImage

 

• Texture 指定要显示的图片，资源类型是 Texture ，如果此项属性未指定图片资源并且 Material 未指定时，则控件以 Color 属性的颜色填充

• Color 颜色值, 如果 Texture 和 Material 未指定时，则控件显示该属性颜色；如果 Texture 有指定值，则控件最终以指定图片和Color混合值（相乘）

• Material 材质， Texture 未指定时，控件以 Material 显示

• Raycast Target 是否可以被射线检测到

• UV Rect 控件 UV 选项，用于控件图片按 UV 值显示整张图片或部分图片
  

  

 

补充 UV Rect

UV 是指把图片的宽高 以 0-1 开区间划分图片上的点，以便于在渲染时进行映射采样（获取图片上对应坐标的颜色值）。

上图中 X 为横向采样坐标起点， W 为横向采样宽度；Y 为竖向采样坐标起点，H 为竖向采样高度。这四个值构成一个矩形，即图片上的采样区间。默认情况下 X:0 W:1 Y:0 H:1 采样区间为整张图片， 而当 X：0.5 W：0.5 Y：0 H:0.5 时，采样区间为图片的右下四分之一。

那么问题来了，当 X：0.5 W：1 Y：0 H:1 时，横向采样起始点是 0.5, 终点是1.5 已经超出图片的横向最大值1，这时控件应该怎么显示？先来看两张图

上面第1张图横向1-1.5的部分其实是取的原图中最右侧边上的像素进行的延伸，所以看起来是一条条颜色不同的线，线的颜色与x：1处的颜色值相同。
第2张图横向1-1.5的部分是对原图中0-0.5的采样
第3张图横向1-1.5的部分是对前面部分的镜像

不同延伸模式的控制是在图片的导入模式中控制

• Repeat 平铺重复（即对超出1的坐标对1取模后的值再进行采样）
• Clamp 超出1的坐标取样为原图上X=1的颜色值
• Mirror 对横向或竖向的前一部分做镜像
• Mirror Once 仅做一次镜向，超出镜向坐标范围后采用Clamp模式
• Pre-axis 分开指定横向或纵向的延伸模式

Repeat、Clamp、Mirror示例

Mirror Once 示例

---

欢迎关注公众号，定期分享Unity的实用技巧~~