关于Harmony 实现签名画板功能 讲解

涉及到鸿蒙技术知识

1. 手势事件处理

2.自定控件的绘制（android开发的 了解起来不难 ，就是画布canvas 的操作）

参考资料如下

canvas.jpg

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-components-canvas-canvas-0000001427744852-V3

1679055019423.jpg

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-gesture-settings-0000001281361142#ZH-CN_TOPIC_0000001281361142__%E5%93%8D%E5%BA%94%E6%89%8B%E5%8A%BF%E4%BA%8B%E4%BB%B6

直接看效果

image.png

1。 手势监听 平移事件

主要通过平移事件回调 获取移动的坐标轴 x y，提供给canvas下一步的绘制笔画。

注意：这里最新鸿蒙api9文档说明中 并没有标明 PanGesture（平移手势）的相关回调数据（坐标轴xy）在哪 ，通过执行打印log 发现 在event中 event.localx .event.localy, 但文档却没有说明 ，需要注意，别用错了

image.png image.png

2. 通过canvas的path功能 将PanGesture事件移动的坐标 不断绘制成一条线

image.png

相关代码块如下

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  private settings: RenderingContextSettings = new RenderingContextSettings(false)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State url: string = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAZmCAYAAABNCxQhAAAABHNCSVQICAgIfAhkiAAAIABJREFUeJzs3U1OXMkWhdGwZbnH/AdKzx1XoywMBpLMe+NGnJ+1RpCvEE/7fIo0YwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"

  build() {
    Row() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('70%')
          .backgroundColor(Color.Yellow)
          .onReady(() => {
            this.context.strokeStyle = "#fffa0d0d"
            this.context.lineWidth = 10
          })
          .gesture(PanGesture().onActionStart(event => {
            console.log("onActionStart() ")
            this.context.beginPath()
            // @ts-ignore
            this.context.moveTo(event.localX, event.localY)

          }).onActionUpdate(event => {
            console.log("onActionUpdate() ")
            //          console.log("onActionUpdate() " + JSON.stringify(event))
            // @ts-ignore
            //          console.log("onActionUpdate() localX" + event.localX)
            // @ts-ignore
            //          console.log("onActionUpdate() localY" + event.localY)
            // @ts-ignore
            this.context.lineTo(event.localX, event.localY)

            this.context.stroke()
            this.context.beginPath()
            // @ts-ignore
            this.context.moveTo(event.localX, event.localY)
            // @ts-ignore
            this.context.lineTo(event.localX, event.localY)
            this.context.stroke()


          }).onActionEnd(event => {
            console.log("onActionEnd() ")
            this.context.stroke()

          }), GestureMask.Normal)
        Button("保存").onClick((event: ClickEvent) => {
          try {
            let image = this.context.getImageData(0, 0, this.context.width, this.context.height)
            console.log("save() " + JSON.stringify(image))
            let url = this.context.toDataURL("image/png", 0.5)
            console.log("save() url" + url)
            this.url = url;

          } catch (e) {
            console.log("save() catch() e" + JSON.stringify(e))

          }


        })
        Image(this.url)
          .width(160)
          .height(160)
        /*保存*/
      }.width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

基本的功能已经实现 ，存在缺点是 在模拟机测试有些卡顿，真机有待测试。