Explicação detalhada do componente Image no método de desenvolvimento ETS do desenvolvimento de aplicativos OpenHarmony

Mobile 2022-07-04 14:08:36 views: null

Estou participando do recrutamento do programa de assinatura de criadores da Nuggets Technology Community, clique no link para se cadastrar e enviar .

Hoje, vou levar você a entender o componente Image no método de desenvolvimento ETS

Autor: Nuts

Conta pública: " Big Front-End Tour "

Pregador do OpenHarmony, autor do contrato InfoQ, especialista em blogs CSDN, especialista em compartilhamento de nuvem da Huawei, blogueiro especialista em nuvem do Alibaba, diretor de experiência do blog 51CTO, um dos membros do projeto de código aberto GVA , com foco no compartilhamento de grandes tecnologias front-end, incluindo Flutter, Hongmeng, programa pequeno, Android, Vue, JavaScript.

Imagem

O componente de imagem suporta a renderização e exibição de imagens locais e imagens de rede.

Podemos dar uma olhada no que sua interface tem

(src: string | PixelMap | Resource): ImageAttribute;

src:string|PixelMap image URI, suporta imagens locais e caminhos de rede, suporta o uso de objetos PixelMap de mídia.

PixelMap: Classe de pixel de imagem, usada para ler ou gravar dados de imagem e obter informações de imagem. Antes de chamar o método PixelMap, você precisa criar uma instância PixelMap por meio de createPixelMap. Aqui falo apenas do primeiro parâmetro.

Consulte a imagem local do aplicativo

Aqui, primeiro demonstramos como fazer referência à imagem local do aplicativo por meio da interface. O formato da imagem suporta "png/jpg/gif/svg", e os arquivos de imagem podem ser armazenados no diretório de mídia de mídia ou no diretório "/common/images" criado por você

Eu coloquei duas fotos relacionadas ao Hongmeng no projeto, elas são diferentes e fáceis de distinguir, em seguida, vamos usá-las no projeto.

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(1.5)
        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(1.5)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Vamos clicar na visualização à direita para dar uma olhada

image-20220703115449288

O acima é o uso simples de imagens locais. Em seguida, faremos o mesmo para imagens de rede.

Lembre-se de adicionar permissões ao citar imagens de rede

引用网络图片时记得添加权限。 方法： 需要在config.json（FA模型）或者module.json5（Stage模型）对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。

"abilities": [
  {
    ...
    "permissions": ["ohos.permission.INTERNET"],
    ...
  }
] 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(2.6)
        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(2.6)
        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
          .width("100%")
          .aspectRatio(2.6)
      }
      .width('100%')
    }
    .height('100%')
  }
}

image-20220703120209785

接下来我们继续接着对通用属性之外的其他特有属性来进行学习

首先来个预览：

image-20220703121247237

接下来，我将对其中的属性一一了解

.alt(string | PixelMap)：

加载时显示的占位图。支持本地图片和网络路径，支持使用媒体PixelMap对象。

示例代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
        Text("alt属性").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%")
          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg")
      }
      .width('100%')
    }
    .height('100%')
  }
}

大家可以看到的就是/common/images/HarmonyOS.jpg为加载时显示的占位图

. objectFit (ImageFit)： 设置图片的缩放类型。

          /**
           * .objectFit(ImageFit) 设置图片的缩放类型，默认值Cover。
           *    ImageFit.Cover 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
           *    ImageFit.Contain 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
           *    ImageFit.Fill 不保持宽高比进行放大缩小，使得图片填充满显示边界。
           *    ImageFit.None 保持原有尺寸显示。通常配合objectRepeat属性一起使用。
           *    ImageFit.ScaleDown 保持宽高比显示，图片缩小或者保持不变。
           */

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
         .objectFit(ImageFit.Cover)
        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Contain)
        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.ScaleDown)
        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .objectFit(ImageFit.Fill)
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

image-20220703122448098

. objectRepeat (ImageRepeat): 设置图片的重复样式。

ImageRepeat枚举说明

名称 描述
X 只在水平轴上重复绘制图片。
Y 只在竖直轴上重复绘制图片。
XY 在两个轴上重复绘制图片。
NoRepeat 不重复绘制图片。

. interpolation (ImageInterpolation)： 设置图片的插值效果，仅针对图片放大插值。

对于一些较小的图片，或老照片，插值计算有助于提升画质。下面是它的一些参数

