如何实现类似.9 图的功能

.9图是一种特殊格式的图片,这种图片,具有自适应调节大小的能力,不会失真。想了解HarmonyOS上如何实现类似的效果。

HarmonyOS
2024-05-23 23:17:29
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
davis_li

在HarmonyOS上没有.9图的概念,HarmonyOS上可以通过Image的resizable属性,设置图像拉伸时可调整大小的图像选项。通过设置不被拉伸的区域,实现类似.9图的效果。

参考链接:

Image-基础组件-基于ArkTS的声明式开发范式-ArkTS组件-ArkUI API参考-开发 | 华为开发者联盟 (huawei.com)

参考代码:

@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.Contain 
  @State w:number = 300 
  @State h:number = 300 
  build() { 
    Column({ space: 10 }) { 
      if (this.show) { 
        Image($r("app.media.c0ca0336b4640b770813665d881e1cb8"))// 具体的图片 
          .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 
    }) 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.

主要事项:

只有当bottom和right同时大于0时,该属性生效。

分享
微博
QQ
微信
回复
2024-05-24 23:10:09
相关问题
基于ArkUI实现类似.9拉伸能力
1126浏览 • 1回复 待解决
HarmonyOS 点9功能
675浏览 • 1回复 待解决
HarmonyOS 是否支持类似的.9配置?
958浏览 • 1回复 待解决
HarmonyOS 是否有.9实现效果
423浏览 • 1回复 待解决
HarmonyOS 如何支持.9
338浏览 • 1回复 待解决
如何实现类似插槽功能
2351浏览 • 1回复 待解决
HarmonyOS ArkTS是否支持.9
358浏览 • 1回复 待解决
请问有没有支持.9方案?
751浏览 • 1回复 待解决
HarmonyOS 支持使用.9吗?
694浏览 • 1回复 待解决
HarmonyOS 是否有适配点9方案
290浏览 • 1回复 待解决
鸿蒙-如何实现类似于HOME键功能
11192浏览 • 2回复 待解决
HarmonyOS有没有适配点9方案
2436浏览 • 1回复 待解决
Arkts开发 api9 中怎么实现扫码功能
3530浏览 • 1回复 待解决