关于Unity中UI中的Mask组件、Text组件和布局

一、Mask组件

遮罩，Rect Mask矩形Mask(Rect Mask2D组件)，图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片，为0的部分不显示子图片)

 

Rect Mask矩形Mask：

1.创建一个Canvas

2.配置Canvas，上一章讲过

3.在Canvas下面创建一个空子节点，取名Mask，专门用来做遮罩处理

4.在Mask节点下面再创建一个UI的Image子节点，拖Sprite类型的贴纸到Image子节点中，记得点击Set Native Size

5.给Mask节点加一个Rect Mask2D的组件，这时候Mask下面的孩子只能在Mask节点大小的矩形内可见，这就是Rect Mask

 

图片Mask：

1.创建一个Canvas

2.配置Canvas，上一章讲过

3.在Canvas下面创建一个Image类型的UI子节点，取名Image_Mask，专门用来做图片Mask处理

4.把图片Mask图片拖进Image_Mask中，这种图片是中间一个灰色圆形，其他部分都是透明的。

5.在Image_Mask节点下挂载一个Mask组件

6.在Image_Mask节点再创建一个Image的UI子节点，把要显示的图片拖进去，这时候图像显示一个圆形的样子。

7.虽然是个圆圆的头像，但是边缘有一点毛边，看起来不是很好看，可以在边缘再加一个框

8.创建一个avator的空节点在Image_Mask节点上面，在avator节点下面创建一个Image子节点，把相框贴图拖进去。就显示一个完整的头像和框。

 

二、布局

1.创建一个Canvas

2.配置Canvas，上一章讲过

3..在Canvas下面创建一个空子节点叫做Layout

4.在Layout节点下面创建许多的子Image的UI节点，依次把贴图拖进去。

5.给Layout节点挂载Vertical Layout Group组件，这个组件可以使得Layout节点下面的子图片都垂直排放

 

垂直：

Vertical Layout Group组件属性：

Spacing 10：每个图片之间的间距为10

Padding :图片和各条边界的距离

Child Alignment：子节点的排布位置，上下左右

Child Force Expand：图片不会随着整体缩放而产生拉伸

 

水平：

Horizontal Layout Group组件

 

垂直水平排列：

Grid  Layout Group组件

1.Cell Size：每个子节点的大小

2.Spacing：每个子节点的间距

3.Start Center：开始的位置，第一个元素的位置

4.Start Axis：元素的主轴线

5.Child Alignment：对齐方式

6.Constraint：指定布局的行或列

 

 

三、Text组件

1.创建一个Canvas

2.配置Canvas，上一章讲过

3..在Canvas下面创建一个Text的UI节点

4.Text节点的font可以拖进TTF字体文件

 

Text组件属性：

1.Text 显示的文本
2.Font 使用的文字的字体;
3.FontStyle: 文字字体样式;
4.LineSpacing: 行间距;
5.Alignment: 对齐方式;pi'pe6: Color: 字体的颜色;
7.Horizontal Overflow水平溢出：有两个属性值，Wrap裁剪(按单词来裁剪的)，Overflow显示全部
8.Vertical 垂直溢出：Truncate裁剪，Overflow显示全部
9.RichText 多格式文本: 把这段写在Text属性框中<color=blue></color>，<color=blue>hello world</color>里面的文字是蓝色的。
10.Best Fit 最佳匹配方式

 

 

使用脚本代码来修改Text，挂载在Canvas上面：

Text txt;

void Start(){

　　this.txt=this.transform.Find("Text").GetComponent<Text>();

　　this.txt.Text="Hello World";

　　this.txt.fontStyle=FontStyle.Bold;

}

 

Unity的强大之处是可以在运行的时候修改属性，运行结束后会恢复。