#夏日挑战赛# HarmonyOS - 实现签名功能 原创 精华
中软HOS小鸿
发布于 2022-7-26 10:19
浏览
2收藏
作者:范颖
前言
我刚接触HarmonyOS不久,接触到了很多不一样的东西。虽然遇到了很多问题,但学习本来就不是一蹴而就的,所以我决定从简单到复杂,所以这次我分享一个用canvas实现的签字效果。
效果展示
实现功能
签字效果的实现,以及签字相关的预览、撤销、清空等功能,目前还在学习HarmonyOS中,更多的功能还没有完善出来,后续我会对这个功能不断地完善。
实现思路
- hml代码如下
- css样式如下
- index.js中data的数据
- 实现签字效果
在onShow生命周期里面初始化canvas画布,其中getBoundingClientRect方法是获取元素的大小及其相对于窗口的位置,ctx是画布对象。
- touchStart、touchMove、touchEnd函数以及draw函数实现签字效果。通过touch事件获取当前的坐标值,然后通过canvas的绘制路径的API来绘制经过的路径,每执行完一次touch事件把当前的画布记录下来供后面的撤销等功能用。
属性值
属性 | 描述 |
---|---|
moveTo() | 路径从当前点移动到指定点 |
lineTo() | 从当前点到指定点进行路径连接 |
lineCap | 属性设置或返回线条末端线帽的样式 |
lineJoin | 属性设置或返回所创建边角的类型,当两条线交汇时 |
lineWidth | 线条的宽度 |
strokeStyle | 设置描边的颜色 |
stroke | 进行边框绘制操作 |
- 实现撤销效果(根据storageStep中的数据来显示画布的信息,其中数据已经在touchEnd函数中保存)
- 实现清空效果 - 清空storageStep数组中的所有数据。
- 实现预览效果。预览效果就是把画布信息转化为base64,用到了toDataURL方法,返回一个包含图片展示的 data URI。
注意:
我在写这个效果的过程当中发现canvas中有一些函数需要较高的JS API版本才能实现,比如getBoundingClientRect和toDataURL函数,它们所支持的版本为JS API6及以上。如果版本过低,这两个函数会报错。该签名效果是在P40 pro上模拟成功的。
总结
以上就是我实现签名效果的全部内容,最终效果如动图所示。虽然样式比较简陋,但是目前已经实现了签名的基本功能,后续我会不断地完善与改进,争取写出更完整优美的demo。欢迎大家一起研究讨论,希望本次内容能够对大家有所帮助。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-26 10:20:27修改
赞
7
收藏 2
回复
7
2
2
相关推荐
签名是否美观除了看签名的功能是否完善,更多的还是要看个人签名是否熟练了。
是这样没错了