报了360前端实习生的岗,除了测评、考试外还要做个大作业 25号考的技术综合的选择题简直让我开始怀疑人生哇 ╥﹏╥ 然后大作业我拿到的题目就是介个,实现手势密码的输入以及验证
graph TD
A[根据原型图拆分布局]
A --> | top-bar | B[顶部标题]
A --> | canvas | C[手势绘制区域]
A --> | Msg | D[提示信息]
A --> | radio-group | E[单选按钮组]
在viewport完美视口下,固定div高度,宽度100%,文字居中则能完成适配~
这里让绘制区域宽度去自适应,控制变量法嘛~
- 设置默认属性。包括图形区域与屏幕的边距、圆半径、canvas高度(offsetX、offsetY、R、CanvasHeight)
- 动态获取窗口可见宽度作为canvas宽度,计算圆的间隔距离
- 根据上述参数计算九个点的原点位置
- 绘制九个圆点
- 绑定touch三个事件并响应。绘制密码记录在LinePoint数组里
- touchstart 时判断当前触摸点和圆点的距离是否小于圆的半径,如果为真则记录当前圆点
- touchmove 同样判断触摸点与圆点距离,并在绘制过程中根据记录数据绘制线条
- touchend 判断绘制密码是否符合规范,并根据单选框状态做出相应事件相应
不同状态下提示用户操作
未选择任一按钮时,提示用户选择
- 设置密码
- 首次输入时,记录首次绘制密码
- 二次输入时,判断是否匹配首次绘制密码。若匹配,则存入localStorage或Cookie
- 验证密码
- 从localStorage或Cookie获取到密码,判断是否匹配
- 未获取到密码,输出提示
若中途变更单选按钮,重置临时存储的绘制密码及判断是否首次输入的状态,防止误操作可能出现的bug~