HarmonyOS应用开发-手写板

这是一个基于HarmonyOS做的一个手写板应用，只需要简单的几十行代码，就可以实现如下手写功能以及清空画布功能。

一、先上效果图：

二、上代码

@Entry
@Component
struct Index {
  //手写路径
  @State pathCommands: string = '';

  build() {
    Column() {
      //清空画布按钮
      Button("清空")
        .onClick(() => {
          //将路径置空
          this.pathCommands = '';
        })
      Flex() {
        //如果路径不为空，那么展示path路径，
        // stokeWidth(5)表示画笔宽度为5，
        // fill('none')表示填充为空白，
        // stroke(Color.Blue)表示画笔为蓝色
        if (this.pathCommands != '') {
          Path().commands(this.pathCommands).strokeWidth(5).fill('none').stroke(Color.Blue)
        }
      }.onTouch((event: TouchEvent) => {
        //响应手势触摸操作
        this.onTouchEvent(event)
      }).width('100%').height('100%')
    }
  }

  onTouchEvent(event: TouchEvent) {
    //手指按下和移动时的位置转换成像素位置
    let x = vp2px(event.touches[0].x);
    let y = vp2px(event.touches[0].y);
    switch (event.type) {
      
      //手指按下
      case TouchType.Down:
      //眺到（x,y)点
        this.pathCommands += 'M' + x + ' ' + y;
        break;
            
      //画线到（x,y)点
      case TouchType.Move:
        this.pathCommands += 'L' + x + ' ' + y;
        break;
      default:
        break;
    }
  }
}

在这个代码中，我们构建了一个手势绘图应用。以下是关键部分的解释：

@Entry和@Component注解： 这两个注解用于标识这个类是一个入口点并且是一个组件。在HarmonyOS中，这是定义页面的标准方式。
@State注解： 在HarmonyOS中，@State注解同样用于声明状态。在这里，我们声明了一个字符串类型的pathCommands，用于存储手势绘制的路径。
build()函数：这个函数定义了HarmonyOS页面的结构，包括清空按钮和用于展示绘图路径的组件。
onTouchEvent函数： 这个函数处理触摸事件，根据手指按下和移动的位置，将相应的绘制命令添加到路径中，实现了手势绘制的功能。