HarmonyOS 司机签字页

@Entry
@Component
struct Demo3 {
  context: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(new RenderingContextSettings(true)) //签字区域
  guessContext: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(new RenderingContextSettings(true)) //自动生成图片画布
  drawIng: boolean = false
  lastX: number = 0
  lastY: number = 0
  gLastX: number = 0
  gLastY: number = 0
  pointList: PointClass[] = []
  timer: number = -1
  @State imgStr: string = ""

  drawLine(x: number, y: number) {
    this.context.moveTo(this.lastX,
      this.lastY) // 先将线移动到上一个点
    this.context.lineTo(x, y)
    this.lastX = x // 将当前内容的x记录
    this.lastY = y // 将当前的y记录
    this.context.stroke()
  }

  drawGuess() {
    if (this.pointList.length && this.timer === -1) {
      this.timer = setInterval(() => {
        if (this.pointList.length === 0) {
          clearInterval(this.timer)
          this.timer = -1
          return
        }
        let pt1: PointClass = this.pointList.shift() as PointClass
        this.guessLine(pt1)
      }, 100)
    }
  }

  guessLine(p: PointClass) {
    if (p.reset) {
      this.guessContext.closePath()
      this.guessContext.beginPath()
      this.gLastX = p.x
      this.gLastY = p.y
    } else {
      this.guessContext.moveTo(this.gLastX,
        this.gLastY) // 先将线移动到上一个点
      this.guessContext.lineTo(p.x, p.y)
      this.gLastX = p.x // 将当前内容的x记录
      this.gLastY = p.y // 将当前的y记录
      this.guessContext.stroke()
    }
  }

  transFile() {
  }

  build() {
    Scroll() {
      Column({ space: 20 }) {
        Canvas(this.context)
          .width(360)
          .height(300)
          .backgroundColor(Color.Grey)
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Down) {
              this.lastX = event.touches[0].x
              this.lastY = event.touches[0].y
              this.drawIng = true
              this.context.beginPath()
              this.pointList.push({ x: this.lastX, y: this.lastY, reset: true })
            }
            if (event.type === TouchType.Move) {
              if (this.drawIng) {
                this.pointList.push({ x: event.touches[0].x, y: event.touches[0].y, reset: false })
                this.drawLine(event.touches[0].x, event.touches[0].y)
              }
            }
            if (event.type === TouchType.Up) {
              this.drawIng = false
              this.context.closePath()
            } // 开始模仿
            this.drawGuess()
          })
          .onReady(() => {
            this.context.lineWidth = 4
            this.context.strokeStyle = "blue"
          })
        Canvas(this.guessContext).width(360).height(300).backgroundColor(Color.Red).onReady(() => {
          this.guessContext.lineWidth = 4
          this.guessContext.strokeStyle = "#fff"
        })
        Row({ space: 20 }) {
          Button("清屏").onClick(() => {
            this.context.clearRect(0, 0, 360, 300)
            this.guessContext.clearRect(0, 0, 360, 300)
            this.pointList = []
          })
          Button("存储图片").onClick(() => {
            this.imgStr = this.context.toDataURL("image/jpeg")
            console.info('图片开始存储' + this.imgStr)
          })
        }

        if (this.imgStr) {
          Image(this.imgStr).width(360).height(300)
        }
      }
    }
  }
}

class PointClass {
  x: number = 0
  y: number = 0
  reset?: boolean = false
}