UGUI学习笔记（二）可视组件

快来打我* 2023-09-27 08:03 82阅读 0赞

## 一、Text组件 ##

![04e9b7675a5f2eb35496aac3bf8e46ce.png][]

*  **Text**：组件显示的文本内容。
 *  **Character**：
    
     *  **Font**：文本字体
     *  **Font Style**：文本样式，包含「Normal正常」、「Bold加粗」、「Italic倾斜」、「Bold And Italic加粗并倾斜」
     *  **Font Size**：文本大小
     *  **Line Spacing**：行间距
     *  **Rich Text**：是否开启富文本
 *  **Paragraph**：
    
     *  **Alignment**：文本的水平和垂直对齐方式。
     *  **Align by Geometry**：几何对齐（根据字的几何形状）
     *  **Horizontal Overflow**：当选择Overflow时允许水平方向超出文本框范围
     *  **Vertical Overflow**：当选择Overflow时允许垂直方向超出文本框范围
     *  **Best Fit**：自动调整字体大小以适应文本框
 *  **Color**：文本颜色
 *  **Material**：文本材质
 *  **Maskable**：关闭后父物体的遮罩将不再对其生效

新版本Unity中已经将Text组件归为已过时，并推荐使用TMP的Text组件。可以参考这篇文章[传送门][Link 1]

### 富文本 ###

富文本类似于HTML标签的语法格式，可以灵活的调整文本样式。  
Unity支持的样式标签如下：

<b></b> --粗体
    <i></i> --斜体
    <size=50></size> --字号
    <color=red></color> --颜色
    <material=2>texturally</material> --仅对Text Mesh有用，使用参数指定的材质渲染文本部分
    <quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5> --仅对Text Mesh有用，渲染与文本内联的图像

## 二、Image组件 ##

![c505840199751921872047a148d4431b.png][]

*  **Source Image**：表示要显示的图像的纹理（必须作为精灵导入）。
 *  **Color**：要应用于图像的颜色。
 *  **Material**：用于渲染图像的材质。
 *  **Image Type**：显示类型，下面将详细讲解。
 *  **Set Native Size**：将图像框的尺寸设置为纹理的原始像素大小。

### Image Type ###

当「Image Type」选择「Simple」选项时，如果Sprite的大小与组件的大小不同时，前者将进行拉伸处理以符合组件大小。如果此时复选了「Perserve Aspect」选项，则图片在缩放时将保持长宽比例恒定。  
![7a030ab6d54d818281dc1dc7185ec5d7.gif][]

此外，在此模式下选中「Use Sprite Mesh」选项，Image将使用Sprite Mesh渲染图像。

当「Image Type」选择「Sliced」选项时，图片将按九宫格进行切分。  
比如我对一张滑稽进行如下切分  
![320f1712f8e3e96be586c96bba08d1f0.png][]

那么此时再调整Image的大小，九宫格的四个角将保持不变，四条边只进行拉伸操作，只有中间的部分会进行缩放操作。此外，当取消「Fill Center」选项时，中间部分将不再显示  
![6989f98767aec33235c775d73cafa760.gif][]

当「Image Type」选择「Tiled」选项时，图片将会像铺地砖一样不断重复，直到填满整个图片控件。需要注意填充时内部会采用九宫格中间的切片进行填充  
![015feb549c93ebbd336f70cf8118b77c.gif][]

当「Image Type」选择「Filled」选项时，与「Simple」模式相似，不同之处在于它可以表现出一种从无到有的过程。效果如下  
![588bc61e87ede5a20c659d799d226d38.gif][]

「Fill Method」设置了填充形式  
「Fill Origin」设置了填充的起始位置  
「Fill Amount」设置了填充百分比  
通过脚本动态控制「Fill Amount」可以实现类似技能冷却的效果。

## 三、Raw Image组件 ##

Raw Image组件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途，还可以从脚本更改图像以便反映其他组件的更改。该组件类似于Image组件，但为动画化图像和准确填充组件矩形提供了更多选项。Image图像组件要求其纹理为Sprite，而Raw Image可以接受任何纹理。  
![9b281d79ee4f84db2975f532e7b374a5.png][]

### UV Rect ###

UV Rect属性可以调整图像在控件矩形内的偏移和大小，以标准化坐标（范围 0.0 到 1.0）表示。图像边缘将进行拉伸来填充 UV 矩形周围的空间。效果如下  
![5fe2f8404aee6791b70ed7a305a48bd2.gif][]

以上面的火柴人图片举例，UV Rect会将图片坐标映射到(0,1)的范围内。即使X或Y超过1，也会重新映射到(0,1)中，类似于跑马灯的效果。

基于该特性，我们可以将多个帧组成的图片做成动画  
![ad07e5c11be6f08051f2b9bfcbb25bd1.gif][]

代码如下

