ScreenUnLock 與智能手機(jī)上的圖案解鎖功能一樣。通過(guò)繪制圖形達(dá)到解鎖或記憶圖形的目的。
本人突發(fā)奇想，把手機(jī)上的圖形解鎖功能移植到WPF中。也應(yīng)用到了公司的項(xiàng)目中。
在創(chuàng)建ScreenUnLock之前，先來(lái)分析一下圖形解鎖的實(shí)現(xiàn)思路。
1.創(chuàng)建九宮格原點(diǎn)(或更多格子)，每個(gè)點(diǎn)定義一個(gè)坐標(biāo)值
2.提供圖形解鎖相關(guān)擴(kuò)展屬性和事件，方便調(diào)用者定義。比如：點(diǎn)和線的顏色(Color)，操作模式(Check|Remember)，驗(yàn)證正確的顏色(RightColor), 驗(yàn)證失敗的顏色(ErrorColor), 解鎖事件 OnCheckedPoint，記憶事件 OnRememberPoint 等;
3.定義MouseMove事件監(jiān)聽(tīng)畫(huà)線行為。 畫(huà)線部分也是本文的核心。在畫(huà)線過(guò)程中。程序需判斷，線條從哪個(gè)點(diǎn)開(kāi)始繪制，經(jīng)過(guò)了哪個(gè)點(diǎn)(排除已經(jīng)記錄的點(diǎn))。是否完成了繪制等等。
4.畫(huà)線完成，根據(jù)操作模式處理畫(huà)線完成行為。并調(diào)用相關(guān)自定義事件
大致思路如上，下面開(kāi)始一步一步編寫(xiě)ScreenUnLock吧
創(chuàng)建ScreenUnLock
|
1
|
public partial class ScreenUnlock : UserControl |
定義相關(guān)屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
/// <summary> /// 驗(yàn)證正確的顏色 /// </summary> private SolidColorBrush rightColor; /// <summary> /// 驗(yàn)證失敗的顏色 /// </summary> private SolidColorBrush errorColor; /// <summary> /// 圖案是否在檢查中 /// </summary> private bool isChecking; public static readonly DependencyProperty PointArrayProperty = DependencyProperty.Register("PointArray", typeof(IList<string>), typeof(ScreenUnlock)); /// <summary> /// 記憶的坐標(biāo)點(diǎn) /// </summary> public IList<string> PointArray { get { return GetValue(PointArrayProperty) as IList<string>; } set { SetValue(PointArrayProperty, value); } } /// <summary> /// 當(dāng)前坐標(biāo)點(diǎn)集合 /// </summary> private IList<string> currentPointArray; /// <summary> /// 當(dāng)前線集合 /// </summary> private IList<Line> currentLineList; /// <summary> /// 點(diǎn)集合 /// </summary> private IList<Ellipse> ellipseList; /// <summary> /// 當(dāng)前正在繪制的線 /// </summary> private Line currentLine; public static readonly DependencyProperty OperationPorperty = DependencyProperty.Register("Operation", typeof(ScreenUnLockOperationType), typeof(ScreenUnlock), new FrameworkPropertyMetadata(ScreenUnLockOperationType.Remember)); /// <summary> /// 操作類型 /// </summary> public ScreenUnLockOperationType Operation { get { return (ScreenUnLockOperationType)GetValue(OperationPorperty); } set { SetValue(OperationPorperty, value); } } public static readonly DependencyProperty PointSizeProperty = DependencyProperty.Register("PointSize", typeof(double), typeof(ScreenUnlock), new FrameworkPropertyMetadata(15.0)); /// <summary> /// 坐標(biāo)點(diǎn)大小 /// </summary> public double PointSize { get { return Convert.ToDouble(GetValue(PointSizeProperty)); } set { SetValue(PointSizeProperty, value); } } public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(SolidColorBrush), typeof(ScreenUnlock), new FrameworkPropertyMetadata(new SolidColorBrush(Colors.White), new PropertyChangedCallback((s, e) => { (s as ScreenUnlock).Refresh(); }))); /// <summary> /// 坐標(biāo)點(diǎn)及線條顏色 /// </summary> public SolidColorBrush Color { get { return GetValue(ColorProperty) as SolidColorBrush; } set { SetValue(ColorProperty, value); } } /// <summary> /// 操作類型 /// </summary> public enum ScreenUnLockOperationType { Remember = 0, Check = 1 } |
初始化ScreenUnLock
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
public ScreenUnlock() { InitializeComponent(); this.Loaded += ScreenUnlock_Loaded; this.Unloaded += ScreenUnlock_Unloaded; this.MouseMove += ScreenUnlock_MouseMove; //監(jiān)聽(tīng)繪制事件 } 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(); } |
創(chuàng)建點(diǎn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/// <summary> /// 創(chuàng)建點(diǎn) /// </summary> private void CreatePoint() { canvasRoot.Children.Clear(); int row = 3, column = 3; //三行三列，九宮格 double oneColumnWidth = (this.ActualWidth == 0 ? this.Width : this.ActualWidth) / 3; //單列的寬度 double oneRowHeight = (this.ActualHeight == 0 ? this.Height : this.ActualHeight) / 3; //單列的高度 double leftDistance = (oneColumnWidth - PointSize) / 2; //單列左邊距 double topDistance = (oneRowHeight - PointSize) / 2; //單列上邊距 for (var i = 0; i < row; i++) { for (var j = 0; j < column; j++) { Ellipse ellipse = new Ellipse() { Width = PointSize, Height = PointSize, Fill = Color, Tag = string.Format("{0}{1}", i, j) }; Canvas.SetLeft(ellipse, j * oneColumnWidth + leftDistance); Canvas.SetTop(ellipse, i * oneRowHeight + topDistance); canvasRoot.Children.Add(ellipse); ellipseList.Add(ellipse); } } } |
創(chuàng)建線
|
1
2
3
4
5
6
7
8
9
|
private Line CreateLine() { Line line = new Line() { Stroke = Color, StrokeThickness = 2 }; return line; } |
點(diǎn)和線都創(chuàng)建都定義好了，可以開(kāi)始監(jiān)聽(tīng)繪制事件了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
private void ScreenUnlock_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) { if (isChecking) //如果圖形正在檢查中，不響應(yīng)后續(xù)處理 return; if (e.LeftButton == System.Windows.Input.MouseButtonState.Pressed) { var point = e.GetPosition(this); HitTestResult result = VisualTreeHelper.HitTest(this, point); Ellipse ellipse = result.VisualHit as Ellipse; if (ellipse != null) { if (currentLine == null) { //從頭開(kāi)始繪制 currentLine = CreateLine(); var ellipseCenterPoint = GetCenterPoint(ellipse); currentLine.X1 = currentLine.X2 = ellipseCenterPoint.X; currentLine.Y1 = currentLine.Y2 = ellipseCenterPoint.Y; currentPointArray.Add(ellipse.Tag.ToString()); Console.WriteLine(string.Join(",", currentPointArray)); currentLineList.Add(currentLine); canvasRoot.Children.Add(currentLine); } else { //遇到下一個(gè)點(diǎn)，排除已經(jīng)經(jīng)過(guò)的點(diǎn) if (currentPointArray.Contains(ellipse.Tag.ToString())) return; OnAfterByPoint(ellipse); } } else if (currentLine != null) { //繪制過(guò)程中 currentLine.X2 = point.X; currentLine.Y2 = point.Y; //判斷當(dāng)前Line是否經(jīng)過(guò)點(diǎn) ellipse = IsOnLine(); if (ellipse != null) OnAfterByPoint(ellipse); } } else { if (currentPointArray.Count == 0) return; isChecking = true; if (currentLineList.Count + 1 != currentPointArray.Count) { //最后一條線的終點(diǎn)不在點(diǎn)上 //兩點(diǎn)一線，點(diǎn)的個(gè)數(shù)-1等于線的條數(shù) currentLineList.Remove(currentLine); //從已記錄的線集合中刪除最后一條多余的線 canvasRoot.Children.Remove(currentLine); //從界面上刪除最后一條多余的線 currentLine = null; } if (Operation == ScreenUnLockOperationType.Check) { Console.WriteLine("playAnimation Check"); var result = CheckPoint(); //執(zhí)行圖形檢查 //執(zhí)行完成動(dòng)畫(huà)并觸發(fā)檢查事件 PlayAnimation(result, () => { if (OnCheckedPoint != null) { this.Dispatcher.BeginInvoke(OnCheckedPoint, this, new CheckPointArgs() { Result = result }); //觸發(fā)檢查完成事件 } }); } else if (Operation == ScreenUnLockOperationType.Remember) { Console.WriteLine("playAnimation Remember"); RememberPoint(); //記憶繪制的坐標(biāo) var args = new RememberPointArgs() { PointArray = this.PointArray }; //執(zhí)行完成動(dòng)畫(huà)并觸發(fā)記憶事件 PlayAnimation(true, () => { if (OnRememberPoint != null) { this.Dispatcher.BeginInvoke(OnRememberPoint, this, args); //觸發(fā)圖形記憶事件 } }); } } } |
判斷線是否經(jīng)過(guò)了附近的某個(gè)點(diǎn)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/// <summary> /// 兩點(diǎn)計(jì)算一線的長(zhǎng)度 /// </summary> /// <param name="pt1"></param> /// <param name="pt2"></param> /// <returns></returns> private double GetLineLength(double x1, double y1, double x2, double y2) { return Math.Sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)); //根據(jù)兩點(diǎn)計(jì)算線段長(zhǎng)度公式 √((x1-x2)²x(y1-y2)²) } /// <summary> /// 判斷線是否經(jīng)過(guò)了某個(gè)點(diǎn) /// </summary> /// <param name="ellipse"></param> /// <returns></returns> private Ellipse IsOnLine() { double lineAB = 0; //當(dāng)前畫(huà)線的長(zhǎng)度 double lineCA = 0; //當(dāng)前點(diǎn)和A點(diǎn)的距離 double lineCB = 0; //當(dāng)前點(diǎn)和B點(diǎn)的距離 double dis = 0; double deciation = 1; //允許的偏差距離 lineAB = GetLineLength(currentLine.X1, currentLine.Y1, currentLine.X2, currentLine.Y2); //計(jì)算當(dāng)前畫(huà)線的長(zhǎng)度 foreach (Ellipse ellipse in ellipseList) { if (currentPointArray.Contains(ellipse.Tag.ToString())) //排除已經(jīng)經(jīng)過(guò)的點(diǎn) continue; var ellipseCenterPoint = GetCenterPoint(ellipse); //取當(dāng)前點(diǎn)的中心點(diǎn) lineCA = GetLineLength(currentLine.X1, currentLine.Y1, ellipseCenterPoint.X, ellipseCenterPoint.Y); //計(jì)算當(dāng)前點(diǎn)到線A端的長(zhǎng)度 lineCB = GetLineLength(currentLine.X2, currentLine.Y2, ellipseCenterPoint.X, ellipseCenterPoint.Y); //計(jì)算當(dāng)前點(diǎn)到線B端的長(zhǎng)度 dis = Math.Abs(lineAB - (lineCA + lineCB)); //線CA的長(zhǎng)度+線CB的長(zhǎng)度>當(dāng)前線AB的長(zhǎng)度 說(shuō)明點(diǎn)不在線上 if (dis <= deciation) //因?yàn)槔L制的點(diǎn)具有一個(gè)寬度和高度，所以需設(shè)定一個(gè)允許的偏差范圍，讓線靠近點(diǎn)就命中之（吸附效果） { return ellipse; } } return null; } |
檢查點(diǎn)是否正確，按數(shù)組順序逐個(gè)匹配之
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/// <summary> /// 檢查坐標(biāo)點(diǎn)是否正確 /// </summary> /// <returns></returns> private bool CheckPoint() { //PointArray:正確的坐標(biāo)值數(shù)組 //currentPointArray:當(dāng)前繪制的坐標(biāo)值數(shù)組 if (currentPointArray.Count != PointArray.Count) return false; for (var i = 0; i < currentPointArray.Count; i++) { if (currentPointArray[i] != PointArray[i]) return false; } return true; } |
記錄經(jīng)過(guò)點(diǎn)，并創(chuàng)建一條新的線
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/// <summary> /// 記錄經(jīng)過(guò)的點(diǎn) /// </summary> /// <param name="ellipse"></param> private void OnAfterByPoint(Ellipse ellipse) { var ellipseCenterPoint = GetCenterPoint(ellipse); currentLine.X2 = ellipseCenterPoint.X; currentLine.Y2 = ellipseCenterPoint.Y; currentLine = CreateLine(); currentLine.X1 = currentLine.X2 = ellipseCenterPoint.X; currentLine.Y1 = currentLine.Y2 = ellipseCenterPoint.Y; currentPointArray.Add(ellipse.Tag.ToString()); Console.WriteLine(string.Join(",", currentPointArray)); currentLineList.Add(currentLine); canvasRoot.Children.Add(currentLine); } |
|
1
2
3
4
5
6
7
8
9
10
|
/// <summary> /// 獲取原點(diǎn)的中心點(diǎn)坐標(biāo) /// </summary> /// <param name="ellipse"></param> /// <returns></returns> private Point GetCenterPoint(Ellipse ellipse) { Point p = new Point(Canvas.GetLeft(ellipse) + ellipse.Width / 2, Canvas.GetTop(ellipse) + ellipse.Height / 2); return p; } |
當(dāng)繪制完成時(shí)，執(zhí)行完成動(dòng)畫(huà)并觸發(fā)響應(yīng)模式的事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
/// <summary> /// 執(zhí)行動(dòng)畫(huà) /// </summary> /// <param name="result"></param> private void PlayAnimation(bool result, Action callback = null) { Task.Factory.StartNew(() => { this.Dispatcher.Invoke((Action)delegate { foreach (Line l in currentLineList) l.Stroke = result ? rightColor : errorColor; foreach (Ellipse e in ellipseList) if (currentPointArray.Contains(e.Tag.ToString())) e.Fill = result ? rightColor : errorColor; }); Thread.Sleep(1500); this.Dispatcher.Invoke((Action)delegate { foreach (Line l in currentLineList) this.canvasRoot.Children.Remove(l); foreach (Ellipse e in ellipseList) e.Fill = Color; }); currentLine = null; this.currentPointArray.Clear(); this.currentLineList.Clear(); isChecking = false; }).ContinueWith(t => { try { if (callback != null) callback(); } catch (Exception ex) { Console.WriteLine(ex.Message); } finally { t.Dispose(); } }); } |
圖形解鎖的調(diào)用
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<local:ScreenUnlock Width="500" Height="500" PointArray="{Binding PointArray, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Operation="Check"> <!--或Remember--> <i:Interaction.Triggers> <i:EventTrigger EventName="OnCheckedPoint"> <Custom:EventToCommand Command="{Binding OnCheckedPoint}" PassEventArgsToCommand="True"/> </i:EventTrigger> <i:EventTrigger EventName="OnRememberPoint"> <Custom:EventToCommand Command="{Binding OnRememberPoint}" PassEventArgsToCommand="True"/> </i:EventTrigger> </i:Interaction.Triggers> </local:ScreenUnlock> |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
