UGUI的Image等價於NGUI的Sprite組件,用於顯示圖片。
一、Image組件:
Source Image(圖像源):紋理格式為Sprite(2D and UI)的圖片資源(導入圖片后選擇Texture Type為Sprite(2D and UI))。
Color(顏色):圖片疊加的顏色。
Material(材質):圖片疊加的材質。
Raycast Target(射線投射目標):是否作為射線投射目標,關閉之后忽略UGUI的射線檢測。
Image Type(圖片顯示類型):
Simple(基本的):圖片整張全顯示,不裁切,不疊加,根據邊框大小會有拉伸。
Preserve Aspect(鎖定比例):針對Simple模式,勾選之后,無論圖片的外形放大還是縮小,都會一直保持初始的長寬比例。
Image Type(圖片顯示類型):
Sliced(切片的):圖片切片顯示,在Project頁面選中圖片,切換為Sprite(2D and UI)模式后,點擊Sprite Editor進入圖片裁切模式,將圖片裁切為上圖的形狀,使用Sliced模式后,根據圖片邊框拉伸,圖片的四個角會保持原狀,而1和4部分會隨着圖片的橫向拉伸而拉伸,2和3部分會隨着圖片的縱向拉伸而拉伸,圖片的中間部分會拉伸5進行填充。
Fill Center(填充中心):勾選后,5顯示,反之,5不可見。
Image Type(圖片顯示類型):
Tiled(平鋪的):若圖片已經過裁切,則使用Tiled模式后,根據圖片邊框拉伸,圖片的四個角會保持原狀,而1和4部分會隨着圖片的橫向拉伸而拉伸,2和3部分會隨着圖片的縱向拉伸而拉伸,圖片的中間部分會用5進行平鋪填充。若圖片未裁切,則使用Tiled模式后,根據圖片邊框拉伸,圖片保持原大小不做變化,只是用自身平鋪填充。
Fill Center(填充中心):(已裁切的圖像源才有此選項)勾選后,5顯示,反之,5不可見。
Image Type(圖片顯示類型):
Filled(填充的):根據填充方式、填充起點、填充比例決定圖片顯示哪一部分。
Fill Method(填充方式):分為水平、垂直、90度圓、180度圓、360度圓。
Fill Origin(填充起點):根據填充方式不同有所變化。
Fill Amount(填充比例):0是完全不顯示,1是完全顯示。
二、使用中的技巧:
《功能1:我想在程序里動態切換圖像源,包括我電腦硬盤里任意一張圖片》
思路:首先我們要將該圖片讀入字節流,然后轉換為Sprite,就可以直接賦給Image了,代碼如下:
傳入的參數bytes為圖片文件轉換的字節數組,至於怎么轉,網上一收一大把,這里就不做說明了,texture2d為一個Texture2D變量,返回的_sprite就可以直接賦值給Image的圖像源了。
《功能2:我也想給圖片添加像文本那樣的陰影效果和描邊效果》
陰影效果:還是添加陰影特效組件
描邊效果:還是添加描邊特效組件