ArkUI-Image詳解

文章摘要：
給Image組件設置屬性可以使圖片顯示更靈活，達到一些自定義的效果。以下是幾個常用屬性的使用示例。這時可以使用interpolation屬性對圖片進行插值，使圖片顯示得更清晰。Image組件引入本地圖片路徑，即可顯示圖片（根目錄為ets文件夾）。通過renderMode屬性設置圖片的渲染模式為原色或黑白。通過objectFit屬性使圖片縮放到高度和寬度確定的框內(nèi)。創(chuàng)建文件夾，將本地圖片放入ets文件夾下的任意位置。當原圖分辨率較低并且放大顯示時，圖片會模糊出現(xiàn)鋸齒。

• 本地資源

創(chuàng)建文件夾，將本地圖片放入ets文件夾下的任意位置。

Image組件引入本地圖片路徑，即可顯示圖片（根目錄為ets文件夾）。

Image('images/pic1.webp')
    .width(100)
    .height(100)

image04.png

• Resource資源

使用資源格式可以跨包/跨模塊引入圖片，

resources文件夾下的圖片都可以通過$r資源接口讀

取到并轉換到Resource格式。

支持png、webp、jpg等格式

Image($r('app.media.pic1'))
    .width('100')
    .height('100')

image04.png

• 設置圖片渲染模式

通過renderMode屬性設置圖片的渲染模式為原色或黑白。

ImageRenderMode.Original: 渲染模式為原色

ImageRenderMode.Template: 渲染模式為黑白

Image($r('app.media.pic1'))
    // 設置圖片的渲染模式為黑白
    .renderMode(ImageRenderMode.Template)
    .width(100)
    .height(100)
    .border({ width: 1 })

image01.png

• 圖片插值

當原圖分辨率較低并且放大顯示時，圖片會模糊出現(xiàn)鋸齒。

這時可以使用interpolation屬性對圖片進行插值，使圖片顯示得更清晰。

 Column() {
      Row() {
        Image($r('app.media.pic1_low'))
          .width('40%')
          .interpolation(ImageInterpolation.None)
          .borderWidth(1)
          .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
        Image($r('app.media.pic1_low'))
          .width('40%')
          .interpolation(ImageInterpolation.Low)
          .borderWidth(1)
          .overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
      }.width('100%')
      .justifyContent(FlexAlign.Center)

      Row() {
        Image($r('app.media.pic1_low'))
          .width('40%')
          .interpolation(ImageInterpolation.Medium)
          .borderWidth(1)
          .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
        Image($r('app.media.pic1_low'))
          .width('40%')
          .interpolation(ImageInterpolation.High)
          .borderWidth(1)
          .overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          .margin(10)
      }
    }

效果如下：

image05.png

• 設置圖片縮放類型

給Image組件設置屬性可以使圖片顯示更靈活，達到一些自定義的效果。以下是幾個常用屬性的使用示例。

設置圖片縮放類型：
通過objectFit屬性使圖片縮放到高度和寬度確定的框內(nèi)。

ImageFit.Contain：保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。

ImageFit.Cover: 保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。

ImageFit.Auto: 自適應顯示。

ImageFit.Fill: 不保持寬高比進行放大縮小，使得圖片充滿顯示邊界。

ImageFit.ScaleDown: 保持寬高比顯示，圖片縮小或者保持不變。

ImageFit.None: 保持原有尺寸顯示。

案例代碼如下：

@Entry
@Component
struct ImageDemo {
  @State imageWidth: number = 0
  @State imageHeight: number = 0
  build() {
  Column({space: 30}) {
    Row({space: 15}) {
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
          // 保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。
        .objectFit(ImageFit.Contain)
        .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
        .objectFit(ImageFit.Cover)
        // 保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
        .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
          // 自適應顯示。
        .objectFit(ImageFit.Auto)
        .overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
    }

    Row({space: 15}) {
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
          // 不保持寬高比進行放大縮小，使得圖片充滿顯示邊界。
        .objectFit(ImageFit.Fill)
        .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
          // 保持寬高比顯示，圖片縮小或者保持不變。
        .objectFit(ImageFit.ScaleDown)
        .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
      Image($r('app.media.pic1'))
        .width(200)
        .height(100)
        .border({ width: 1 })
          // 保持原有尺寸顯示。
        .objectFit(ImageFit.None)
        .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
    }

  }
  .width('100%')
  .height('100%')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}

顯示效果：

image06.png

• 設置圖片重復樣式

.objectRepeat(ImageRepeat.XY): 在水平軸和豎直軸上同時重復繪制圖片
.objectRepeat(ImageRepeat.X): 只在水平軸上重復繪制圖片
.objectRepeat(ImageRepeat.Y): 只在豎直軸上重復繪制圖片

案例代碼如下：

@Entry
@Component
struct ImageDemo {
  build() {
    Column({space: 15}) {
      Row({ space: 15 }) {
        Image($r('app.media.pic1_low'))
            .size({width: 120, height: 120})
            .border({width: 1,color: Color.Red, radius: 8})
            // 在水平軸和豎直軸上同時重復繪制圖片
            .objectRepeat(ImageRepeat.XY)
            .objectFit(ImageFit.ScaleDown)

            .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })

        Image($r('app.media.pic1_low'))
            .size({width: 120, height: 120})
            .border({width: 1,color: Color.Red, radius: 8})
            // 只在豎直軸上重復繪制圖片
            .objectRepeat(ImageRepeat.Y)
            .objectFit(ImageFit.ScaleDown)
            .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })

        Image($r('app.media.pic1_low'))
            .size({width: 120, height: 120})
            .border({width: 1,color: Color.Red, radius: 8})
            // 只在水平軸上重復繪制圖片
            .objectRepeat(ImageRepeat.X)
            .objectFit(ImageFit.ScaleDown)
            .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
    }
  }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}

顯示效果：

image07.png