UGUI笔记2-Image、RawImage和Text控件

Image控件是用来显示一张图片的，sprite类型的

CanvasRenderer：负责UI元素的渲染，所有UI控件都需要一个CanvasRenderer，它继承自Componet

SpriteRenderer（渲染sprite用的）、MeshRenderer（渲染三维物体用的）、SkinnedMeshRenderer（渲染蒙皮的物体），它们都继承自Renderer负责渲染的

SourceImage： 是你要显示的图片，下面的有一个对应的 Set Native Size按钮 ，图片有可能会被拉伸，按这个按钮可以让Image控件的宽高设置为和图片原始的宽高一样，

Material： 材质，当我们需要一些比较高级的效果，比如你要为这张图片编写自己的shader的时候，才会用到材质

ImageType: 表示图片展示的类型，默认是Simple，就是正常显示，对应一个Preserve Aspect选项，意思是，是否保持比例（宽高比）， 在屏幕适配的时候，图片有可能会拉伸，这时候为了不让图片失真，一般会勾选这个选项

1.引入命名空间

using UnityEngine.UI

2.获取组件

Image image = GetComponent<Image>()

3.改变属性

image.sprite = xxx

RawImage控件也是用来显示一张图片的，但是显示的图片是Texture类型的图片.

用于显示文本，这个和一些应用里面的字体差不多，没什么好说的

Line Spacing：行距

Rich Text：是否使用富文本，就是会检测到尖括号

Best Fit：根据Text控件的大小来显示合适的字体大小，字体大小会受控件大小的限制，即文本会完整显示

玩游戏的时候我们经常看到游戏的圆形的小地图，可以查看自己的位置，以及游戏场景周围的环境，可以让我们知道靠近自己的朋友或者敌人，所以小地图功能是一个不可或缺的好功能，这里我们一起看看应该如何实现这个圆形的小地图。

工具/原料

unity3d工具

方法/步骤

1/12分步阅读

首先我们准备一张圆形的png图片“mask”，背景是透明的。

2/12

打开unity3d游戏场景，把图片拖放进去。

3/12

选择图片把“Texture Type”设置为“Sprite(2D and UI)”然后“apply”应用。

查看剩余1张图

4/12

在场景中创建一个“Image”命名为“Image(mask)”,把位置调整到右上角。

查看剩余1张图

5/12

创建一个“Raw Image”，大小位置与“Image(mask)”重叠。

查看剩余1张图

6/12

然后把“RawImage”作为“Image（mask）”的子项。

7/12

创建一个“Camera”相机，命名为“Camera_map”。

查看剩余1张图

8/12

在项目文件夹中创建一个“Render Texture”命名为“Render_tex”。

9/12

把“Render_tex”拖放到“Camera_map”中的“Target Texture”中，以及“RawImage”下的“Texture”中。

查看剩余1张图

10/12

然后在“Image（mask）”中添加“Mask”。

11/12

把“mask”图片拖放到“Source Image”中。

12/12

运行游戏我们就可以在右上角得到一个圆形的小地图了，里面是“Camera_map”相机显示的场景。

---