触屏交互——图片与手势操作，自由拖拽 原创

// 加载图片
Image(src: ResourceStr('app/media/landscape.jpg'))
1.
2.

// 移动图片
Image(src: ResourceStr('app/media/landscape.jpg')).scale({ x: 2, y: 2 })
1.
2.

// 添加拖动手势
PanGesture({ fingers: 1, direction: PanDirection.All, distance: 1 })
1.
2.

// 处理拖动事件
onActionUpdate((event: GestureEvent) => {
    // 更新图片位置
    // 这里的offsetX和offsetY需要根据实际情况计算
    let newX = this.state.imageX + event.offsetX;
    let newY = this.state.imageY + event.offsetY;
    this.updateImagePosition(newX, newY);
})
1.
2.
3.
4.
5.
6.
7.
8.

// 维护图片位置状态
@State imageX: number = 0;
@State imageY: number = 0;
1.
2.
3.

// 更新图片位置的方法
private updateImagePosition(x: number, y: number) {
    this.imageX = x;
    this.imageY = y;
}
1.
2.
3.
4.
5.

// 完整的组件代码示例
@Entry
@Component
struct ImagePanExample {
  @State imageX: number = 0;
  @State imageY: number = 0;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
  @State positionX: number = 0
  @State positionY: number = 0

  private updateImagePosition(x: number, y: number) {
    this.imageX = x;
    this.imageY = y;
  }

  build() {
    Column() {
      Image($r('app.media.app_icon'))
        .scale({ x: 2, y: 2 })
        .width("100")
        .height("100")
        .translate({ x: this.imageX, y: this.imageY })
        .gesture(
          PanGesture({ fingers: 2, direction: PanDirection.All, distance: 1 })
            .onActionUpdate((event: GestureEvent) => {
              let newX = this.positionX + event.offsetX;
              let newY = this.positionY + event.offsetY;
              this.updateImagePosition(newX, newY);
            })
            .onActionEnd((event: GestureEvent) => {
              this.positionX = this.imageX
              this.positionY = this.imageY
              console.info('Pan end')
            }),
        )

    }
  }
}
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.