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系統(tǒng)的介紹，我們將引入新的組件來幫助你創(chuàng)建特定功能的GUI。這一節(jié)會(huì)包含可以被創(chuàng)建的基礎(chǔ)組件

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，有一個(gè)Text區(qū)域可以輸入用于顯示的文字。可以設(shè)置字體、字形、字體大小還有是否支持富文本

這里還可以設(shè)置字體的對(duì)齊，設(shè)置水平和垂直方向超過寬高后應(yīng)該如何處理，BestFit設(shè)置可以讓文字調(diào)整大小適配到可用空間

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:

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

• Simple?- Scales the whole sprite equally.

• 簡(jiǎn)單-直接拉伸整個(gè)精靈

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

• 平鋪-和切片很像，但是中間的格子重復(fù)平鋪而不是拉伸，對(duì)于沒有邊框的精靈，整個(gè)精靈都被平鋪。

• 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位置到定義的方向、方法、數(shù)量的地方，像正常的方式去顯示（比loading條，那個(gè)條可以顯示到定義的百分比，剩余的不顯示）

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被選中的時(shí)候，設(shè)置本地大小的設(shè)置才會(huì)出現(xiàn)，重置圖片到原始精靈的大小

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設(shè)置中選擇Sprite( 2D / UI)?可以把圖片導(dǎo)入為UI sprite。相對(duì)于以前的GUI sprite，Sprite有額外的導(dǎo)入設(shè)置，最大的不同是增加了sprite編輯器。sprite編輯器提供了9宮格的設(shè)置，這把圖片切分成9塊，這意味著如果調(diào)整了sprite的大小，邊角部分不會(huì)被拉伸和扭曲

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只有在必要的時(shí)候采用，不然Image適合使用在大多數(shù)情況

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不是一個(gè)可見的UI但是是一個(gè)修改子元素的表現(xiàn)的方法。mask限制了子元素在父元素的形狀之內(nèi)。如果子元素比父元素要大，那么子元素只有在父元素內(nèi)的部分會(huì)顯示

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.

可視組件也可以應(yīng)用各種各樣的簡(jiǎn)單特效，比如簡(jiǎn)單陰影和描邊。請(qǐng)看特效介紹頁面得到更多信息

轉(zhuǎn)載于:https://www.cnblogs.com/SolarWings/p/7775156.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。