[[419300]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

1. Image圖片標(biāo)簽

概述：圖片(Image)是用來顯示圖片的組件。

常見的屬性：id，長、寬、高等。

具體可以參考華為開發(fā)手冊(組件的通用屬性)：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-common-xml-0000001138483639

比較重要的屬性：

藍(lán)色的區(qū)域就是背景圖片

如果image標(biāo)簽比較大，而要展示的圖片比較小，前景圖片就蓋不住背景圖片，背景圖片就會展示出來。

工作當(dāng)中，關(guān)于image標(biāo)簽有兩個習(xí)慣：

大小會包裹內(nèi)容，圖片多大，image標(biāo)簽多大

image標(biāo)簽基本不會設(shè)置背景圖片，只會設(shè)置前景圖片，因為前景圖片才是要展示出來的圖片

新建項目：ImageApplication

<Image 
         ohos:height="1000px" 
         ohos:width="1000px" 
         ohos:image_src="$media:girl1" 
         ohos:background_element="#0000FF" 
     /> 

使用的girl圖片如下，可下載自取

girl圖片信息：

運(yùn)行，會發(fā)現(xiàn)藍(lán)色區(qū)域其實就是image標(biāo)簽，里面的girl就是展示的前景圖片，默認(rèn)情況是不剪切、不縮放的形式展示，把展示的圖片直接放在image正中間

2. 圖片剪切 clip_alignment

查看girl圖片信息

把寬高改為100px，因為image標(biāo)簽要比真實圖片小的時候，才需要剪切

<Image 
   ohos:height="100px" 
   ohos:width="100px" 
   ohos:image_src="$media:girl1" 
   ohos:background_element="#0000FF" 
   ohos:clip_alignment="center" 
   /> 

運(yùn)行：

發(fā)現(xiàn)只把中間的一小部分顯示出來了，并且寬高大小均為100px

所以，ohos:clip_alignment="center"表示把圖片中間和部分進(jìn)行剪切，然后再展示出來

ohos:clip_alignment="left"，表示剪切左邊的部分，其他屬性以此類推

ohos:clip_alignment="left|top"表示剪切左上部分圖片

3. 縮放圖片 scale_mode

使用的飛機(jī)圖片如下，可下載自取

飛機(jī)圖片的信息

<Image 
    ohos:height="500px" 
    ohos:width="500px" 
    ohos:image_src="$media:plane" 
    ohos:background_element="#0000FF" 
    /> 

默認(rèn)不剪切、不縮放，就是把圖片放在正中間

ohos:scale_mode="inside"：表示將圖片按比例縮放到跟image相同的或更小的尺寸并居中展示，但有可能不會填充整個組件

如：把圖片寬高改為 300px

<Image 
        ohos:height="300px" 
        ohos:width="300px" 
        ohos:image_src="$media:plane" 
        ohos:background_element="#0000FF" 
        ohos:scale_mode="inside" 
        /> 

可以看到縮小了，把原圖等比例縮小了。是跟image相同的或更小的尺寸并居中展示。

改為ohos:scale_mode="center"：表示不縮放，按照image大小來展示原圖中間的那一部分

改為ohos:scale_mode="stretch"：表示拉伸，會把整個image拉伸鋪滿。縮小后會把整個image鋪滿

寬高改為1000px，改為ohos:scale_mode="zoom_center"，：表示把原圖等比例放大，放大到跟窄邊一致的時候(也就是說：在放大的時候，只要這個圖片已經(jīng)鋪滿了其中一邊，那么他是鋪滿了橫向的寬度，所以就不會再縮放了，然后再居中顯示)

<Image 
       ohos:height="1000px" 
       ohos:width="1000px" 
       ohos:image_src="$media:plane" 
       ohos:background_element="#0000FF" 
       ohos:scale_mode="zoom_center" 
       /> 

改為ohos:scale_mode="zoom_start"：放大后只會在上面顯示，如：

改為ohos:scale_mode="zoom_end"：放大后只會在下面顯示，如：

4. zoom_center 和 inside 區(qū)別：

當(dāng)image比較大時，要展示的圖片比較小時，inside 不會進(jìn)行放大的，只能縮小。

而 zoom_center 就會把原圖放大

5. 小節(jié)

1、圖片剪切顯示：

代碼中：可以用setClipGravity方法

xml文件中：可以用clip_alignment屬性，上、下、左、右、居中，分別表示按照上、下、左、右、中間部位進(jìn)行剪切。

2、圖片縮放顯示：

代碼中：可以用setScaleMode方法

xml文件中：可以用scale_mode屬性

inside：表示將原圖按比例縮放到與Image相同或更小的尺寸，并居中顯示。 有可能不會填充組件

center：表示不縮放，按Image大小顯示原圖中間部分。

stretch：表示將原圖縮放到與Image大小一致。 拉伸。將組件填充。

clip_center：表示將原圖按比例縮放到與Image相同或更大的尺寸，并居中顯示。超過組件的部分被剪切掉。

zoom_center：表示原圖按照比例縮放到與Image最窄邊一致，并居中顯示。

zoom_end：表示原圖按照比例縮放到與Image最窄邊一致，并靠結(jié)束端顯示。

zoom_start：表示原圖按照比例縮放到與Image最窄邊一致，并靠起始端顯示。

相關(guān)方法：

3、 實際開發(fā)當(dāng)中，盡量不剪切、也不縮放，因為剪切或縮放了，就有可能導(dǎo)致圖片失幀。

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com