HarmonyOS使用Canvas自定义绘制内容后，如何根据onTouch事件动态更新绘制的内容？

@Entry  
@Component  
export struct CanvasExample {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  @State @Watch('draw') positionXY: number[] = [0, 0];  
  // 原始坐标点  
  prePosition: number[] = [];  
  // 上一次坐标点  
  clickXY: number[] = [];  
  // 鼠标落下坐标点  
  // 偏移参照点  
  shiftingPosition: number[] = [];  
  rectWidth: number = 100;  
  rectHeight: number = 100;  
  PanGestureFlag: boolean = false;  
  build() {  
    Column() {  
      Canvas(this.context)  
        .width('100%')  
        .height('50%')  
        .backgroundColor('#ffff00')  
        .margin({ top: 50 })  
        .onReady(() => {  
          this.draw()  
        })  
        .gesture(  
          // 拖拽手势  
          PanGesture().onActionStart((event: GestureEvent) => {  
            let x = event.fingerList[0].localX;  
            let y = event.fingerList[0].localY;  
            if (x >= this.positionXY[0] && x <= (this.positionXY[0] + this.rectWidth) && y > this.positionXY[1] && y <= (this.positionXY[1] + this.rectHeight)) {  
              this.PanGestureFlag = true;  
              // 可以拖动  
              this.clickXY = [parseInt(`${x}`), parseInt(`${y}`)];  
              this.shiftingPosition = [...this.positionXY];  
              console.info(`shiftingPosition ${this.shiftingPosition}`)  
            }  
          }).onActionUpdate((event: GestureEvent) => {  
            if (this.PanGestureFlag) {  
              this.prePosition = [...this.positionXY];  
              // 保存上一次坐标  
              const x = this.shiftingPosition[0] + parseInt(`${event.offsetX}`);  
              const y = this.shiftingPosition[1] + parseInt(`${event.offsetY}`);  
              this.positionXY = [x, y];  
              console.info(`shiftingPosition ${this.shiftingPosition}`);  
              console.log(`positionXY ${this.positionXY}`);  
            }  
          }).onActionEnd(() => {  
            this.PanGestureFlag = false;  
            // 结束后，停止拖动  
          }))  
    }  
  }  
  draw() {  
    console.log('demoTest :' + 's')  
    if (this.prePosition.length) {  
      this.context.clearRect(this.prePosition[0], this.prePosition[1], this.rectWidth, this.rectHeight);  
    }  
    this.context.fillRect(this.positionXY[0], this.positionXY[1], this.rectWidth, this.rectHeight)  
  }  
}
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.