实现图片局部拉伸鸿蒙示例代码

鸿蒙场景化示例代码技术工程师
发布于 2025-3-4 19:50
1.8w浏览
0收藏

本文原创发布在华为开发者社区

介绍

本示例基于属性resizable实现图片局部拉伸的功能。

实现图片局部拉伸源码链接

效果预览

实现图片局部拉伸鸿蒙示例代码-鸿蒙开发者社区

使用说明

1.只有当bottom和right同时大于0时,slice(边框宽度类型,用于描述组件边框不同方向的宽度)属性生效。
点击add W拉伸图片宽度,add H拉伸图片高度。
2.当设置 top +bottom 大于原图的高或者 left + right 大于原图的宽时 ResizableOptions 属性设置不生效

实现思路

通过属性resizable设置图像拉伸时可调整大小的图像选项。核心代码如下:


Image($r("app.media.image"))// 直接加载网络地址,请填写一个具体的网络图片地址
  .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)


  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

分类
收藏
回复
举报


回复
    相关推荐