您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)ScreenUnLock-圖形解鎖控件的使用示例的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在創(chuàng)建ScreenUnLock之前,先來分析一下圖形解鎖的實(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)聽畫線行為。 畫線部分也是本文的核心。在畫線過程中。程序需判斷,線條從哪個(gè)點(diǎn)開始繪制,經(jīng)過了哪個(gè)點(diǎn)(排除已經(jīng)記錄的點(diǎn))。是否完成了繪制等等。
4.畫線完成,根據(jù)操作模式處理畫線完成行為。并調(diào)用相關(guān)自定義事件
大致思路如上,下面開始一步一步編寫ScreenUnLock吧
創(chuàng)建ScreenUnLock
public partial class ScreenUnlock : UserControl
定義相關(guān)屬性
/// <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
public ScreenUnlock() { InitializeComponent(); this.Loaded += ScreenUnlock_Loaded; this.Unloaded += ScreenUnlock_Unloaded; this.MouseMove += ScreenUnlock_MouseMove; //監(jiān)聽繪制事件 } 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)
/// <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)建線
private Line CreateLine() { Line line = new Line() { Stroke = Color, StrokeThickness = 2 }; return line; }
點(diǎn)和線都創(chuàng)建都定義好了,可以開始監(jiān)聽繪制事件了
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) { //從頭開始繪制 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)過的點(diǎn) if (currentPointArray.Contains(ellipse.Tag.ToString())) return; OnAfterByPoint(ellipse); } } else if (currentLine != null) { //繪制過程中 currentLine.X2 = point.X; currentLine.Y2 = point.Y; //判斷當(dāng)前Line是否經(jīng)過點(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)畫并觸發(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)畫并觸發(fā)記憶事件 PlayAnimation(true, () => { if (OnRememberPoint != null) { this.Dispatcher.BeginInvoke(OnRememberPoint, this, args); //觸發(fā)圖形記憶事件 } }); } } }
判斷線是否經(jīng)過了附近的某個(gè)點(diǎn)
/// <summary> /// 兩點(diǎn)計(jì)算一線的長度 /// </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ì)算線段長度公式 √((x1-x2)2x(y1-y2)2) } /// <summary> /// 判斷線是否經(jīng)過了某個(gè)點(diǎn) /// </summary> /// <param name="ellipse"></param> /// <returns></returns> private Ellipse IsOnLine() { double lineAB = 0; //當(dā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)前畫線的長度 foreach (Ellipse ellipse in ellipseList) { if (currentPointArray.Contains(ellipse.Tag.ToString())) //排除已經(jīng)經(jīng)過的點(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端的長度 lineCB = GetLineLength(currentLine.X2, currentLine.Y2, ellipseCenterPoint.X, ellipseCenterPoint.Y); //計(jì)算當(dāng)前點(diǎn)到線B端的長度 dis = Math.Abs(lineAB - (lineCA + lineCB)); //線CA的長度+線CB的長度>當(dāng)前線AB的長度 說明點(diǎn)不在線上 if (dis <= deciation) //因?yàn)槔L制的點(diǎn)具有一個(gè)寬度和高度,所以需設(shè)定一個(gè)允許的偏差范圍,讓線靠近點(diǎn)就命中之(吸附效果) { return ellipse; } } return null; }
檢查點(diǎn)是否正確,按數(shù)組順序逐個(gè)匹配之
/// <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)過點(diǎn),并創(chuàng)建一條新的線
/// <summary> /// 記錄經(jīng)過的點(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); }
/// <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)畫并觸發(fā)響應(yīng)模式的事件
/// <summary> /// 執(zhí)行動(dòng)畫 /// </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)用
<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>
感謝各位的閱讀!關(guān)于“ScreenUnLock-圖形解鎖控件的使用示例”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。