鸿蒙 Next Image 常用方法总结

@Entry@ComponentV2struct ImageTest{  @Local imageInfo:string=''  @Builder  itemBuild(fit:string,imagefit:ImageFit){    GridItem(){      Column(){       Image($r('app.media.wechatscan')).width(90).height(90).objectFit(imagefit)        Text(fit).fontSize(15)      }    }  }  build() {    Column({space:10}){      Grid() {        this.itemBuild('默认Cover',ImageFit.Cover)  //保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，对齐方式为水平居中        this.itemBuild('Contain',ImageFit.Contain) //保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，对齐方式为水平居中        this.itemBuild('Auto',ImageFit.Auto)  //图像会根据其自身尺寸和组件的尺寸进行适当缩放，以在保持比例的同时填充视图，对齐方式为水平居中        this.itemBuild('Fill',ImageFit.Fill)  //不保持宽高比进行放大缩小，使得图片充满显示边界，对齐方式为水平居中        this.itemBuild('ScaleDown',ImageFit.ScaleDown) //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中        this.itemBuild('None',ImageFit.None)  //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中        this.itemBuild('TOP_START',ImageFit.TOP_START)        this.itemBuild('TOP',ImageFit.TOP)        this.itemBuild('TOP_END',ImageFit.TOP_END)        this.itemBuild('START',ImageFit.START)        this.itemBuild('CENTER',ImageFit.CENTER)        this.itemBuild('END',ImageFit.END)        this.itemBuild('BOTTOM_START',ImageFit.BOTTOM_START)        this.itemBuild('BOTTOM',ImageFit.BOTTOM)        this.itemBuild('BOTTOM_END',ImageFit.BOTTOM_END)      }.layoutDirection(GridDirection.Row)      .columnsGap(10)      .rowsGap(10)      Row(){        Image('https://iknow-pic.cdn.bcebos.com/a6efce1b9d16fdfa65144071a68f8c5494ee7b31')          .alt($r('app.media.wechat'))  //占位图  支持使用objectFit设置填充效果，与图片的填充效果一致          .width(200).height(100).objectFit(ImageFit.Contain)          // .sourceSize({width:200,height:100}) //设置图片解码尺寸          .autoResize(true) //设置图片解码过程中是否对图源自动缩放          .onComplete((event)=>{            this.imageInfo= '图片的原始宽:'+event?.width+' 图片的原始高:'+event?.height              +' \n组件的宽:'+event?.componentWidth +' n组件的高:'+event?.componentHeight              +' \n图片实际绘制的宽度vp:'+px2vp(event?.contentWidth)+' 图片实际绘制的高度vp:'+px2vp(event?.contentHeight)          })          .onError((error)=>{            this.imageInfo= '错误信息:'+error.message          })        Text(this.imageInfo).layoutWeight(1)      }.width('100%')    }.height('100%')
  }}

@Entry@ComponentV2struct ImageTest{  @Local imageInfo:string=''  @Builder  itemBuild(fit:string,imagefit:ImageFit){    GridItem(){      Column(){       Image($r('app.media.wechatscan')).width(90).height(90).objectFit(imagefit)        Text(fit).fontSize(15)      }    }  }  build() {    Column({space:10}){      Grid() {        this.itemBuild('默认Cover',ImageFit.Cover)  //保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，对齐方式为水平居中        this.itemBuild('Contain',ImageFit.Contain) //保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，对齐方式为水平居中        this.itemBuild('Auto',ImageFit.Auto)  //图像会根据其自身尺寸和组件的尺寸进行适当缩放，以在保持比例的同时填充视图，对齐方式为水平居中        this.itemBuild('Fill',ImageFit.Fill)  //不保持宽高比进行放大缩小，使得图片充满显示边界，对齐方式为水平居中        this.itemBuild('ScaleDown',ImageFit.ScaleDown) //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中        this.itemBuild('None',ImageFit.None)  //保持宽高比显示，图片缩小或者保持不变，对齐方式为水平居中        this.itemBuild('TOP_START',ImageFit.TOP_START)        this.itemBuild('TOP',ImageFit.TOP)        this.itemBuild('TOP_END',ImageFit.TOP_END)        this.itemBuild('START',ImageFit.START)        this.itemBuild('CENTER',ImageFit.CENTER)        this.itemBuild('END',ImageFit.END)        this.itemBuild('BOTTOM_START',ImageFit.BOTTOM_START)        this.itemBuild('BOTTOM',ImageFit.BOTTOM)        this.itemBuild('BOTTOM_END',ImageFit.BOTTOM_END)      }.layoutDirection(GridDirection.Row)      .columnsGap(10)      .rowsGap(10)      Row(){        Image('https://iknow-pic.cdn.bcebos.com/a6efce1b9d16fdfa65144071a68f8c5494ee7b31')          .alt($r('app.media.wechat'))  //占位图  支持使用objectFit设置填充效果，与图片的填充效果一致          .width(200).height(100).objectFit(ImageFit.Contain)          // .sourceSize({width:200,height:100}) //设置图片解码尺寸          .autoResize(true) //设置图片解码过程中是否对图源自动缩放          .onComplete((event)=>{            this.imageInfo= '图片的原始宽:'+event?.width+' 图片的原始高:'+event?.height              +' \n组件的宽:'+event?.componentWidth +' n组件的高:'+event?.componentHeight              +' \n图片实际绘制的宽度vp:'+px2vp(event?.contentWidth)+' 图片实际绘制的高度vp:'+px2vp(event?.contentHeight)          })          .onError((error)=>{            this.imageInfo= '错误信息:'+error.message          })        Text(this.imageInfo).layoutWeight(1)      }.width('100%')    }.height('100%')
  }}