在HarmonyOS NEXT 中 实现手写签字功能，包括回退、保存等信息的方法？

Question

在HarmonyOS NEXT 中 实现手写签字功能，包括回退、保存等信息的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

解决方案，参考demo：

@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 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。