Unity UGUI的RawImage（原始图片）组件的介绍及使用

Unity UGUI的RawImage（原始图片）组件的介绍及使用

1. 什么是RawImage组件？

RawImage是Unity UGUI中的一个组件，用于显示原始图片。与Image组件不同，RawImage可以直接显示原始图片的像素数据，而不需要经过额外的处理。
2. RawImage组件的工作原理

RawImage组件通过将原始图片的像素数据直接传递给显卡进行渲染，从而实现显示原始图片的功能。它可以显示各种格式的图片，包括常见的PNG、JPG等格式。
3. RawImage组件的常用属性

• Texture：用于指定要显示的原始图片的纹理。
  
• Color：用于指定图片的颜色，可以通过调整透明度来实现图片的淡入淡出效果。
  
• Material：用于指定图片的材质，可以通过更换材质来实现不同的渲染效果。
  
• UV Rect：用于指定图片在纹理中的位置和大小。
  

4. RawImage组件的常用函数

• SetNativeSize()：根据原始图片的大小自动调整RawImage的大小，使其与图片保持一致。
  
• SetMaterialDirty()：标记材质为脏，使其在下一帧重新渲染。
  
• SetVerticesDirty()：标记顶点为脏，使其在下一帧重新计算顶点位置。
  

5. 示例代码

示例1：显示一张图片

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example : MonoBehaviour
5. {
6.     public RawImage rawImage;
7.     public Texture texture;
9.     void Start()
10.     {
11.         rawImage.texture = texture;
12.     }
13. }

复制代码

操作步骤：

• 创建一个空物体，并将RawImage组件添加到该物体上。
  
• 将要显示的图片拖拽到RawImage组件的Texture属性上。
  
• 将上述示例代码添加到一个脚本中，并将该脚本挂载到空物体上。
  
• 运行游戏，可以看到图片被显示在RawImage组件中。
  

注意事项：

• 确保要显示的图片已经导入到Unity项目中。
  

示例2：调整图片的颜色

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example : MonoBehaviour
5. {
6.     public RawImage rawImage;
7.     public Texture texture;
8.     public Color color;
10.     void Start()
11.     {
12.         rawImage.texture = texture;
13.         rawImage.color = color;
14.     }
15. }

复制代码

操作步骤：

• 创建一个空物体，并将RawImage组件添加到该物体上。
  
• 将要显示的图片拖拽到RawImage组件的Texture属性上。
  
• 将上述示例代码添加到一个脚本中，并将该脚本挂载到空物体上。
  
• 在Inspector面板中，调整RawImage组件的Color属性，改变图片的颜色。
  
• 运行游戏，可以看到图片的颜色被改变。
  

注意事项：

• Color属性的透明度可以通过调整Alpha值来实现淡入淡出效果。
  

示例3：调整图片的大小

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example : MonoBehaviour
5. {
6.     public RawImage rawImage;
7.     public Texture texture;
9.     void Start()
10.     {
11.         rawImage.texture = texture;
12.         rawImage.SetNativeSize();
13.     }
14. }

复制代码

操作步骤：

• 创建一个空物体，并将RawImage组件添加到该物体上。
  
• 将要显示的图片拖拽到RawImage组件的Texture属性上。
  
• 将上述示例代码添加到一个脚本中，并将该脚本挂载到空物体上。
  
• 运行游戏，可以看到RawImage的大小自动调整为与图片一致。
  

注意事项：

• 在调用SetNativeSize()函数之前，确保RawImage的Texture属性已经被赋值。
  

示例4：更换图片

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example : MonoBehaviour
5. {
6.     public RawImage rawImage;
7.     public Texture texture1;
8.     public Texture texture2;
10.     void Start()
11.     {
12.         rawImage.texture = texture1;
13.     }
15.     public void ChangeTexture()
16.     {
17.         rawImage.texture = texture2;
18.     }
19. }

复制代码

操作步骤：

• 创建一个空物体，并将RawImage组件添加到该物体上。
  
• 将要显示的图片1和图片2拖拽到RawImage组件的Texture属性上。
  
• 创建一个按钮，并将上述示例代码添加到一个脚本中，并将该脚本挂载到按钮上。
  
• 将按钮的OnClick事件关联到ChangeTexture()函数。
  
• 运行游戏，点击按钮，可以看到图片被更换为图片2。
  

注意事项：

• 确保按钮的OnClick事件已经正确关联到ChangeTexture()函数。
  

示例5：更换材质

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class Example : MonoBehaviour
5. {
6.     public RawImage rawImage;
7.     public Texture texture;
8.     public Material material;
10.     void Start()
11.     {
12.         rawImage.texture = texture;
13.         rawImage.material = material;
14.     }
15. }

复制代码

操作步骤：

• 创建一个空物体，并将RawImage组件添加到该物体上。
  
• 将要显示的图片拖拽到RawImage组件的Texture属性上。
  
• 将要使用的材质拖拽到RawImage组件的Material属性上。
  
• 将上述示例代码添加到一个脚本中，并将该脚本挂载到空物体上。
  
• 运行游戏，可以看到图片的渲染效果被更换为材质所定义的效果。
  

注意事项：

• 确保要使用的材质已经导入到Unity项目中。
  

参考资料

• Unity官方文档：RawImage
  
• Unity官方教程：Working with Raw Images
  

            本文作者：                            Blank                            
        本文链接：        
        版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
        声援博主：如果您觉得文章对您有帮助，可以点击文章右下角            【                推荐】                    一下。您的鼓励是博主的最大动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！