WPF自定義控件之圖形解鎖控件 ScreenUnLock

時間 2019-12-10

標籤 wpf 自定義控件圖形解鎖 screenunlock 简体版

原文原文鏈接

ScreenUnLock 與智能手機上的圖案解鎖功能同樣。經過繪製圖形達到解鎖或記憶圖形的目的。canvas

本人突發奇想，把手機上的圖形解鎖功能移植到WPF中。也應用到了公司的項目中。數組

在建立ScreenUnLock以前，先來分析一下圖形解鎖的實現思路。動畫

1.建立九宮格原點(或更多格子)，每一個點定義一個座標值this

2.提供圖形解鎖相關擴展屬性和事件，方便調用者定義。好比：點和線的顏色(Color)，操做模式(Check|Remember)，驗證正確的顏色(RightColor), 驗證失敗的顏色(ErrorColor), 解鎖事件 OnCheckedPoint，記憶事件 OnRememberPoint 等;spa

3.定義MouseMove事件監聽畫線行爲。畫線部分也是本文的核心。在畫線過程當中。程序需判斷，線條從哪一個點開始繪製，通過了哪一個點(排除已經記錄的點)。是否完成了繪製等等。3d

4.畫線完成，根據操做模式處理畫線完成行爲。並調用相關自定義事件code

大體思路如上，下面開始一步一步編寫ScreenUnLock吧orm

建立ScreenUnLockblog

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> PointArray
21         {
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 Operation
51         {
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 PointSize
61         {
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 Color
76         {
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 = 2
7             };
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                     else
26                     {
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             else
46             {
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)delegate
10                 {
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)delegate
19                 {
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                 try
32                 {
33                     if (callback != null)
34                         callback();
35                 }
36                 catch (Exception ex)
37                 {
38                     Console.WriteLine(ex.Message);
39                 }
40                 finally
41                 {
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。