HarmonyOS 鸿蒙Next如何用笔画画

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private pointList: Point[] = [];

  build() {
    Column() {
      Canvas(this.context)
        .height('100%')
        .width('100%')
        .onTouch((event: TouchEvent) => {
          let posX: number = event.touches[0].x
          let posY: number = event.touches[0].y

          if (event.type === TouchType.Down) {
            // 路径从当前点移动到指定点
            this.context.moveTo(posX, posY);
            this.pointList.push(new Point(posX, posY));
          }

          if (event.type === TouchType.Move) {
            // 从当前点到指定点进行路径连接
            this.context.lineTo(posX, posY);
            // 进行边框绘制
            this.context.stroke();
            this.pointList.push(new Point(posX, posY));
          }

        })
        .onReady(() => {
          // 线条宽度
          this.context.lineWidth = 3
          // 描边颜色
          this.context.strokeStyle = '#0000ff'
          // 清除子路径并创建新路径
          this.context.beginPath()
        })
    }
  }
}

class Point {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

编译开发