美文网首页鸿蒙
关于Harmony 实现签名画板功能 讲解

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

作者: 林下人水边兵 | 来源:发表于2023-03-16 20:35 被阅读0次

涉及到鸿蒙技术知识

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%')
  }
}

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

相关文章

  • ios开发实现画板功能

    ios开发实现画板功能 ios开发实现画板功能

  • ios 手写签名(生成图片)

    最近公司一个项目要用到一个手写签名的功能感觉非常有意思, 第一个想法就是类似于画板的功能, 如何实现ios画板请看...

  • iOS 签名涂鸦画板

    ZWGraphicView 签名涂鸦画板 功能 实际开发中主要用于手写签名及其它绘画涂鸦,最终生成图片,用于上传服...

  • flutter-画板签名,并生成图片

    今天实现一个可以签名的画板功能,并截屏生成图片,如下: 有问题随时交流, 对你有帮助的话, 帮忙点点小心心哦~

  • unity实现画板功能

    如题、公司想做早教方面的小游戏、文档中有连线需求 找了几个帖子、直接复制粘贴、运行、不是自己想要的功能、于是尝试改...

  • 画画板功能实现

    1 获取一张背景图片 BitmpFactory.decodeResource 2 创建一个副本 3 设置image...

  • 画板功能的实现

    最近项目中用到了一个客户签字的功能,具体步骤就是客户签字确认,App把客户的签字生成一张PNG图片上传到服务器,服...

  • android实现画板功能

    这两天闲来无事做了一个简易的画板程序,和大家分享一下。效果图: 这是一个灰常简单的画板,不过麻雀虽小,五脏俱全: ...

  • iOS 画板--UIBezierPath和CAShapeLaye

    iOS 画板--UIBezierPath和CAShapeLayer实现 最近在做的项目中,用到画板的功能,现在项目...

  • android各种效果库

    可能是最优雅的切换布局的方法 动态切换布局控件android 实现画板功能 本例详细分析了一个画板功能的实现过程,...

网友评论

    本文标题:关于Harmony 实现签名画板功能 讲解

    本文链接:https://www.haomeiwen.com/subject/xqydrdtx.html