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
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.