Explicación detallada del componente Imagen en el método de desarrollo ETS del desarrollo de aplicaciones OpenHarmony

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

Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .

Hoy, lo llevaré a comprender el componente Imagen en el método de desarrollo ETS.

Autor: Nueces

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

Predicador de OpenHarmony, autor de contratos de InfoQ, experto en blogs de CSDN, experto en compartir en la nube de Huawei, bloguero experto en la nube de Alibaba, director de experiencia del blog 51CTO, uno de los miembros del proyecto de código abierto GVA , que se centra en el intercambio de grandes tecnologías front-end, que incluyen Flutter, Hongmeng, programa pequeño, Android, Vue, JavaScript.

Imagen

El componente de imagen admite la representación y visualización de imágenes locales e imágenes de red.

Podemos echar un vistazo a lo que tiene su interfaz

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

src:string|URI de imagen de PixelMap, admite imágenes locales y rutas de red, admite el uso de objetos multimedia de PixelMap.

PixelMap: clase de píxel de imagen, utilizada para leer o escribir datos de imagen y obtener información de imagen. Antes de llamar al método PixelMap, debe crear una instancia de PixelMap a través de createPixelMap. Aquí sólo hablo del primer parámetro.

Consulte la imagen local de la aplicación

Aquí primero demostramos cómo hacer referencia a la imagen local de la aplicación a través de la interfaz. El formato de imagen es compatible con "png/jpg/gif/svg", y los archivos de imagen se pueden almacenar en el directorio multimedia o en el directorio "/common/images" creado por usted mismo.

Puse dos imágenes relacionadas con Hongmeng en el proyecto, son diferentes y fáciles de distinguir. A continuación, las usaremos en el proyecto.

@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%')
  }
}

Hagamos clic en la vista previa a la derecha para echar un vistazo.

image-20220703115449288

Lo anterior es el uso simple de imágenes locales. A continuación, haremos lo mismo para las imágenes de red.

Recuerde agregar permisos al citar imágenes de la red

引用网络图片时记得添加权限。 方法： 需要在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({ancho: número, alto: número}): establece el tamaño de decodificación de la imagen, decodifica la imagen original en una imagen del tamaño especificado y la unidad de tipo de número es px.

Una imagen con un tamaño original de 1140x570 píxeles, después de especificar una imagen con un tamaño de decodificación de 120x100 píxeles, si el tamaño de visualización de la imagen supera este tamaño, se verá borrosa. El código de ejemplo es el siguiente:

 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

Por supuesto, además de estos, hay otras propiedades

Propiedades del evento

1. onComplete(devolución de llamada: (evento?: { ancho: número, altura: número, ancho del componente: número, altura del componente: número, estado de carga: número }) => vacío): esta devolución de llamada se activa cuando la imagen se carga correctamente y el se devuelve la imagen que se cargó con éxito tamaño de origen.

  • ancho: El ancho de la imagen, en píxeles.
  • altura: La altura de la imagen, en píxeles.
  • componenteWidth: el ancho del componente, en píxeles.
  • componentHeight: la altura del componente, en píxeles.
  • loadingStatus: El estado de la carga de la imagen con éxito.

2. onError(devolución de llamada: (evento?: {ancho del componente: número, altura del componente: número}) => vacío): esta devolución de llamada se activa cuando la carga de la imagen es anormal.

3. onFinish(callback: () => void) Cuando el archivo de origen cargado es una imagen svg con un efecto, esta devolución de llamada se activará cuando se complete la animación svg. Si la animación es una animación de bucle infinito, no será activó esta devolución de llamada.

 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动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
          })
​
​

Lo anterior es el uso más simple de Image

Resumir

Este artículo explica principalmente el uso simple del componente Imagen, incluida la referencia a imágenes locales e imágenes de red.

Supongo que te gusta

Origin juejin.im/post/7116150084802183181
Recomendado
Clasificación
Diario
Más
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

Code World

© 2018 codetd.com