Visual Components 可视化组件 UI系列3

Visual Components 可视化组件

本文档主要是对Unity官方手册的个人理解与总结（其实以翻译记录为主：>）
仅作为个人学习使用，不得作为商业用途，欢迎转载，并请注明出处。
文章中涉及到的操作都是基于Unity2018.3版本
参考链接：https://docs.unity3d.com/Manual/UIVisualComponents.html

With the introduction of the UI system, new Components have been added that will help you create GUI specific functionality. This section will cover the basics of the new Components that can be created.
随着UI系统的引入，添加了新的组件，它们将帮助您创建特定于GUI的功能。本节将介绍可以创建的新组件的基础知识。

Text

The Text component, which is also known as a Label, has a Text area for entering the text that will be displayed. It is possible to set the font, font style, font size and whether or not the text has rich text capability.
文本组件(也称为标签)有一个文本区域，用于输入将要显示的文本。可以设置字体、字体样式、字体大小以及文本是否具有富文本功能。

There are options to set the alignment of the text, settings for horizontal and vertical overflow which control what happens if the text is larger than the width or height of the rectangle, and a Best Fit option that makes the text resize to fit the available space.
有设置文本对齐方式的选项、水平和垂直溢出设置(用于控制如果文本大于矩形的宽度或高度会发生什么)和最佳适合选项(使文本调整大小以适合可用空间)。

Image

An Image has a Rect Transform component and an Image component. A sprite can be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field. A material can also be applied to the Image component. The Image Type field defines how the applied sprite will appear, the options are:
图像具有矩形变换组件和图像组件。可以对目标图形字段下的图像组件应用精灵，并在颜色字段中设置其颜色。材质也可以应用于图像组件。图像类型字段定义了应用的精灵将如何显示，选项如下:

• Simple - Scales the whole sprite equally. 将整个精灵平均缩放。
• Sliced - Utilises the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched. 利用3x3精灵分割，使大小调整不扭曲角落，只有中心部分是拉伸。
• Tiled - Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled. 类似于切片，但拼块(重复)的中心部分，而不是拉伸它。对于没有边界的精灵，整个精灵都是平铺的。
• Filled - Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount. 以与Simple相同的方式显示精灵，只是它从一个原点按指定的方向、方法和数量填充精灵。

The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size.
选择“设置本机大小”选项(在选择“简单”或“填充”时显示)将图像重置为原始精灵大小。

Images can be imported as UI sprites by selecting Sprite( 2D / UI) from the ‘Texture Type’ settings. Sprites have extra import settings compared to the old GUI sprites, the biggest difference is the addition of the sprite editor. The sprite editor provides the option of 9-slicing the image, this splits the image into 9 areas so that if the sprite is resized the corners are not stretched or distorted.
通过从“纹理类型”设置中选择精灵(2D / UI)，可以将图像导入为UI精灵。与旧的GUI精灵相比，精灵有额外的导入设置，最大的不同是精灵编辑器的添加。精灵编辑器提供了9-切片图像的选项，这将图像分割成9个区域，这样，如果精灵被调整大小，角落不会拉伸或扭曲。

Raw Image

The Image component takes a sprite but Raw Image takes a texture (no borders etc). Raw Image should only be used if necessary otherwise Image will be suitable in the majority of cases.
图像组件采用精灵，但原始图像采用纹理(无边框等)。原始图像应该只在必要时使用，否则图像将适用于大多数情况。

Mask

A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.
掩码不是一个可见的UI控件，而是一种修改控件的子元素外观的方法。掩码将子元素(即“掩码”)限制为父元素的形状。因此，如果子元素大于父元素，那么只会看到子元素在父元素中的部分。

Effects

Visual components can also have various simple effects applied, such as a simple drop shadow or outline. See the UI Effects reference page for more information.
可视组件还可以应用各种简单的效果，例如简单的投影或描边。有关更多信息，请参见UI Effects参考页。