在Harmony OS中有实现可拉伸图片的方法吗？

Question

在Harmony OS中有实现可拉伸图片的方法吗？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

当前Image有相关属性resizable可实现图片的局部拉伸参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...示例代码：

@Entry 
@Component 
struct ImageExample2 { 
  @State show:Boolean = true 
  @State top:number = 0 
  @State bottom:number = 0 
  @State left:number = 0 
  @State right:number = 0 
  @State fit:ImageFit = ImageFit.Cover 
  @State w:number = 200 
  @State h:number = 200 
  build() { 
    Column({ space: 10 }) { 
      if (this.show) { 
        Image($r("app.media.startIcon"))// 直接加载网络地址，请填写一个具体的网络图片地址 
          .width(this.w) 
          .height(this.h) 
          .borderRadius(4) 
          .padding(10) 
          .resizable({ 
            slice:{ 
              top:this.top， 
              bottom:this.bottom， 
              left:this.left， 
              right:this.right 
            } 
          }) 
          .objectFit(this.fit) 
          .backgroundColor(Color.Orange) 
      } 
      Row() { 
        Button("add top to "+this.top).fontSize(10) 
          .onClick(()=>{ 
            this.top+=2 
          }) 
        Button("add bottom "+this.bottom).fontSize(10) 
          .onClick(()=>{ 
            this.bottom+=2 
          }) 
        Button("add left "+this.left).fontSize(10) 
          .onClick(()=>{ 
            this.left+=2 
          }) 
        Button("add right "+this.right).fontSize(10) 
          .onClick(()=>{ 
            this.right+=2 
          }) 
      } 
 
      Row() { 
        Button("reduce top to "+this.top).fontSize(10) 
          .onClick(()=>{ 
            this.top-=2 
          }) 
        Button("reduce bottom "+this.bottom).fontSize(10) 
          .onClick(()=>{ 
            this.bottom-=2 
          }) 
        Button("reduce left "+this.left).fontSize(10) 
          .onClick(()=>{ 
            this.left-=2 
          }) 
        Button("reduce right "+this.right).fontSize(10) 
          .onClick(()=>{ 
            this.right-=2 
          }) 
      } 
      Row(){ 
        Button("add w").fontSize(10) 
          .onClick(()=>{ 
            this.w += 2 
          }) 
        Button("add h").fontSize(10) 
          .onClick(()=>{ 
            this.h += 2 
          }) 
      } 
 
    }.width("100%").height("100%").backgroundColor(Color.Pink) 
    .onClick(()=>{ 
      this.show = !this.show 
    }) 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。