100行代码实现HarmonyOS“画图”应用，eTS开发走起！ 原创

// 画布
  @Builder Canvas() {
    ForEach(this.pathInfoArray, (pathInfo) => OnePath({ pathInfo: pathInfo })) // 遍历构建所有画图路径
    Stack() // 覆盖层，用于接收触摸事件，实现画图
      .width('100%')
      .height('100%')
      .onTouch((event: TouchEvent) => {
        switch (event.type) {
          case TouchType.Down: // 按下时，新建一条画图路径
            this.pathInfoArray.push(new PathInfo(`M${event.touches[0].x} ${event.touches[0].y}`, this.paintSize, this.paintColor))
            break
          case TouchType.Move: // 移动或抬起时，补充画图路径信息
          case TouchType.Up:
            this.pathInfoArray[this.pathInfoArray.length-1].commands += `L${event.touches[0].x} ${event.touches[0].y}`
            break
        }
      })
  }

// 设置画笔组件
  @Builder SetPaint() {
    Panel(this.showSetPaint) {
      Column({ space: 30 }) {
        Row() {
          Text('画图效果：')
          Path()
            .width(200)
            .height(50)
            .backgroundColor(Color.White)
            .fillOpacity(0) // 不填充，只要stroke
            .commands(`M${vp2px(10)} ${vp2px(10)} S${vp2px(100)} ${vp2px(70)} ${vp2px(190)} ${vp2px(10)}`) // stroke路径，弧线
            .strokeWidth(this.paintSize) // stroke宽度
            .stroke(this.paintColor) // stroke颜色
        }


        Row() {
          Text('画笔大小：')
          Slider({ value: this.paintSize, min: this.PAINT_SIZE_MIN, max: this.PAINT_SIZE_MAX })
            .onChange((value) => this.paintSize = value) // 改变画笔大小
            .width(200)
        }


        Row() {
          Text('画笔颜色：')
          ForEach(this.COLORS, color => {
            Stack() {
              Stack()
                .width(color == this.paintColor ? 26 : 20) // 若是当前画笔颜色，则放大一点显示
                .height(color == this.paintColor ? 26 : 20)
                .backgroundColor(color)
                .onClick(() => this.paintColor = color) // 点击改变画笔颜色
            }
            .width(32)
            .height(32)
          })
        }
      }.width('100%').margin({ top: 30 })
    }.onChange((value: any) => {
      if (value.mode == 'mini') { // 最小显示状态时隐藏，不隐藏会阻挡触摸事件
        this.showSetPaint = false
      }
    })
  }