用B4A来做常见的九宫格解锁界面，稍琢磨了下思路，发现实现过程并不复杂，在国庆长假的最后一天，动手尝试了一下，效果还不错。
总的思路：屏幕上绘制3×3的九个节点，一个节点代表一个数字，如1-9，按手指在屏幕上划过节点的先后次序组合得到用户输入的密码字符串，与设定存储的密码字符串比对，相同则验证通过，不同则验证失败。具体实现中几处关键地方小结如下，和大家分享交流：
1.屏幕布局：采用三层Panel叠加，底层绘制3×3九宫格节点，作为背景，中间一层绘制用户操作时实际触碰的节点与节点连线，最上面一层绘制跟随用户手势变化时的指示线段，即“橡皮筋”效果。
2.动作捕捉：借助Panel的Touch事件，实时获取手指按下、移动、离开的状态与座标值。
3.节点与连线判断：手指处于哪个节点区域，可通过目标节点圆心点的座标与手指触碰点处x,y值比较分析做出判断，如节点圆圈区域半径为25dip,那么凡两者相减后的绝对值小于或等于此数值的就可判断手指位于该目标节点区域内，如为提高识别效率，也可适当增大此比较值；两个节点间是否能连线则由两节点间距离以及结合节点的座标判断。经过分析，符合连线条件的情况有以下几种情况：平行短节点，平行长节点，垂直短节点，垂直长节点，斜线短节点，斜线长节点，交错短节点（横、竖），交错长节点（横、竖）。示意图见附件2。（知识补充：对两点间距离计算请百度中学所学公式。
）
4.“橡皮筋”效果：实时跟随手指的线段动画效果，实现的关键点在于根据实时座标不断重绘与擦除由起始节点到手指触碰处的连线。绘制连线用Canvas的DrawLine方法，清除用Panel的SetBackgroundImage方法，置为Null。
5.数据结构设计：自定义一个数据结构，用来存储9个节点的座标值和是否已连线状态，如Type NG (ID As Int,PointX As Float,PointY As Float,IsLink As Boolean)，然后定义一个该类型的数组，然后根据情况进行初始化、赋值，过程中改变相应数值。
6.其他细节：用户输入图案密码后，重绘以某一种色彩突显轨迹，如正确时用绿色，错误时用红色并使手机振动。
总的思路：屏幕上绘制3×3的九个节点，一个节点代表一个数字，如1-9，按手指在屏幕上划过节点的先后次序组合得到用户输入的密码字符串，与设定存储的密码字符串比对，相同则验证通过，不同则验证失败。具体实现中几处关键地方小结如下，和大家分享交流：
1.屏幕布局：采用三层Panel叠加，底层绘制3×3九宫格节点，作为背景，中间一层绘制用户操作时实际触碰的节点与节点连线，最上面一层绘制跟随用户手势变化时的指示线段，即“橡皮筋”效果。
2.动作捕捉：借助Panel的Touch事件，实时获取手指按下、移动、离开的状态与座标值。
3.节点与连线判断：手指处于哪个节点区域，可通过目标节点圆心点的座标与手指触碰点处x,y值比较分析做出判断，如节点圆圈区域半径为25dip,那么凡两者相减后的绝对值小于或等于此数值的就可判断手指位于该目标节点区域内，如为提高识别效率，也可适当增大此比较值；两个节点间是否能连线则由两节点间距离以及结合节点的座标判断。经过分析，符合连线条件的情况有以下几种情况：平行短节点，平行长节点，垂直短节点，垂直长节点，斜线短节点，斜线长节点，交错短节点（横、竖），交错长节点（横、竖）。示意图见附件2。（知识补充：对两点间距离计算请百度中学所学公式。
）4.“橡皮筋”效果：实时跟随手指的线段动画效果，实现的关键点在于根据实时座标不断重绘与擦除由起始节点到手指触碰处的连线。绘制连线用Canvas的DrawLine方法，清除用Panel的SetBackgroundImage方法，置为Null。
5.数据结构设计：自定义一个数据结构，用来存储9个节点的座标值和是否已连线状态，如Type NG (ID As Int,PointX As Float,PointY As Float,IsLink As Boolean)，然后定义一个该类型的数组，然后根据情况进行初始化、赋值，过程中改变相应数值。
6.其他细节：用户输入图案密码后，重绘以某一种色彩突显轨迹，如正确时用绿色，错误时用红色并使手机振动。
Last edited:
