UWP 手势密码实现

UWP 手势密码实现

通过在画布canvas上绘制实现手势密码：

主要问题：

1. 图形绘制

• 实心圆
• 空心圆
• 线段

2. Touch事件处理

• ManipulationStarted
• ManipulationDelta
• ManipulationCompleted

3. 各个圆坐标计算

4. 圆圈的选中逻辑

• 判断点是否在圆内
• 判断选中的两个圆心连线是否经过一个圆，如果是则该圆也是选中

Xaml布局：

<UserControl2x:Class="MyPassword.UWP.Control.GesturePassword"3xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"4xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"5xmlns:local="using:MyPassword.UWP.Control"6xmlns:d="http://schemas.microsoft.com/expression/blend/2008"7xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"8mc:Ignorable="d"9xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"10d:DesignHeight="300"11d:DesignWidth="400">1213<GridBackground="Transparent">14<canvas:CanvasControlx:Name="canvas"Draw="Canvas_Draw"Loaded="Canvas_Loaded"></canvas:CanvasControl>15</Grid>16</UserControl>

C#

using MyPassword.Utils;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Numerics;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace MyPassword.UWP.Control
{
    public sealed partial class GesturePassword : UserControl
    {

        private const int Circle_R = 20;
        private const int Distance = 40;
        private const int Circle_r = 3;

        private const int Length = 3 * Circle_R * 2 + Distance * 2;

        private double ViewWidth = 0;
        private double ViewHight = 0;
        private double MyPadding = 0;

        private int X_Zero = 0;
        private int Y_Zero = 0;
        

        private List<Vector2> pointList = new List<Vector2>();

        private List<Vector2> checkedList = new List<Vector2>();

        private List<Vector2> drawList = new List<Vector2>();

        private List<int> indexList = new List<int>();

        public delegate void CheckCompeleteDelegate(List<int> checkList);

        private CheckCompeleteDelegate _CheckCompeleteDelegate;

        public event CheckCompeleteDelegate CheckCompeleteEvent
        {
            add
            {
                _CheckCompeleteDelegate = Delegate.Combine(_CheckCompeleteDelegate, value) as CheckCompeleteDelegate;
            }
            remove
            {
                _CheckCompeleteDelegate = Delegate.Remove(_CheckCompeleteDelegate, value) as CheckCompeleteDelegate;
            }
        }

        public GesturePassword()
        {
            this.InitializeComponent();
            Loaded += GesturePassword_Loaded;
            Unloaded += GesturePassword_Unloaded;
        }


        

        private void GesturePassword_Loaded(object sender, RoutedEventArgs e)
        {
            canvas.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
            canvas.ManipulationCompleted += Canvas_ManipulationCompleted;
            canvas.ManipulationDelta += Canvas_ManipulationDelta;
            canvas.ManipulationStarted += Canvas_ManipulationStarted;
        }

      

        private double touch_x = 0;
        private double touch_y = 0;

        private void Canvas_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            touch_x = e.Position.X;
            touch_y = e.Position.Y;
            ProcessTouchEvent(touch_x, touch_y);
        }

        private void Canvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            touch_x = e.Position.X;
            touch_y = e.Position.Y;
            ProcessTouchEvent(touch_x,touch_y);
        }

        private void Canvas_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {

            GetCheckedIndex();
            if (_CheckCompeleteDelegate != null)
            {
                _CheckCompeleteDelegate.Invoke(indexList);
            }
            Reset();
        }

        private void GetCheckedIndex()
        {
            indexList.Clear();
            //DebugUtil.WriteLine("Count == " + checkedList.Count);
            foreach (var item in checkedList)
            {
                int index = pointList.IndexOf(item);
                indexList.Add(index);
                //DebugUtil.WriteLine("index == " +index);
            }
            //DebugUtil.WriteLine("Size == " + indexList.Count);
        }


        private void ProcessTouchEvent(double x,double y)
        {
            if (x < 0 || y < 0 || x > 320 || y > 320)
            {

            }
            else
            {
                Vector2 item = CheckRange(x, y, out bool isIn);
                if (isIn && !IsAdded(item))
                {
                    if (checkedList.Count > 0)
                    {
                        var item2 = checkedList.Last();
                        foreach (Vector2 v in pointList)
                        {
                            if (item != v && !IsAdded(v) && CheckOnLine(item, item2, v))
                            {
                                checkedList.Add(v);
                            }
                        }
                    }
                    checkedList.Add(item);
                }
                else
                {
                    drawList.Clear();
                    drawList.AddRange(checkedList);
                    drawList.Add(item);
                }
                canvas.Invalidate();
            }
        }

        /// <summary>
        /// 判断 v 是否在 v1、v2连线内  用了最粗暴的方法  
        /// </summary>
        /// <param name="v1"></param>
        /// <param name="v2"></param>
        /// <param name="v"></param>
        /// <returns></returns>
        private bool CheckOnLine(Vector2 v1,Vector2 v2,Vector2 v)
        {
            double len = CalcLengthBetweenTwoPoint(v1,v2);
            double len1 = CalcLengthBetweenTwoPoint(v1, v);
            double len2 = CalcLengthBetweenTwoPoint(v2, v);
            return len == len1 + len2;
        }

        /// <summary>
        /// 计算v1、v2连线长度
        /// </summary>
        /// <param name="v1"></param>
        /// <param name="v2"></param>
        /// <returns></returns>
        private double CalcLengthBetweenTwoPoint(Vector2 v1, Vector2 v2)
        {
            double value = Math.Pow(v1.X - v2.X, 2.0) + Math.Pow(v1.Y - v2.Y, 2.0);
            //return value;
            return Math.Abs(Math.Sqrt(value));
        }

        /// <summary>
        /// 判断x、y 是否在其中一个圆内
        /// </summary>
        /// <param name="x"></param>
        /// <param name="y"></param>
        /// <param name="isIn"></param>
        /// <returns></returns>
        private Vector2 CheckRange(double x ,double y,out bool isIn)
        {
            foreach (Vector2 v in pointList)
            {
                if (IsInCircle(x, y, v) && !IsAdded(v))
                {
                    isIn = true;
                    return v;
                }
            }
            isIn = false;
            return new Vector2 { X = (int)x,Y = (int)y};

        }

        /// <summary>
        /// 判断x、y 是否在 v 为圆心 Circle_R 为半径的圆内
        /// </summary>
        /// <param name="x"></param>
        /// <param name="y"></param>
        /// <param name="v"></param>
        /// <returns></returns>
        private bool IsInCircle(double x, double y,Vector2 v)
        {
            return Math.Pow(x - v.X, 2.0) + Math.Pow(y - v.Y, 2.0) <= Math.Pow(Circle_R, 2.0);  
        }

        /// <summary>
        /// 判断item 是否已经选中
        /// </summary>
        /// <param name="item"></param>
        /// <returns></returns>
        private bool IsAdded(Vector2 item)
        {
            return checkedList.Contains(item);
        }

        /// <summary>
        /// 初始化 原始数据
        /// </summary>
        private void InitPointList()
        {
            int deta_x = 0;
            int deta_y = 0;
            int x = 0;
            int y = 0;
            for (int i = 0; i < 9; i++)
            {
                deta_x = i % 3;
                deta_y = i / 3;
                x = X_Zero + deta_x * (Distance + 2 * Circle_R);
                y = Y_Zero + deta_y * (Distance + 2 * Circle_R);

                pointList.Add(new Vector2
                {
                    X = x,
                    Y = y
                });
                
            }
        }

        
        private void Canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {

            int size = pointList.Count;
            for (int i = 0; i < size; i++)//绘制元素点图
            {
                Vector2 item = pointList.ElementAt(i);
                args.DrawingSession.DrawCircle(item,Circle_R, Colors.Blue,3);
                args.DrawingSession.DrawCircle(item, 0, Colors.Blue, 6);
            }
            size = drawList.Count;
            for (int i = 0; i < size; i++)//绘制选中点图
            {
                Vector2 item = drawList.ElementAt(i);
                args.DrawingSession.DrawCircle(item, 0, Colors.Red, 6);
                if (i < size - 1)
                {
                    Vector2 item2 = drawList.ElementAt(i+1);
                    args.DrawingSession.DrawLine(item, item2, Colors.Red, 3);
                    args.DrawingSession.DrawCircle(item, Circle_R, Colors.Red, 3);
                }
            }
        }

        private void GesturePassword_Unloaded(object sender, RoutedEventArgs e)
        {
            canvas.RemoveFromVisualTree();
            canvas = null;
        }

        private void Canvas_Loaded(object sender, RoutedEventArgs e)
        {
            ViewWidth = canvas.ActualWidth;
            ViewHight = canvas.ActualHeight;
            MyPadding = (ViewWidth - Length) / 2;
            X_Zero = (int)MyPadding + Circle_R;
            Y_Zero = (int)MyPadding + Circle_R;
            InitPointList();
        }

        public void Reset()
        {
            checkedList.Clear();
            drawList.Clear();
            canvas.Invalidate();
        }
    }
}