UWP 手势密码实现
UWP 手势密码实现
通过在画布canvas上绘制实现手势密码:
主要问题:
1. 图形绘制
- 实心圆
- 空心圆
- 线段
2. Touch事件处理
- ManipulationStarted
- ManipulationDelta
- ManipulationCompleted
3. 各个圆坐标计算
4. 圆圈的选中逻辑
- 判断点是否在圆内
- 判断选中的两个圆心连线是否经过一个圆,如果是则该圆也是选中
Xaml布局:
1<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#
1 using MyPassword.Utils; 2 using System; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Numerics; 7 using System.Runtime.InteropServices.WindowsRuntime; 8 using Windows.Foundation; 9 using Windows.Foundation.Collections; 10 using Windows.UI; 11 using Windows.UI.Xaml; 12 using Windows.UI.Xaml.Controls; 13 using Windows.UI.Xaml.Controls.Primitives; 14 using Windows.UI.Xaml.Data; 15 using Windows.UI.Xaml.Input; 16 using Windows.UI.Xaml.Media; 17 using Windows.UI.Xaml.Navigation; 18 19 // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236 20 21 namespace MyPassword.UWP.Control 22 { 23 public sealed partial class GesturePassword : UserControl 24 { 25 26 private const int Circle_R = 20; 27 private const int Distance = 40; 28 private const int Circle_r = 3; 29 30 private const int Length = 3 * Circle_R * 2 + Distance * 2; 31 32 private double ViewWidth = 0; 33 private double ViewHight = 0; 34 private double MyPadding = 0; 35 36 private int X_Zero = 0; 37 private int Y_Zero = 0; 38 39 40 private List<Vector2> pointList = new List<Vector2>(); 41 42 private List<Vector2> checkedList = new List<Vector2>(); 43 44 private List<Vector2> drawList = new List<Vector2>(); 45 46 private List<int> indexList = new List<int>(); 47 48 public delegate void CheckCompeleteDelegate(List<int> checkList); 49 50 private CheckCompeleteDelegate _CheckCompeleteDelegate; 51 52 public event CheckCompeleteDelegate CheckCompeleteEvent 53 { 54 add 55 { 56 _CheckCompeleteDelegate = Delegate.Combine(_CheckCompeleteDelegate, value) as CheckCompeleteDelegate; 57 } 58 remove 59 { 60 _CheckCompeleteDelegate = Delegate.Remove(_CheckCompeleteDelegate, value) as CheckCompeleteDelegate; 61 } 62 } 63 64 public GesturePassword() 65 { 66 this.InitializeComponent(); 67 Loaded += GesturePassword_Loaded; 68 Unloaded += GesturePassword_Unloaded; 69 } 70 71 72 73 74 private void GesturePassword_Loaded(object sender, RoutedEventArgs e) 75 { 76 canvas.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY; 77 canvas.ManipulationCompleted += Canvas_ManipulationCompleted; 78 canvas.ManipulationDelta += Canvas_ManipulationDelta; 79 canvas.ManipulationStarted += Canvas_ManipulationStarted; 80 } 81 82 83 84 private double touch_x = 0; 85 private double touch_y = 0; 86 87 private void Canvas_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) 88 { 89 touch_x = e.Position.X; 90 touch_y = e.Position.Y; 91 ProcessTouchEvent(touch_x, touch_y); 92 } 93 94 private void Canvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) 95 { 96 touch_x = e.Position.X; 97 touch_y = e.Position.Y; 98 ProcessTouchEvent(touch_x,touch_y); 99 } 100 101 private void Canvas_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) 102 { 103 104 GetCheckedIndex(); 105 if (_CheckCompeleteDelegate != null) 106 { 107 _CheckCompeleteDelegate.Invoke(indexList); 108 } 109 Reset(); 110 } 111 112 private void GetCheckedIndex() 113 { 114 indexList.Clear(); 115 //DebugUtil.WriteLine("Count == " + checkedList.Count); 116 foreach (var item in checkedList) 117 { 118 int index = pointList.IndexOf(item); 119 indexList.Add(index); 120 //DebugUtil.WriteLine("index == " +index); 121 } 122 //DebugUtil.WriteLine("Size == " + indexList.Count); 123 } 124 125 126 private void ProcessTouchEvent(double x,double y) 127 { 128 if (x < 0 || y < 0 || x > 320 || y > 320) 129 { 130 131 } 132 else 133 { 134 Vector2 item = CheckRange(x, y, out bool isIn); 135 if (isIn && !IsAdded(item)) 136 { 137 if (checkedList.Count > 0) 138 { 139 var item2 = checkedList.Last(); 140 foreach (Vector2 v in pointList) 141 { 142 if (item != v && !IsAdded(v) && CheckOnLine(item, item2, v)) 143 { 144 checkedList.Add(v); 145 } 146 } 147 } 148 checkedList.Add(item); 149 } 150 else 151 { 152 drawList.Clear(); 153 drawList.AddRange(checkedList); 154 drawList.Add(item); 155 } 156 canvas.Invalidate(); 157 } 158 } 159 160 /// <summary> 161 /// 判断 v 是否在 v1、v2连线内 用了最粗暴的方法 162 /// </summary> 163 /// <param name="v1"></param> 164 /// <param name="v2"></param> 165 /// <param name="v"></param> 166 /// <returns></returns> 167 private bool CheckOnLine(Vector2 v1,Vector2 v2,Vector2 v) 168 { 169 double len = CalcLengthBetweenTwoPoint(v1,v2); 170 double len1 = CalcLengthBetweenTwoPoint(v1, v); 171 double len2 = CalcLengthBetweenTwoPoint(v2, v); 172 return len == len1 + len2; 173 } 174 175 /// <summary> 176 /// 计算v1、v2连线长度 177 /// </summary> 178 /// <param name="v1"></param> 179 /// <param name="v2"></param> 180 /// <returns></returns> 181 private double CalcLengthBetweenTwoPoint(Vector2 v1, Vector2 v2) 182 { 183 double value = Math.Pow(v1.X - v2.X, 2.0) + Math.Pow(v1.Y - v2.Y, 2.0); 184 //return value; 185 return Math.Abs(Math.Sqrt(value)); 186 } 187 188 /// <summary> 189 /// 判断x、y 是否在其中一个圆内 190 /// </summary> 191 /// <param name="x"></param> 192 /// <param name="y"></param> 193 /// <param name="isIn"></param> 194 /// <returns></returns> 195 private Vector2 CheckRange(double x ,double y,out bool isIn) 196 { 197 foreach (Vector2 v in pointList) 198 { 199 if (IsInCircle(x, y, v) && !IsAdded(v)) 200 { 201 isIn = true; 202 return v; 203 } 204 } 205 isIn = false; 206 return new Vector2 { X = (int)x,Y = (int)y}; 207 208 } 209 210 /// <summary> 211 /// 判断x、y 是否在 v 为圆心 Circle_R 为半径的圆内 212 /// </summary> 213 /// <param name="x"></param> 214 /// <param name="y"></param> 215 /// <param name="v"></param> 216 /// <returns></returns> 217 private bool IsInCircle(double x, double y,Vector2 v) 218 { 219 return Math.Pow(x - v.X, 2.0) + Math.Pow(y - v.Y, 2.0) <= Math.Pow(Circle_R, 2.0); 220 } 221 222 /// <summary> 223 /// 判断item 是否已经选中 224 /// </summary> 225 /// <param name="item"></param> 226 /// <returns></returns> 227 private bool IsAdded(Vector2 item) 228 { 229 return checkedList.Contains(item); 230 } 231 232 /// <summary> 233 /// 初始化 原始数据 234 /// </summary> 235 private void InitPointList() 236 { 237 int deta_x = 0; 238 int deta_y = 0; 239 int x = 0; 240 int y = 0; 241 for (int i = 0; i < 9; i++) 242 { 243 deta_x = i % 3; 244 deta_y = i / 3; 245 x = X_Zero + deta_x * (Distance + 2 * Circle_R); 246 y = Y_Zero + deta_y * (Distance + 2 * Circle_R); 247 248 pointList.Add(new Vector2 249 { 250 X = x, 251 Y = y 252 }); 253 254 } 255 } 256 257 258 private void Canvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args) 259 { 260 261 int size = pointList.Count; 262 for (int i = 0; i < size; i++)//绘制元素点图 263 { 264 Vector2 item = pointList.ElementAt(i); 265 args.DrawingSession.DrawCircle(item,Circle_R, Colors.Blue,3); 266 args.DrawingSession.DrawCircle(item, 0, Colors.Blue, 6); 267 } 268 size = drawList.Count; 269 for (int i = 0; i < size; i++)//绘制选中点图 270 { 271 Vector2 item = drawList.ElementAt(i); 272 args.DrawingSession.DrawCircle(item, 0, Colors.Red, 6); 273 if (i < size - 1) 274 { 275 Vector2 item2 = drawList.ElementAt(i+1); 276 args.DrawingSession.DrawLine(item, item2, Colors.Red, 3); 277 args.DrawingSession.DrawCircle(item, Circle_R, Colors.Red, 3); 278 } 279 } 280 } 281 282 private void GesturePassword_Unloaded(object sender, RoutedEventArgs e) 283 { 284 canvas.RemoveFromVisualTree(); 285 canvas = null; 286 } 287 288 private void Canvas_Loaded(object sender, RoutedEventArgs e) 289 { 290 ViewWidth = canvas.ActualWidth; 291 ViewHight = canvas.ActualHeight; 292 MyPadding = (ViewWidth - Length) / 2; 293 X_Zero = (int)MyPadding + Circle_R; 294 Y_Zero = (int)MyPadding + Circle_R; 295 InitPointList(); 296 } 297 298 public void Reset() 299 { 300 checkedList.Clear(); 301 drawList.Clear(); 302 canvas.Invalidate(); 303 } 304 } 305 }