实现图片添加贴纸鸿蒙示例代码

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

介绍

本示例基于PanGesture（手势处理）实现了图片添加贴图，并通过手势更新贴图位置的功能。

实现图片贴纸源码链接

效果预览

使用说明

进入应用会立马出现图片，屏幕下为提供的贴图。
点击贴图，贴图添加到图片中，可点击贴图移动位置。

实现思路

贴图组件
贴图展示，通过手势更新图片位置。核心代码如下：

build() {
  Column() {
    Image(this.item.img).objectFit(ImageFit.None)
  }
  .width('200vp')
    .height('200vp')
    .border({ width: '1vp', color: 'black' })
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .gesture(
      PanGesture()
        .onActionStart((event: GestureEvent | undefined) => {
          console.info('Pan start');
        })
        .onActionUpdate((event: GestureEvent | undefined) => {
          if (event) {
            this.offsetX = this.item.positionX + event.offsetX;
            this.offsetY = this.item.positionY + event.offsetY;
            console.info(`move:${event.offsetX}---${event.offsetY}`)
          }
        })
        .onActionEnd(() => {
          this.item.positionX = this.offsetX
          this.item.positionY = this.offsetY
        })
    )
}