你的位置:首页 > ASP.net教程

[ASP.net教程]WPF自定义控件之图形解锁控件 ScreenUnLock


ScreenUnLock 与智能手机上的图案解锁功能一样。通过绘制图形达到解锁或记忆图形的目的。

本人突发奇想,把手机上的图形解锁功能移植到WPF中。也应用到了公司的项目中。

在创建ScreenUnLock之前,先来分析一下图形解锁的实现思路。

1.创建九宫格原点(或更多格子),每个点定义一个坐标值

2.提供图形解锁相关扩展属性和事件,方便调用者定义。比如:点和线的颜色(Color),操作模式(Check|Remember),验证正确的颜色(RightColor), 验证失败的颜色(ErrorColor), 解锁事件 OnCheckedPoint,记忆事件 OnRememberPoint 等;

3.定义MouseMove事件监听画线行为。 画线部分也是本文的核心。在画线过程中。程序需判断,线条从哪个点开始绘制,经过了哪个点(排除已经记录的点)。是否完成了绘制等等。

4.画线完成,根据操作模式处理画线完成行为。并调用相关自定义事件

大致思路如上,下面开始一步一步编写ScreenUnLock吧

创建ScreenUnLock

public partial class ScreenUnlock : UserControl

定义相关属性

 1 /// <summary> 2     /// 验证正确的颜色 3     /// </summary> 4     private SolidColorBrush rightColor; 5  6     /// <summary> 7     /// 验证失败的颜色 8     /// </summary> 9     private SolidColorBrush errorColor;10 11     /// <summary>12     /// 图案是否在检查中13     /// </summary>14     private bool isChecking;15 16     public static readonly DependencyProperty PointArrayProperty = DependencyProperty.Register("PointArray", typeof(IList<string>), typeof(ScreenUnlock));17     /// <summary>18     /// 记忆的坐标点 19     /// </summary>20     public IList<string> PointArray21     {22       get { return GetValue(PointArrayProperty) as IList<string>; }23       set { SetValue(PointArrayProperty, value); }24     }25 26     /// <summary>27     /// 当前坐标点集合28     /// </summary>29     private IList<string> currentPointArray;30 31     /// <summary>32     /// 当前线集合33     /// </summary>34     private IList<Line> currentLineList;35 36     /// <summary>37     /// 点集合38     /// </summary>39     private IList<Ellipse> ellipseList;40 41     /// <summary>42     /// 当前正在绘制的线43     /// </summary>44     private Line currentLine;45 46     public static readonly DependencyProperty OperationPorperty = DependencyProperty.Register("Operation", typeof(ScreenUnLockOperationType), typeof(ScreenUnlock), new FrameworkPropertyMetadata(ScreenUnLockOperationType.Remember));47     /// <summary>48     /// 操作类型49     /// </summary>50     public ScreenUnLockOperationType Operation51     {52       get { return (ScreenUnLockOperationType)GetValue(OperationPorperty); }53       set { SetValue(OperationPorperty, value); }54     }55 56     public static readonly DependencyProperty PointSizeProperty = DependencyProperty.Register("PointSize", typeof(double), typeof(ScreenUnlock), new FrameworkPropertyMetadata(15.0));57     /// <summary>58     /// 坐标点大小 59     /// </summary>60     public double PointSize61     {62       get { return Convert.ToDouble(GetValue(PointSizeProperty)); }63       set { SetValue(PointSizeProperty, value); }64     }65 66 67     public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(SolidColorBrush), typeof(ScreenUnlock), new FrameworkPropertyMetadata(new SolidColorBrush(Colors.White), new PropertyChangedCallback((s, e) =>68     {69       (s as ScreenUnlock).Refresh();70     })));71 72     /// <summary>73     /// 坐标点及线条颜色74     /// </summary>75     public SolidColorBrush Color76     {77       get { return GetValue(ColorProperty) as SolidColorBrush; }78       set { SetValue(ColorProperty, value); }79     }

        /// <summary>
        /// 操作类型
        /// </summary>
        public enum ScreenUnLockOperationType
        {
            Remember = 0, Check = 1
        }



