ArkUI-Image詳解

鸿蒙多肉發表於2024-10-19
UI

ArkUI-Image詳解

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

建立資料夾，將本地圖片放入ets資料夾下的任意位置。

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

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

  • Resource資源

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

resources資料夾下的圖片都可以透過$r資源介面讀

取到並轉換到Resource格式。

支援png、webp、jpg等格式

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

  • 設定圖片渲染模式

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

ImageRenderMode.Original: 渲染模式為原色

ImageRenderMode.Template: 渲染模式為黑白

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

  • 圖片插值

當原圖解析度較低並且放大顯示時，圖片會模糊出現鋸齒。

這時可以使用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)
      }
    }

效果如下：

  • 設定圖片縮放型別

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

設定圖片縮放型別：
透過objectFit屬性使圖片縮放到高度和寬度確定的框內。

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

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 })
          // 保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內。
        .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)
  }
}

顯示效果：

  • 設定圖片重複樣式
.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)
  }
}

顯示效果：

相關文章