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

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

介绍

本示例基于属性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)