初始化ScreenUnLock

 public ScreenUnlock()    {      InitializeComponent();      this.Loaded += ScreenUnlock_Loaded;      this.Unloaded += ScreenUnlock_Unloaded;      this.MouseMove += ScreenUnlock_MouseMove; //监听绘制事件    } private void ScreenUnlock_Loaded(object sender, RoutedEventArgs e)    {      isChecking = false;      rightColor = new SolidColorBrush(Colors.Green);      errorColor = new SolidColorBrush(Colors.Red);      currentPointArray = new List<string>();      currentLineList = new List<Line>();      ellipseList = new List<Ellipse>();      CreatePoint();    }    private void ScreenUnlock_Unloaded(object sender, RoutedEventArgs e)    {      rightColor = null;      errorColor = null;      if (currentPointArray != null)        this.currentPointArray.Clear();      if (currentLineList != null)        this.currentLineList.Clear();      if (ellipseList != null)        ellipseList.Clear();      this.canvasRoot.Children.Clear();    }

创建点

 1 /// <summary> 2     /// 创建点 3     /// </summary> 4     private void CreatePoint() 5     { 6       canvasRoot.Children.Clear(); 7       int row = 3, column = 3; //三行三列,九宫格 8       double oneColumnWidth = (this.ActualWidth == 0 ? this.Width : this.ActualWidth) / 3; //单列的宽度 9       double oneRowHeight = (this.ActualHeight == 0 ? this.Height : this.ActualHeight) / 3;  //单列的高度10       double leftDistance = (oneColumnWidth - PointSize) / 2;  //单列左边距11       double topDistance = (oneRowHeight - PointSize) / 2;  //单列上边距12       for (var i = 0; i < row; i++)13       {14         for (var j = 0; j < column; j++)15         {16           Ellipse ellipse = new Ellipse()17           {18             Width = PointSize,19             Height = PointSize,20             Fill = Color,21             Tag = string.Format("{0}{1}", i, j)22           };23           Canvas.SetLeft(ellipse, j * oneColumnWidth + leftDistance);24           Canvas.SetTop(ellipse, i * oneRowHeight + topDistance);25           canvasRoot.Children.Add(ellipse);26           ellipseList.Add(ellipse);27         }28       }29     }

创建线

1  private Line CreateLine()2     {3       Line line = new Line()4       {5         Stroke = Color,6         StrokeThickness = 27       };8       return line;9     }

点和线都创建都定义好了,可以开始监听绘制事件了

 1 private void ScreenUnlock_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) 2     { 3       if (isChecking) //如果图形正在检查中,不响应后续处理 4         return; 5       if (e.LeftButton == System.Windows.Input.MouseButtonState.Pressed) 6       { 7         var point = e.GetPosition(this); 8         HitTestResult result = VisualTreeHelper.HitTest(this, point); 9         Ellipse ellipse = result.VisualHit as Ellipse;10         if (ellipse != null)11         {12           if (currentLine == null)13           {14             //从头开始绘制                                    15             currentLine = CreateLine();16             var ellipseCenterPoint = GetCenterPoint(ellipse);17             currentLine.X1 = currentLine.X2 = ellipseCenterPoint.X;18             currentLine.Y1 = currentLine.Y2 = ellipseCenterPoint.Y;19 20             currentPointArray.Add(ellipse.Tag.ToString());21             Console.WriteLine(string.Join(",", currentPointArray));22             currentLineList.Add(currentLine);23             canvasRoot.Children.Add(currentLine);24           }25           else26           {27             //遇到下一个点,排除已经经过的点28             if (currentPointArray.Contains(ellipse.Tag.ToString()))29               return;30             OnAfterByPoint(ellipse);31           }32         }33         else if (currentLine != null)34         {35           //绘制过程中36           currentLine.X2 = point.X;37           currentLine.Y2 = point.Y;38 39           //判断当前Line是否经过点40           ellipse = IsOnLine();41           if (ellipse != null)42             OnAfterByPoint(ellipse);43         }44       }45       else46       {47         if (currentPointArray.Count == 0)48           return;49         isChecking = true;50         if (currentLineList.Count + 1 != currentPointArray.Count)51         {52           //最后一条线的终点不在点上53           //两点一线,点的个数-1等于线的条数54           currentLineList.Remove(currentLine); //从已记录的线集合中删除最后一条多余的线55           canvasRoot.Children.Remove(currentLine); //从界面上删除最后一条多余的线56           currentLine = null;57         }58 59         if (Operation == ScreenUnLockOperationType.Check)60         {61           Console.WriteLine("playAnimation Check");62           var result = CheckPoint(); //执行图形检查
              //执行完成动画并触发检查事件63 PlayAnimation(result, () =>64 {65 if (OnCheckedPoint != null)66 {67 this.Dispatcher.BeginInvoke(OnCheckedPoint, this, new CheckPointArgs() { Result = result }); //触发检查完成事件68 }69 });70 71 }72 else if (Operation == ScreenUnLockOperationType.Remember)73 {74 Console.WriteLine("playAnimation Remember");75 RememberPoint(); //记忆绘制的坐标76 var args = new RememberPointArgs() { PointArray = this.PointArray };
             //执行完成动画并触发记忆事件77 PlayAnimation(true, () =>78 {79 if (OnRememberPoint != null)80 {81 this.Dispatcher.BeginInvoke(OnRememberPoint, this, args); //触发图形记忆事件82 }83 });84 }85 }86 }

判断线是否经过了附近的某个点

 1 /// <summary> 2     /// 两点计算一线的长度 3     /// </summary> 4     /// <param name="pt1"></param> 5     /// <param name="pt2"></param> 6     /// <returns></returns> 7     private double GetLineLength(double x1, double y1, double x2, double y2) 8     { 9       return Math.Sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); //根据两点计算线段长度公式 √((x1-x2)²x(y1-y2)²)10     }11 12     /// <summary>13     /// 判断线是否经过了某个点14     /// </summary>16     /// <param name="ellipse"></param>17     /// <returns></returns>18     private Ellipse IsOnLine()19     {20       double lineAB = 0; //当前画线的长度21       double lineCA = 0; //当前点和A点的距离 22       double lineCB = 0;  //当前点和B点的距离23       double dis = 0;24       double deciation = 1; //允许的偏差距离25       lineAB = GetLineLength(currentLine.X1, currentLine.Y1, currentLine.X2, currentLine.Y2); //计算当前画线的长度26 27       foreach (Ellipse ellipse in ellipseList)28       {29         if (currentPointArray.Contains(ellipse.Tag.ToString())) //排除已经经过的点30           continue;31         var ellipseCenterPoint = GetCenterPoint(ellipse); //取当前点的中心点32         lineCA = GetLineLength(currentLine.X1, currentLine.Y1, ellipseCenterPoint.X, ellipseCenterPoint.Y); //计算当前点到线A端的长度33         lineCB = GetLineLength(currentLine.X2, currentLine.Y2, ellipseCenterPoint.X, ellipseCenterPoint.Y); //计算当前点到线B端的长度34         dis = Math.Abs(lineAB - (lineCA + lineCB)); //线CA的长度+线CB的长度>当前线AB的长度 说明点不在线上35         if (dis <= deciation) //因为绘制的点具有一个宽度和高度,所以需设定一个允许的偏差范围,让线靠近点就命中之(吸附效果)36         {37           return ellipse;38         }39       }40       return null;41     }

检查点是否正确,按数组顺序逐个匹配之

 1      /// <summary> 2     /// 检查坐标点是否正确 3     /// </summary> 4     /// <returns></returns> 5     private bool CheckPoint() 6     {  
         //PointArray:正确的坐标值数组
        //currentPointArray:当前绘制的坐标值数组 7 if (currentPointArray.Count != PointArray.Count) 8 return false; 9 for (var i = 0; i < currentPointArray.Count; i++)10 {11 if (currentPointArray[i] != PointArray[i])12 return false;13 }14 return true;15 }

记录经过点,并创建一条新的线

 1     /// <summary> 2     /// 记录经过的点 3     /// </summary> 4     /// <param name="ellipse"></param> 5     private void OnAfterByPoint(Ellipse ellipse) 6     { 7       var ellipseCenterPoint = GetCenterPoint(ellipse); 8       currentLine.X2 = ellipseCenterPoint.X; 9       currentLine.Y2 = ellipseCenterPoint.Y;10       currentLine = CreateLine();11       currentLine.X1 = currentLine.X2 = ellipseCenterPoint.X;12       currentLine.Y1 = currentLine.Y2 = ellipseCenterPoint.Y;13       currentPointArray.Add(ellipse.Tag.ToString());14       Console.WriteLine(string.Join(",", currentPointArray));15       currentLineList.Add(currentLine);16       canvasRoot.Children.Add(currentLine);17     }  

 1     /// <summary> 2     /// 获取原点的中心点坐标 3     /// </summary> 4     /// <param name="ellipse"></param> 5     /// <returns></returns> 6     private Point GetCenterPoint(Ellipse ellipse) 7     { 8       Point p = new Point(Canvas.GetLeft(ellipse) + ellipse.Width / 2, Canvas.GetTop(ellipse) + ellipse.Height / 2); 9       return p;10     }11   

当绘制完成时,执行完成动画并触发响应模式的事件

 1 /// <summary> 2     /// 执行动画 3     /// </summary> 4     /// <param name="result"></param> 5     private void PlayAnimation(bool result, Action callback = null) 6     { 7       Task.Factory.StartNew(() => 8       { 9         this.Dispatcher.Invoke((Action)delegate10         {11           foreach (Line l in currentLineList)12             l.Stroke = result ? rightColor : errorColor;13           foreach (Ellipse e in ellipseList)14             if (currentPointArray.Contains(e.Tag.ToString()))15               e.Fill = result ? rightColor : errorColor;16         });17         Thread.Sleep(1500);18         this.Dispatcher.Invoke((Action)delegate19         {20           foreach (Line l in currentLineList)21             this.canvasRoot.Children.Remove(l);22           foreach (Ellipse e in ellipseList)23             e.Fill = Color;24         });25         currentLine = null;26         this.currentPointArray.Clear();27         this.currentLineList.Clear();28         isChecking = false;29       }).ContinueWith(t =>30       {31         try32         {33           if (callback != null)34             callback();35         }36         catch (Exception ex)37         {38           Console.WriteLine(ex.Message);39         }40         finally41         {42           t.Dispose();43         }44       });45     }

图形解锁的调用

 1  <local:ScreenUnlock Width="500" Height="500" 2             PointArray="{Binding PointArray, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 3             Operation="Check"> <!--或Remember--> 4             <i:Interaction.Triggers> 5               <i:EventTrigger EventName="OnCheckedPoint"> 6                 <Custom:EventToCommand Command="{Binding OnCheckedPoint}" PassEventArgsToCommand="True"/> 7               </i:EventTrigger> 8               <i:EventTrigger EventName="OnRememberPoint"> 9                 <Custom:EventToCommand Command="{Binding OnRememberPoint}" PassEventArgsToCommand="True"/>10               </i:EventTrigger>11             </i:Interaction.Triggers>12           </local:ScreenUnlock>