OpenHarmony - 基于 ArkUI(JS)实现图案解锁组件(一) 原创 精华
作者:杨尚晓
前言
Openharmony作为我们国内开源系统,并且以js/ets最为开发语言,完全抛弃了java。作为一名前端开发人员,也需要为咱们国产系统壮大起来,所以贡献一份微薄之力。😄😄
项目介绍
ohos-pattern是一个解锁功能的组件,是基于openharmony AkrUI(JS)实现的。在手机指纹解锁还没来临之前,图案解锁是一个很热门的功能,包括数字解锁。不过现在也还很多应用场景中有使用到图案解锁和数字解锁的功能。本文图案解锁仅仅只是实现UI层面,并不涉及到加密解密的的方式。这个可以二次开发使用。
本文为第一篇,后续会更新加入数字解锁功能,如果后续能涉及到生物识别API,还会加入指纹解锁等三种解锁方式。
环境说明
- 开发工具:DevEco Studio 3.0 Beta4
- SDK版本:3.1.6.6(API Version 8)
- 主要组件:canvas
效果展示
组件属性
属性名 | 类型 | 默认值 | 作用 |
---|---|---|---|
radius | Number | 5 | 密码点半径[5-20] |
scope | Number | 20 | 热区范围[20-40] |
point-color | String | #383838 | 密码点内颜色 |
point-stroke-color | String | #ff9800 | 密码点边框颜色 |
active-color | String | #ff9800 | 激活密码点颜色 |
line-color | String | #1a73e8 | 密码线颜色 |
active-line-color | String | #04be02 | 激活密码线颜色 |
is-show-line | Boolean | true | 是否显示密码线 |
组件事件
属性名 | 类型 | 返回值 | 备注 |
---|---|---|---|
result-cb | Function | Array | 返回密码结果 |
引用组件
实现思路
实现思路比较简单,使用canvas绘制九个密码点,然后通过监听手势触摸和9个密码点的碰撞产生密码数据
- 创建canvas
- 绘制9个密码点
- 绘制可控区域(就是密码点跟随手指一动区域)
- 监听手势
实现过程
1. 创建canvas
创建canvas元素,并且绑定touchstart,touchmove,touchend手势事件
在js中初始化canvas对象
2. 绘制九个密码点
下面看个草图
从草图上可以看出我们的密码点位置了,这里使用for循环方法实现,创建3行,每行3个点。
这里有个注意点,因为我们密码点有一个需要跟随手势移动的需求,需要修改point_list的数据,所以使用point_list_copy复制了一份出来,这里使用es6的展开运算符…来实现深拷贝。
下面实现将9个密码点到画布上
下面来看看绘制后的效果
3. 监听手势和密码点的碰撞
我们写了三个手势事件
- 触摸开始 onTouchStart
- 触摸变化 onTouchMove
- 触摸结束 onTouchEnd
重绘画布
监听手势触摸是否和密码点发生碰撞
this.scope表示热区范围,当触摸点进入这个热区范围,说明已经跟该密码点发生接触碰撞了
当触摸点和密码点发生碰撞之后,需要给该密码点绘制触摸状态
下面看看效果
但是这样还不够,我们能还需要绘制连接的密码线
4. 绘制密码线
在重绘方法里最顶端加入绘制密码线方法
绘制密码线方法
这里需要绘制两条线:
- 一条是跟随触摸移动的线
- 一条是已经存在两点之间的线
好了,下面我们看看加上密码线的效果
5. 实现可移动的密码点
优化体验,增加了密码点跟随手势一起移动的效果。
在重绘的顶部添加绘制可移动的密码点方法
r_x,r_y表示密码点热区范围,在热区范围内可以将该密码点变为触摸点跟随触摸点一起移动,当触摸点离开了热区之后,密码点回到原来的中心位置。
最后来看看加上热区的效果
到这里,整个基本功能已经实现了。
最后再来看一下最终效果
代码地址
ohos-pattern 基于OpenHarmony JSAPI实现图案解锁组件
总结
该组件整体实现逻辑都比较简单,主要是通过手势去绘制canvas画布实现的,这里需要注意的是,api version需要7以上,因为在api version 6 之前,存在canvas重绘闪屏的情况,在api 7之后修复了这个问题。相比api 6之前的版本,api8真的优化和修复了很多功能。很期待harmongOS 3.0更新,可以在真机下去体验ets开发的应用。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
众人拾柴火焰高,Openharmony需要更多楼主这样的开发者!
感觉点的判定可以再大一点
Openharmony完全抛弃java的勇气还是值得学习
会有的
可以自己线下试一下,写一个自己定制的图案解锁组件
现在指纹解锁还没这么普及,图案解锁还是挺重要的
很nice
鸿蒙加油!
都挺重要
这个不错,很详细,也很实用