ImageInterpolation

名称 描述
None 不使用插值图片数据。
High 插值图片数据的使用率高，可能会影响图片渲染的速度。
Medium 插值图片数据的使用率中。
Low 插值图片数据的使用率低。

. renderMode (ImageRenderMode)： 设置图片渲染的模式。 相当于PS中对图片做去色处理，可将彩色图片变为灰度图片。

ImageRenderMode

名称 描述
Original 按照原图进行渲染，包括颜色。
Template 将图片渲染为模板图片，忽略图片的颜色信息 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
​
  build() {
    Row() {
      Column() {
//        Text("media目录下的媒体资源").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
​
//        Text("/common/images目录下的图片").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("/common/images/HarmonyOS.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("网络图片，jpg格式").fontSize(32).fontColor(Color.Orange).textAlign(TextAlign.Center)
//        Image("https://img95.699pic.com/photo/50080/9588.jpg_wh300.jpg") // /common/images目录下的图片
//          .width("100%")
//          .aspectRatio(2.6)
//        Text("alt属性").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%")
//          .aspectRatio(2.6).alt("/common/images/HarmonyOS.jpg").objectFit(ImageFit.Cover)
//        Text("ImageFit.Cover").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//         .objectFit(ImageFit.Cover)
//        Text("ImageFit.Contain").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Contain)
//        Text("ImageFit.ScaleDown").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.ScaleDown)
//        Text("ImageFit.Fill").fontSize(32).fontColor(Color.Orange)
//        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
//          .width("100%").aspectRatio(2.6)
//          .objectFit(ImageFit.Fill)
        Text("ImageRenderMode.Original").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Original) // 按照原图进行渲染，包括颜色
        Text("ImageRenderMode.Template").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
          .renderMode(ImageRenderMode.Template) // 按照原图进行渲染，包括颜色
      }
      .width('100%')
​
​
    }
    .height('100%')
  }
}

image-20220703212447778

.sourceSize({width: number,height: number}): Defina o tamanho de decodificação da imagem, decodifique a imagem original em uma imagem do tamanho especificado e a unidade do tipo de número é px.

Uma imagem com tamanho original de 1140x570 pixels, após especificar uma imagem com tamanho de decodificação de 120x100 pixels, se o tamanho de exibição da imagem exceder esse tamanho, ela ficará desfocada. O código de amostra é o seguinte:

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6)
​
        Text("解码为小尺寸后显示模糊").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).sourceSize({
          width: 120,
          height: 100
        }) // 解码为小尺寸后显示模糊

image-20220703220624298

Claro, além dessas, existem outras propriedades

Propriedades do evento

1. onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void): Este retorno de chamada é acionado quando a imagem é carregada com sucesso e o a imagem carregada com sucesso é retornada.

  • largura: A largura da imagem, em pixels.
  • altura: A altura da imagem, em pixels.
  • componentWidth: A largura do componente, em pixels.
  • componentHeight: A altura do componente, em pixels.
  • loadingStatus: O status da imagem carregando com sucesso.

2. onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void): Este callback é acionado quando o carregamento da imagem é anormal.

3. onFinish(callback: () => void) Quando o arquivo de origem carregado for uma imagem svg com um efeito, esse callback será acionado quando a animação svg for concluída. Se a animação for uma animação de loop infinito, ela não será acionou este retorno de chamada.

 Text("原图").fontSize(46).fontColor(Color.Orange)
        Image($r("app.media.HarmonyOS")) // media目录下的媒体资源
          .width("100%").aspectRatio(2.6).onComplete((msg: { width: number,height: number,componentWidth: number,
 componentHeight: number, loadingStatus: number }) => {
​
          console.log(msg.width.toString());
        })
          .onError(() => {
            console.log('加载图片失败')
          })
          .onFinish(() => {
            //当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
          })
​
​

O acima é o uso mais simples de Image

Resumir

Este artigo explica principalmente o uso simples do componente Image, incluindo referências a imagens locais e imagens de rede.

Acho que você gosta

Origin juejin.im/post/7116150084802183181
Recomendado
Clasificación
Diario
Más
2024-05-19(0)
2024-05-18(32)
2024-05-17(5)
2024-05-16(24)
2024-05-15(5)
2024-05-14(11)
2024-05-13(7)
2024-05-12(23)
2024-05-11(31)
2024-05-10(32)

Code World

© 2018 codetd.com