鸿蒙Harmony OS Next原生开发原生UI组件图片缩放和图片插值

鸿蒙初开，开天辟地

图片缩放

当图片的原始大小和Image组件不同时,通过objectFit()方法传入ImageFit的枚举类型来设置图片的显示效果

None,保持原有的尺寸显示,超出显示范围的内容丢弃

Contain,保持宽高比进行缩小放大,让显示区域包含整个图片

Cover保持宽高比进行放大缩小,使图片完全覆盖显示区域

Fill不保持进行放大缩小,使得图片充满显示区域

ScaleDown保持图片宽高比缩小或不变,使图片完全显示在区域内

Auto自适应

 

图片缩放

图片插值

当原始图片分辨率较低且需要放大显示,图片会模糊并出现锯齿

这时使用interpolation方法对图片进行插值会使得图片更清晰

这是一个相当常用的算法

它本质上是基于原有的像素去插入新的像素,让图片的过渡更加平滑

interpolation.None不使用图片插值

interpolation.High高质量插值,会影响图片渲染的速度

interpolation.Medium中等质量

interpolation.Low低质量插值

 

@Component
export default struct See {
  @State options:string[] = ["JAVA","Python","C#","Golang"];
  @State answer:string = "____";
  build() {
    Column({space:20}){
      Row(){
        Text("江河浩瀚,胡生可安").fontSize(25).fontWeight(FontWeight.Bold);
        Text(this.answer).fontSize(25).fontWeight(FontWeight.Bold);
      };
      Image($r('app.media.background')).height('75px').width('75px');
      Image($rawfile('123.png')).height('25vp').width('25vp');
      Button({type:ButtonType.Circle}){
        Text("ArkTS")
      }.onClick(()=>{
        // this.options = ["JAVA","Python","C#","Golang","ArkTs"];
        this.options.push("ArkTs");
      }).width(50).height(50);
      ForEach(this.options,(item:string) => {
        Button(item).width(100).backgroundColor(Color.Red).onClick(()=>{
          this.answer = item;
        });
      },((item:string)=>
          JSON.stringify(item)
      ));
    }
  }
}

@Component
export default struct See {
  @State options:string[] = ["JAVA","Python","C#","Golang"];
  @State answer:string = "____";
  build() {
    Column({space:20}){
      Row(){
        Text("江河浩瀚,胡生可安").fontSize(25).fontWeight(FontWeight.Bold);
        Text(this.answer).fontSize(25).fontWeight(FontWeight.Bold);
      };
      Image($r('app.media.background')).height('75px').width('75px');
      Image($rawfile('123.png')).height('25vp').width('25vp');
      Button({type:ButtonType.Circle}){
        Text("ArkTS")
      }.onClick(()=>{
        // this.options = ["JAVA","Python","C#","Golang","ArkTs"];
        this.options.push("ArkTs");
      }).width(50).height(50);
      ForEach(this.options,(item:string) => {
        Button(item).width(100).backgroundColor(Color.Red).onClick(()=>{
          this.answer = item;
        });
      },((item:string)=>
          JSON.stringify(item)
      ));
    }
  }
}