本章節(jié)，我們介紹一下“Image”UI元素，首先我們創(chuàng)建一個新場景“SampleScene2.unity”。然后我們點擊菜單欄“GameObjec”->“UI”->“Image”，如下所示
我們將其放置到了中間位置，檢視面板中的參數(shù)如下?
默認情況下，這個“Image”的尺寸是100 * 100像素。
這里，我們主要介紹它的“Image”組件。
Source Image? 表示要顯示的圖像的紋理（必須作為精靈導(dǎo)入）。
Color要應(yīng)用于圖像的顏色。
Material? 用于渲染圖像的材質(zhì)。
Raycast Target 是否視為射線投射的目標。
這里，我們準備了一張Unity的官方Logo圖片，如下所示
我們選中這張圖片（我們圖片的真實尺寸是500*250像素），然后查看其檢視面板
這里，我們需要將該圖片的“Texture Type”改為“Sprite(2D and UI)”精靈即可（改完之后點擊右下角Apply按鈕保存一下）。然后，我們就可以在“Image”的Source Image選項中選擇剛剛的精靈圖片。具體操作，可以直接將“unity.png”文件拖拽到Source Image選項中。
我們回到Scene場景視圖中查看
但是，非常的明顯，這個圖片被壓縮了，而且出現(xiàn)了嚴重的比例失調(diào)問題。主要原因就是圖片的實際尺寸是500x250像素，而Image UI元素的尺寸則是100x100像素的。這個問題如何解決呢？我們在檢視面板中查看到增加了“Image Type”的屬性項目。
Image Type 默認值為Simple簡單, 其他還包括Sliced 九宮格裁切，Tiled 平鋪，F(xiàn)illed 填充。
Use Sprite Mesh 使用精靈網(wǎng)格，默認沒有勾選該項目。
Preserve Aspect確保圖像保持其現(xiàn)有尺寸，默認沒有勾選該項目。
Set Native Size將圖像框的尺寸設(shè)置為紋理的原始像素大小。
如果我們想要“Image”尺寸不變，讓圖片適應(yīng)UI元素的話，勾選“Preserve Aspect”即可。
我們發(fā)現(xiàn)圖片居中顯示到了“Image”上面，圖片正常顯示了。
如果我們想要“Image”去使用圖片呢，我們可以點擊“Set Native Size”。
?
很明顯，該按鈕的作用就是將“Image”的尺寸設(shè)置為真實圖片的尺寸（500*250）。這次，圖片就顯示完整了。當然，如果覺得圖片太大的話，我們還可以修改“Image”的Width=200和Height=100將其等比例縮小。效果如下所示，
在我們添加“Image”UI元素的時候，我們發(fā)現(xiàn)還有一個名稱為“Raw Image”的UI元素。這UI元素上面有一個“Raw Image”的組件。
Raw Image與Image的最大區(qū)別在于，它可以使用任意圖片類型，不再局限于精靈。另外，Image可以用來交互的UI元素，RawImage 主要是用來顯示非交互的圖片而已。還有，Raw Image中的UV Rect 用來設(shè)置只顯示圖片的某一部分。關(guān)于兩者的區(qū)別，我們不再介紹了。文章來源：http://www.zghlxwxcb.cn/news/detail-682717.html
本課程涉及的內(nèi)容已經(jīng)共享到百度網(wǎng)盤：https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id文章來源地址http://www.zghlxwxcb.cn/news/detail-682717.html
到了這里，關(guān)于第三十九章 Unity 圖像 (Image) UI的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