public class UVRectExample : MonoBehaviour
    {
        
        private RawImage _rawImage;
        private float _offsetX;
        private float _offsetY;
        void Start()
        {
        
            _rawImage = GetComponent<RawImage>();
            _offsetX = 1 / 5f;
            _offsetY = 1 / 3f;
            StartCoroutine(Play());
        }
    
        IEnumerator Play()
        {
        
            float x = 0;
            float y = 0;
            while (true)
            {
        
                y += _offsetY;
                while (x < 1)
                {
        
                    x += _offsetX;
                    _rawImage.uvRect = new Rect(x, y, _rawImage.uvRect.width, _rawImage.uvRect.height);
                    yield return new WaitForSeconds(0.1f);
                }
                x = 0;
            }
        }
    }

### 在UI上展示3D物体 ###

当Canvas的渲染模式处于Overlay下时，是无法在UI中显示3D物体的。但是通过Render Texture + Raw Image可以间接实现这种效果  
![d248204bfb07eba55f722487c08b2569.png][]

Render Texture涉及到了渲染方面的知识，简单理解就是相机将拍摄到的物体渲染到Render Texture上，然后再由Raw Image展示出来。具体做法如下：  
（1）在场景中新建一个相机，相机的Clear Flag设置为Solid Color。将3D物体放置在相机的视锥体范围内  
![2b4d22c532b497f5c65d3bd2fefed847.png][]

（2）创建一个Render Texture，并将其设置为相机的Target Texture  
![9e8d19d0772363af660f52281244a8ca.png][]

（3）将Raw Image的Texture设置为这个Render Texture  
![9f6b31d2a5cd5bce5aa884794c11893b.png][]

大功告成！调节Raw Image的大小可以调整显示的3D物体在屏幕中的大小  
![f3d653a56ecd9a631a9b5c5965b086fb.gif][]

## 四、Mask组件 ##

Mask遮罩不是可见的 UI 控件，而是一种修改控件子元素外观的方法。遮罩将子元素限制（即“掩盖”）为父元素的形状。因此，如果子项比父项大，则子项仅包含在父项以内的部分才可见。

*  **Show Graphic**：对于子项以外的区域是否显示父元素的内容  
    ![b12b59531f467e505ede51011196a4db.gif][]

### RectMask2D ###

关于Mask组件和RectMask2D组件的不同点，可以参考这篇文章[传送门][Link 2]。

[04e9b7675a5f2eb35496aac3bf8e46ce.png]: https://img-blog.csdnimg.cn/img_convert/04e9b7675a5f2eb35496aac3bf8e46ce.png
[Link 1]: https://blog.csdn.net/linxinfa/article/details/113525008
[c505840199751921872047a148d4431b.png]: https://img-blog.csdnimg.cn/img_convert/c505840199751921872047a148d4431b.png
[7a030ab6d54d818281dc1dc7185ec5d7.gif]: https://img-blog.csdnimg.cn/img_convert/7a030ab6d54d818281dc1dc7185ec5d7.gif
[320f1712f8e3e96be586c96bba08d1f0.png]: https://img-blog.csdnimg.cn/img_convert/320f1712f8e3e96be586c96bba08d1f0.png
[6989f98767aec33235c775d73cafa760.gif]: https://img-blog.csdnimg.cn/img_convert/6989f98767aec33235c775d73cafa760.gif
[015feb549c93ebbd336f70cf8118b77c.gif]: https://img-blog.csdnimg.cn/img_convert/015feb549c93ebbd336f70cf8118b77c.gif
[588bc61e87ede5a20c659d799d226d38.gif]: https://img-blog.csdnimg.cn/img_convert/588bc61e87ede5a20c659d799d226d38.gif
[9b281d79ee4f84db2975f532e7b374a5.png]: https://img-blog.csdnimg.cn/img_convert/9b281d79ee4f84db2975f532e7b374a5.png
[5fe2f8404aee6791b70ed7a305a48bd2.gif]: https://img-blog.csdnimg.cn/img_convert/5fe2f8404aee6791b70ed7a305a48bd2.gif
[ad07e5c11be6f08051f2b9bfcbb25bd1.gif]: https://img-blog.csdnimg.cn/img_convert/ad07e5c11be6f08051f2b9bfcbb25bd1.gif
[d248204bfb07eba55f722487c08b2569.png]: https://img-blog.csdnimg.cn/img_convert/d248204bfb07eba55f722487c08b2569.png
[2b4d22c532b497f5c65d3bd2fefed847.png]: https://img-blog.csdnimg.cn/img_convert/2b4d22c532b497f5c65d3bd2fefed847.png
[9e8d19d0772363af660f52281244a8ca.png]: https://img-blog.csdnimg.cn/img_convert/9e8d19d0772363af660f52281244a8ca.png
[9f6b31d2a5cd5bce5aa884794c11893b.png]: https://img-blog.csdnimg.cn/img_convert/9f6b31d2a5cd5bce5aa884794c11893b.png
[f3d653a56ecd9a631a9b5c5965b086fb.gif]: https://img-blog.csdnimg.cn/img_convert/f3d653a56ecd9a631a9b5c5965b086fb.gif
[b12b59531f467e505ede51011196a4db.gif]: https://img-blog.csdnimg.cn/img_convert/b12b59531f467e505ede51011196a4db.gif
[Link 2]: https://blog.csdn.net/yu__jiaoshou/article/details/102742784