Unity UGUI -- Image
Image控制元件
Image控制元件向用戶顯示非互動式影象。這可以用於裝飾、圖示等，影象也可以從指令碼更改來反映其他控制元件的變化。該控制元件類似於Raw Image 控制元件，但提供了更多的選項來動畫影象和精確歸檔控制元件矩形。然而，Image控制元件要求它的紋理是精靈，而原始影象可以接受任何紋理。
Properties 屬性
| Property: | Function: |
|---|---|
| Source Image 影象源 | The texture that represents the image to display (which must be imported as a Sprite). |
| Color 顏色 | The color to apply to the image. 圖片的顏色 |
| Material 材質 | The Material to use for rendering the image. 圖片的材質 |
| Image Type | The method used to display the image. The options are Simple, Sliced, Tiled and Filled (see below). |
| Preserve Aspect (Simple and Filled Image Types only) | Should the image’s original proportions of height and width be kept rather than rescaled? |
| Fill Center (Sliced and Tiled Image Types only) | Should the center slice of the image be filled as well as the borders? |
| Fill Method (Filled Image Type only) | Specifies the way the image should “grow” to fill the space during an animation. The options are Horizontal, Vertical, Radial90, Radial180 and Radial360 |
| Fill Origin (Filled Image Type only) | The point in the image from which the fill should proceed. The options are various combinations of Bottom, Top, Left and Right, depending on which Fill Method is selected (see below). |
| Fill Amount (Filled Image Type only) | The fraction of the image (range 0.0 to 1.0) that is currently filled. |
| Clockwise (Filled Image Type only) | Should the fill proceed in a clockwise direction? (Radial fills only.) |
| Set Native Size | Button to set the dimensions of the image box to the original pixel size of the texture. |
Raycast Target 選項：
控制元件是否需要響應，勾選後事件會在EventSystem在Update的Process觸發。
Packing Tag：
打包的標誌值，最後打包的時候會把Tag相同的所有小圖打包成一個大圖。不像cocos打包圖集需要用到第三方軟體，這裡Unity會幫我們把相同Tag的圖片打包成大圖，非常方便。
Pixels Per Unit 100：
表示100畫素為1個Unity單位(1米)，也可以在Scene檢視中看出，640X960解析度的圖片在檢視中佔的網格橫方向有6格多一點，豎方向9格多一點。
Pivot：
表示錨點的位置，就是圖片自身原點的位置(center==(0.5,0.5))
Image Type
1: Simple: 圖片縮放到目標大小;
2: Slice（切片）: 圖片按照九宮格縮放;
3: Tiled（平鋪）: 圖片平鋪填充到目標大小;
4: Filled:指定區域顯示，垂直，水平, 圓周;
Simple
圖片整張全顯示，不裁切，不疊加，根據邊框大小會有拉伸。
Preserve Aspect（鎖定比例）：針對Simple模式，勾選之後，無論圖片的外形放大還是縮小，都會一直保持初始的長寬比例。
使用場景：遊戲背景、圖示、對話方塊背景、一般影象
Sliced
圖片9宮格拉伸，如下圖，圖片的四個角會保持原狀，中間的區域會隨著方向進行拉伸。1和4部分會隨著圖片的橫向拉伸而拉伸，2和3部分會隨著圖片的縱向拉伸而拉伸，圖片的中間部分會拉伸5進行填充。
Fill Center（填充中心）：勾選後，5顯示，反之，5不可見。
使用場景：對話方塊、按鈕、血條
注意事項：
- 使用Slice時，會比Simple/Tile用更多Vertices (4 vs 36)；
- 需要在Sprite Editor中，設定相關圖片的Border；
- 注意影象中的展開部分，在拉伸後是否美觀；
Tiled
若圖片已經過裁切，則使用Tiled模式後，根據圖片邊框拉伸，圖片的四個角會保持原狀，而1和4部分會隨著圖片的橫向拉伸而拉伸，2和3部分會隨著圖片的縱向拉伸而拉伸，圖片的中間部分會用5進行平鋪填充。若圖片未裁切，則使用Tiled模式後，根據圖片邊框拉伸，圖片保持原大小不做變化，只是用自身平鋪填充。
Fill Center（填充中心）：（已裁切的影象源才有此選項）勾選後，5顯示，反之，5不可見。
使用場景：背景
注意事情：
- 需要在Sprite Editor中，把圖片的Wrap Mode設定為Repeat,否則會產生許多不必要的Vertices；
- 要確保Tile無縫地拼到其他Tile；
Filled
Filled（填充的）：指定區域顯示，根據填充方式、填充起點、填充比例決定圖片顯示哪一部分。
Fill Method（填充方式）：分為Horizontal水平、Vertical垂直、Radial90度圓、Radial180度圓、Radial360度圓。
Fill Origin（填充起點）：Bottom、Right、Top、Left，隨著填充方式不同有所變化。
Fill Amount（填充比例）：0是完全不顯示，1是完全顯示。
使用場景：血條、經驗、魔法量、下載進度、完成度
圖片資源的Inspector面板屬性
匯入的圖片資源，在Inspector面板可以看到如下屬性
Texture Type 選項：貼圖型別
Default：預設
Normal map：法線貼圖
Editor GUI and Legacy GUI：UI貼圖
Sprite(2D and UI)：精靈
Cursor：滑鼠指標
Cookie：遮罩貼圖
Lightmap：烘焙貼圖
Single Channel：單通道
UI切圖一般使用Sprite(2D and UI)
Sprite Mode 選項：
1.Single（單個）
2.Multiple（多個）
3.Polygon（多邊形）
根據需求選擇，其他設定保持預設
點選Sprite Editor進入編輯圖片，如果選擇Multiple模式可以自由框選多個
Advanced 選項：高階(可自定義一些貼圖屬性)
保持預設
Wrap Mode 選項：貼圖與貼圖之間的拼接模式
保持預設
Filter Mode 選項：過濾模式
(1) Point(no filter)：沒有縮放
(2) Bilinear：B樣條線性插值，放大幾倍，就是把同樣的畫素複製幾次。
(3) Trilinear：
建議保持預設
注意：圖片修改後一定要記得點選Apply按鈕，應用設定，不然不會有改變。