WPF实现手势解锁

WPF实现手势解锁

桌面程序的解锁方式一般是账号密码,互联网的可以使用扫码解锁,甚至人脸识别。但扫码需要网络,人脸识别又较复杂。所以就想把安卓常用的手势解锁移植到桌面程序上。

先来张效果图,有兴趣的往下看,没兴趣的打扰了。

WPF实现手势解锁

WPF手势解锁使用鼠标点击事件,鼠标移动事件,鼠标弹起事件实现。自定义了三个属性(初始化颜色,选中颜色,选中点的集合),一个事件(绘制完成后触发的事件)。

实现的功能:

  绘制过程中直线随鼠标移动的效果

  绘制两个连接点的连线

  绘制完成后可调用的事件

  实现初始化颜色,选中颜色,选择连接点依赖属性

源码主要说明:

1.构造函数,完成事件注册

WPF实现手势解锁

2.窗体加载事件

绘制九宫格,tag用动态类型保存了实际位置(Point)和序号(Loaction)

WPF实现手势解锁

3.鼠标左键点击事件

3.1清空了除九宫格之外所有元素

3.2判断点击位置是否是圆点位置,如果不是则不处理,否则记录当前位置用于画线,一条是跟踪鼠标的线(currentLine),另一个是为了显示选中的圆点的连线,此处记录绘制线的第一个点(currentEllipse与后续经过的点的连线).

WPF实现手势解锁

4.鼠标移动事件

4.1绘制跟随鼠标的线

4.2判断是否经过之前没经过的圆点,绘线过程中,一个点只能用一次。经过的点保存在ellipseList集合中。

4.3如果经过未曾经过的点,则与上个经过的点绘制直线,并且重新赋值当前点currentEllipse,重新定义跟随鼠标的线(currentLine)的起始点为该点。

4.4把点添加到Points集合中

WPF实现手势解锁
WPF实现手势解锁

5.鼠标左键弹起事件

5.1鼠标弹起时,修改所有经过的点以及点之间的连线颜色。

5.2清空所有使用的临时的变量,currentEllipse,currentLine

5.3触发绘制后触发的事件(AfterDraw)

WPF实现手势解锁

6.选中点和线的颜色,SelectedColor属性

设置该颜色时,需要同时修改选中的点和线的颜色。

WPF实现手势解锁

7.绘制用的点的集合Points

绑定Points属性,后台就可以获取到绘制图案经历的点的集合。

8.其他代码

其他包含初始颜色,绘制完成以后触发的事件,以及使用到的变量。见源码。

9.利用该控件实现解锁

9.1绑定三个属性一个事件,分别是初始化颜色(Color),选中的颜色(SelectedColor),经过的点(Points)

9.2SelectedColor绑定方式

需要一个转换器(验证正确与否与颜色的转换),如果验证正确,则显示绿色,否则显示红色。

9.3如果连接的点太少时,则需进行提示,并且恢复原来的状态(即把选中的颜色设置为初始化的颜色)

参考:https://www.cnblogs.com/ShenNan/p/5587009.html

源码:没找到上传附件,附上码云地址。

https://gitee.com/yiyecao/temporary-components

本文转载自博客园:https://www.cnblogs.com/yiyecao/p/13627233.html

原文出处:博客园【yiyecao】

原文链接:https://www.cnblogs.com/yiyecao/p/13627233.html

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论