Unity3D学习笔记uGUI（10）：Visual Components详述
Visual Components可视化组件中有很多会在项目开发中使用到，考虑到有些开发者对这个Visual Components可视化组件还不够熟悉，下面就给大家介绍对Visual Components可视化组件进行详细的讲述。
13、Visual Components - Text
Text组件用于显示一个无交互文本，比如标签、标题、内容等等。
13.1 Text属性一览
Text | 显示的文本 |
Character |
|
- Font | 字体 |
- Font Style | 字体样式：普通/加粗/斜体/斜体加粗 |
- Font Size | 字号 |
- Line Spacing | 行距 |
- Rich Text | 是否富文本：若为富文本则支持Markup 元素的符号转义 |
Paragraph |
|
- Alignment | 水平与垂直的对齐方式 |
- Align by Geometry | 几何对齐 |
Horizontal Overflow | 水平裁剪：换行（Wrap）或溢出（Overflow）,解决当文本宽度太大时如何裁剪来适应矩形大小。 |
Vertical Overflow | 垂直裁剪：截断（Truncate）和溢出（Overflow）,解决当文本高度太大时如何裁剪来适应矩形大小。 |
Best FIt | 是否忽略Size属性来适应控件的矩形大小。 |
Color | 颜色 |
Material | 渲染的材质 |
13.2 Text细节说明
某些控件（比如按钮和开关）搭配内置一个用于描述的文本（比如按钮文字）。而另一些控件（比如滑动条）没有隐式文本，可单独使用Text组件创建标签来加以说明。Text组件还可用于显示一系列的说明文本、故事文本以及版权说明等等。
Text组件提供了对常规的字体、字号、样式以及对齐方式等参数设置。当勾选RichText后，Markup元素就会被看作风格化信息的标签，用于设置单个词语或一句话加粗或显示不同颜色。
14、Visual Components - Image
Image组件用于显示一个无交互图片。Image组件可用于装饰图案、图标等等，而且还可以通过脚本来改变图片内容。Image组件与Raw Image组件类似，但前者提供了更多选项来设置图形动画与填充区域。此外，Image组件的纹理必须是Sprite，而Raw Image组件可以是任意的纹理。
14.1 Image属性一览
Source Image | 要显示的图片 |
Color | 颜色 |
Material | 材质 |
Raycast Target | 是否处理点击事件 |
Image Type | 裁切类型：拉伸/九宫/平铺/填充 |
Preserve Aspect | 是否保持宽高比例不变 |
Set Native Size | 提供了一个按钮，点击即可恢复图片原始像素大小 |
14.2 Image细节说明
要显示的图片必须以Sprite方式导入。
15、Visual Components - Raw Image
RawImage组件用于显示一个无交互图片。RawImage组件可用于装饰图案、图标等等，而且还可以通过脚本来改变图片内容。Raw Image组件与Image组件类似，但前者并未提供更多选项来设置图形动画与填充区域。此外， Raw Image组件可以是任意的纹理，而Image组件的纹理必须是Sprite。
15.1 Raw Image属性一览
Texture | 要显示的图片的纹理 |
Color | 颜色 |
Material | 材质 |
Raycast Target | 是否处理点击事件 |
UV Rectangle | 图片在控件矩形的偏移与大小，以标准化坐标（Normalized Coordinates）形式指定（取值范围0.0~1.0）。图片的边缘会拉神来填充UV矩形的周围区域。 |
15.2 Raw Image细节说明
RawImage并不必须Sprite作为纹理，而是可以显示任意纹理。比如显示通过WWW下载指定URL的某个图片资源，或游戏中任意一个纹理。
UVRectangle允许显示大图片的一个小片段。其中X和Y坐标值表明图片的哪一部分与控件的左下角对齐。例如，X=0.25，则图片左侧1/4将被裁剪。而W和H值则指定了图片用于填充矩形控件的区域宽高。例如，W=0.5，H=0.5，则1/4面积的图片将用来缩放并填充控件矩形。调整这些属性值，则可缩放或拉伸图片来满足不同需求。
16、Visual Components - Mask
Mask是可见UI控件，却改变一个控件子节点的表现。Mask会依据父节点来影响子节点。比如子节点比父节点大，那么只有父节点区域内的子节点可见。
16.1 Mask属性一览
Show Graphic | 父节点的图像是否作为带透明通道的遮罩，显示在子节点之上。 |
16.2 Mask细节说明
Mask的一种常见用法是显示一个大图片的局部区域。先创建一个Panel（菜单：GameObject=>CreateUI=>Panel）作为“框”，然后创建一个Image添加为Panel的子节点，接着把Image要显示的局部区域挪到Panel区域内。
最后，给Panel挂载Mask组件。此时Image处于Panel区域以外的内容即变为不可见，因为它被Mask影响了。
16.3 Mask实现细节
Mask遮罩是利用GPU的Stencil Buffer来实现的。
最上层Mask元素将写入1到Stencil Buffer，那么Mask底下所有元素在渲染时都会检查，然后仅渲染StencilBuffer为1的区域。 对于嵌套Mask，则会递增Bit位后继续写入1到Stencil Buffer，这意味着子节点每次渲染都需要使用&运算来检查自身哪些区域可被渲染。
17、Visual Components - RectMask2D
RectMask2D是类似Mask的遮罩组件。Mask根据父节点矩形区域来影响子节点。不像标准Mask组件，RectMask2D虽然有一些限制，但是也有表现上的优势。
17.1 RectMask2D细节说明
RectMask2D常用于显示一个大区域的局部区域。RectMask2D就是用来框住这个区域。
RectMask2D的限制有：
（1）它只在2D空间生效；
（2）它不会遮罩不在同一个平面的元素。
RectMask2D的优势有：
（1）它不使用Stencil Buffer；
（2）没有额外Draw Call；
（3）没有材质变化；
（4）性能更优。
18、Visual Components - UI Effect Components
Effects类的脚本（如阴影和描边）提供了简单的效果，可用于Text和Image。
18.1 Shadow
Shadow组件提供了阴影效果，可作用于Text或Image。它需要挂载到Text和Image上面去。
18.1.1 Shadow属性一览
Effect Color | 阴影的颜色 |
Effect Distance | 阴影的X、Y偏移 |
Use Graphic Alpha | 是否将图片颜色与阴影颜色相乘
|
18.2 Outline
Outline组件提供了描边效果，可作用于Text或Image。它需要挂载到Text和Image上面去。
18.2.1 Outline属性一览
Effect Color | 描边的颜色 |
Effect Distance | 描边的X、Y偏移 |
Use Graphic Alpha | 是否将图片颜色与描边颜色相乘
|
18.3 Position as UV1
Position as UV1效果？嗯...