HarmonyOS實戰—Image元件的剪切和縮放

1. Image圖檔标簽

• 概述：圖檔（

  Image

  ）是用來顯示圖檔的元件。
• 常見的屬性：id，長、寬、高等。
• 具體可以參考華為開發手冊（元件的通用屬性）：

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

• 比較重要的屬性：

• 藍色的區域就是背景圖檔

• 如果

  image

  标簽比較大，而要展示的圖檔比較小，前景圖檔就蓋不住背景圖檔，背景圖檔就會展示出來。

工作當中，關于

image

标簽有兩個習慣：

1. 大小會包裹内容，圖檔多大，

   image

   标簽多大

2. image

   标簽基本不會設定背景圖檔，隻會設定前景圖檔，因為前景圖檔才是要展示出來的圖檔

• 建立項目：ImageApplication

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

• 使用的girl圖檔如下，可下載下傳自取

• girl圖檔資訊：

• 運作，會發現藍色區域其實就是

  image

  标簽，裡面的

  girl

  就是展示的前景圖檔，預設情況是不剪切、不縮放的形式展示，把展示的圖檔直接放在

  image

  正中間

2. 圖檔剪切 clip_alignment

• 檢視girl圖檔資訊

• 把寬高改為

  100px

  ，因為

  image

  标簽要比真實圖檔小的時候，才需要剪切

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

• 運作：

• 發現隻把中間的一小部分顯示出來了，并且寬高大小均為

  100px

• 是以，

  ohos:clip_alignment="center"

  表示把圖檔中間和部分進行剪切，然後再展示出來

• ohos:clip_alignment="left"

  ，表示剪切左邊的部分，其他屬性以此類推

• ohos:clip_alignment="left|top"

  表示剪切左上部分圖檔

3. 縮放圖檔 scale_mode

• 使用的飛機圖檔如下，可下載下傳自取

• 飛機圖檔的資訊

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

• 預設不剪切、不縮放，就是把圖檔放在正中間

• 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"

  ，：表示把原圖等比例放大，放大到跟窄邊一緻的時候（也就是說：在放大的時候，隻要這個圖檔已經鋪滿了其中一邊，那麼他是鋪滿了橫向的寬度，是以就不會再縮放了，然後再居中顯示）

<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 差別：

• 當

  image

  比較大時，要展示的圖檔比較小時，

  inside

  不會進行放大的，隻能縮小。

• 而

  zoom_center

  就會把原圖放大

5. 小節

1、圖檔剪切顯示：

• 代碼中：可以用

  setClipGravity

  方法
• xml檔案中：可以用

  clip_alignment

  屬性，上、下、左、右、居中，分别表示按照上、下、左、右、中間部位進行剪切。

2、圖檔縮放顯示：

• setScaleMode

• scale_mode

  屬性

1. inside

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

2. center

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

3. stretch

   ：表示将原圖縮放到與Image大小一緻。 拉伸。将元件填充。

4. clip_center

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

5. zoom_center

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

6. zoom_end

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

7. zoom_start

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

• 相關方法：

3、 實際開發當中，盡量不剪切、也不縮放，因為剪切或縮放了，就有可能導緻圖檔失幀。