用 @State 装饰器管理状态，配合 Path 组件绘制圆形图像，触摸交互直接在 Canvas 的 onTouch 回调里处理。

关键代码：

调用.onTouch来实现交互操作

// 触摸交互（直接响应所有触摸事件）
    .onTouch((event) => {
      switch(event.type) {
        case TouchType.Down:
          // 按下时标记为拖动状态（简化：不做碰撞检测，直接拖动）
          this.isDragging = true;
          break;
        case TouchType.Move:
          // 拖动时直接更新圆形位置（使用Canvas内相对坐标）
          if (this.isDragging) {
            this.circleX = event.touches[0].x;
            this.circleY = event.touches[0].y;
          }
          break;
        case TouchType.Up:
        case TouchType.Cancel:
          // 松开时结束拖动
          this.isDragging = false;
          break;
      }
    });

完整实现代码：

@Component
@Entry
export struct CanvasSkillDemo {
  // 圆形位置（Canvas内相对坐标）
  [@State](/user/State) circleX: number = 150;
  [@State](/user/State) circleY: number = 150;
  // 拖动状态
  [@State](/user/State) isDragging: boolean = false;

  build() {
    Column() {
      Text('Canvas圆形拖动演示')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 40, bottom: 20 });

      // Canvas组件
      Canvas() {
        // 绘制可拖动圆形
        Path()
          .commands(`M${this.circleX},${this.circleY} m-30,0 a30,30 0 1,0 60,0 a30,30 0 1,0 -60,0`)
          .fill('#FF9F43')
          .stroke(Color.Black)
          .strokeWidth(2);
      }
      .width(300)
      .height(300)
      .backgroundColor('#F5F5F5')
      .margin({ bottom: 30 })
      // 触摸交互（直接响应所有触摸事件）
      .onTouch((event) => {
        switch(event.type) {
          case TouchType.Down:
            // 按下时标记为拖动状态（简化：不做碰撞检测，直接拖动）
            this.isDragging = true;
            break;
          case TouchType.Move:
            // 拖动时直接更新圆形位置（使用Canvas内相对坐标）
            if (this.isDragging) {
              this.circleX = event.touches[0].x;
              this.circleY = event.touches[0].y;
            }
            break;
          case TouchType.Up:
          case TouchType.Cancel:
            // 松开时结束拖动
            this.isDragging = false;
            break;
        }
      });

      Button('重置位置')
        .width(120)
        .height(40)
        .onClick(() => {
          this.circleX = 150;
          this.circleY = 150;
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    .padding(20)
    .backgroundColor('#F9F9F9');
  }
}

实现效果：

技术解析：

这段代码做了 3 个关键简化，同时保留核心功能：​

1.用 @State 管理状态，告别全局变量​

圆形坐标（circleX/circleY）和拖动状态（isDragging）都用 @State 修饰，状态变化时 Canvas 会自动重绘，不用手动调用 clear () 和 draw ()，减少代码量。​

2.Path 组件绘制圆形，语法更直观​

不用手动操作 Canvas 上下文，直接通过 Path 的 commands 属性写路径指令，一行代码就能画出圆形，还能轻松设置填充色、边框。​

3.简化触摸交互，快速验证功能​

省略了触摸点是否在圆形内的碰撞检测，按下就开启拖动，适合快速做 demo 验证；同时处理了 TouchType.Cancel（意外中断触摸），兼容性更好。

注意：

1.@State 状态变量的正确使用​

修饰圆形坐标：@State circleX: number = 150，初始值设为 Canvas 中心（Canvas 宽高 300，中心坐标 150,150）​

修饰拖动状态：@State isDragging: boolean = false，默认未拖动，状态变化时自动触发 UI 更新​

2.Path 绘制圆形的 commands 指令解读​

代码中M${this.circleX},${this.circleY} m-30,0 a30,30 0 1,0 60,0 a30,30 0 1,0 -60,0的含义：​

M${circleX},${circleY}：移动画笔到圆形中心（起点）​

m-30,0：相对起点向左移动 30px（圆形半径 30，到左侧边缘）​

a30,30 0 1,0 60,0：画右半圆（半径 30，顺时针画 60px 长度）​

a30,30 0 1,0 -60,0：画左半圆，闭合圆形​

3.onTouch 事件的三阶段处理​

TouchType.Down：按下就开启拖动（this.isDragging = true），适合快速验证​

TouchType.Move：拖动时直接把触摸坐标赋值给圆形中心（this.circleX = event.touches[0].x），不用计算偏移（简化方案）​

TouchType.Up/Cancel：松开或触摸中断时，关闭拖动（this.isDragging = false）