日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

想了解更多內容，請訪問：

成都創(chuàng)新互聯(lián)服務項目包括薌城網(wǎng)站建設、薌城網(wǎng)站制作、薌城網(wǎng)頁制作以及薌城網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，薌城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到薌城省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

https://harmonyos.

1. Image圖片標簽

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

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

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

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

比較重要的屬性：

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

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

工作當中，關于image標簽有兩個習慣：

大小會包裹內容，圖片多大，image標簽多大

image標簽基本不會設置背景圖片，只會設置前景圖片，因為前景圖片才是要展示出來的圖片

新建項目：ImageApplication

 
 
 
 

  
  
  
  

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

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

girl圖片信息：

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

2. 圖片剪切 clip_alignment

查看girl圖片信息

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

 
 
 
 

  
  
  
  

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

運行：

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

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

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

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

3. 縮放圖片 scale_mode

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

[[419308]]

飛機圖片的信息

 
 
 
 

  
  
  
  

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

默認不剪切、不縮放，就是把圖片放在正中間

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

如：把圖片寬高改為 300px

 
 
 
 

  
  
  
  

  
  
  
  
        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拉伸鋪滿?？s小后會把整個image鋪滿

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

 
 
 
 

  
  
  
  

  
  
  
  
       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ū)別：

當image比較大時，要展示的圖片比較小時，inside 不會進行放大的，只能縮小。

而 zoom_center 就會把原圖放大

5. 小節(jié)

1、圖片剪切顯示：

代碼中：可以用setClipGravity方法

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

2、圖片縮放顯示：

代碼中：可以用setScaleMode方法

xml文件中：可以用scale_mode屬性

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

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

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

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

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

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

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

相關方法：

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

想了解更多內容，請訪問：

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

https://harmonyos.

網(wǎng)頁標題：HarmonyOS實戰(zhàn)—Image組件的剪切和縮放
分享路徑：http://www.dlmjj.cn/article/dpgjgch.html