Visual Components

可視組件

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.

Text組件，也可以叫做Label，有一個Text區域可以輸入用于顯示的文字。可以設置字體、字形、字體大小還有是否支持富文本

這里還可以設置字體的對齊，設置水平和垂直方向超過寬高后應該如何處理，BestFit設置可以讓文字調整大小適配到可用空間

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:

一個圖像有RectTransform組件和Image組件。一個精靈可以被應用到Image組件的?Target Graphic（感覺應該改成SourceImage?）字段，顏色可以在Color字段中設置。材質也可以應用到Image組件。Image Type字段定義了應用的精靈怎么顯示，設置如下：

• 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.

• 切片（九宮格）-拆分成3*3的格子，角落的保持不變，拉伸中間的格子填充滿

• 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.

• 填充-從origin位置到定義的方向、方法、數量的地方，像正常的方式去顯示（比loading條，那個條可以顯示到定義的百分比，剩余的不顯示）

The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size.

在Simple或者Filed被選中的時候，設置本地大小的設置才會出現，重置圖片到原始精靈的大小

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.

在Texture Type設置中選擇Sprite( 2D / UI)?可以把圖片導入為UI sprite。相對于以前的GUI sprite，Sprite有額外的導入設置，最大的不同是增加了sprite編輯器。sprite編輯器提供了9宮格的設置，這把圖片切分成9塊，這意味著如果調整了sprite的大小，邊角部分不會被拉伸和扭曲

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.

Image組件使用Sprite，然而Raw Image使用Texture（沒有邊界等）。Raw Image只有在必要的時候采用，不然Image適合使用在大多數情況

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.

Mask不是一個可見的UI但是是一個修改子元素的表現的方法。mask限制了子元素在父元素的形狀之內。如果子元素比父元素要大，那么子元素只有在父元素內的部分會顯示

Effects

特效

Visual components can also have various simple effects applied, such as a simple drop shadow or outline. See the?Effects?reference page for more information.

可視組件也可以應用各種各樣的簡單特效，比如簡單陰影和描邊。請看特效介紹頁面得到更多信息

轉載于:https://www.cnblogs.com/SolarWings/p/7775156.html

總結

以上是生活随笔為你收集整理的Unity2017.1官方UGUI文档翻译——Visual Components的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。