詳解如何用WPF圖形解鎖控制項ScreenUnLock

來源:互聯網
上載者:User
這篇文章主要為大家詳細介紹了WPF圖形解鎖控制項ScreenUnLock的使用方法,具有一定的參考價值,感興趣的小夥伴們可以參考一下

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

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

在建立ScreenUnLock之前,先來分析一形解鎖的實現思路。

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

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

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

4.畫線完成,根據操作模式處理畫線完成行為。並調用相關自訂事件

大致思路如上,下面開始一步一步編寫ScreenUnLock吧

建立ScreenUnLock


public partial class ScreenUnlock : UserControl

定義相關屬性


/// <summary>  /// 驗證正確的顏色  /// </summary>  private SolidColorBrush rightColor;  /// <summary>  /// 驗證失敗的顏色  /// </summary>  private SolidColorBrush errorColor;  /// <summary>  /// 圖案是否在檢查中  /// </summary>  private bool isChecking;  public static readonly DependencyProperty PointArrayProperty = DependencyProperty.Register("PointArray", typeof(IList<string>), typeof(ScreenUnlock));  /// <summary>  /// 記憶的座標點   /// </summary>  public IList<string> PointArray  {   get { return GetValue(PointArrayProperty) as IList<string>; }   set { SetValue(PointArrayProperty, value); }  }  /// <summary>  /// 當前座標點集合  /// </summary>  private IList<string> currentPointArray;  /// <summary>  /// 當前線集合  /// </summary>  private IList<Line> currentLineList;  /// <summary>  /// 點集合  /// </summary>  private IList<Ellipse> ellipseList;  /// <summary>  /// 當前正在繪製的線  /// </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>  /// 座標點大小   /// </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>  /// 座標點及線條顏色  /// </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; //監聽繪製事件  } 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();  }

建立點


/// <summary>  /// 建立點  /// </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);    }   }  }

建立線


private Line CreateLine()  {   Line line = new Line()   {    Stroke = Color,    StrokeThickness = 2   };   return line;  }

點和線都建立都定義好了,可以開始監聽繪製事件了


private void ScreenUnlock_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)  {   if (isChecking) //如果圖形正在檢查中,不響應後續處理    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     {      //遇到下一個點,排除已經經過的點      if (currentPointArray.Contains(ellipse.Tag.ToString()))       return;      OnAfterByPoint(ellipse);     }    }    else if (currentLine != null)    {     //繪製過程中     currentLine.X2 = point.X;     currentLine.Y2 = point.Y;     //判斷當前Line是否經過點     ellipse = IsOnLine();     if (ellipse != null)      OnAfterByPoint(ellipse);    }   }   else   {    if (currentPointArray.Count == 0)     return;    isChecking = true;    if (currentLineList.Count + 1 != currentPointArray.Count)    {     //最後一條線的終點不在點上     //兩點一線,點的個數-1等於線的條數     currentLineList.Remove(currentLine); //從已記錄的線集合中刪除最後一條多餘的線     canvasRoot.Children.Remove(currentLine); //從介面上刪除最後一條多餘的線     currentLine = null;    }    if (Operation == ScreenUnLockOperationType.Check)    {     Console.WriteLine("playAnimation Check");     var result = CheckPoint(); //執行圖形檢查              //執行完成動畫並觸發檢查事件     PlayAnimation(result, () =>     {      if (OnCheckedPoint != null)      {       this.Dispatcher.BeginInvoke(OnCheckedPoint, this, new CheckPointArgs() { Result = result }); //觸發檢查完成事件      }     });    }    else if (Operation == ScreenUnLockOperationType.Remember)    {     Console.WriteLine("playAnimation Remember");     RememberPoint(); //記憶繪製的座標     var args = new RememberPointArgs() { PointArray = this.PointArray };             //執行完成動畫並觸發記憶事件     PlayAnimation(true, () =>     {      if (OnRememberPoint != null)      {       this.Dispatcher.BeginInvoke(OnRememberPoint, this, args); //觸發圖形記憶事件      }     });    }   }  }

判斷線是否經過了附近的某個點


/// <summary>  /// 兩點計算一線的長度  /// </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)); //根據兩點計算線段長度公式 √((x1-x2)²x(y1-y2)²)  }  /// <summary>  /// 判斷線是否經過了某個點  /// </summary>  /// <param name="ellipse"></param>  /// <returns></returns>  private Ellipse IsOnLine()  {   double lineAB = 0; //當前畫線的長度   double lineCA = 0; //當前點和A點的距離    double lineCB = 0; //當前點和B點的距離   double dis = 0;   double deciation = 1; //允許的偏差距離   lineAB = GetLineLength(currentLine.X1, currentLine.Y1, currentLine.X2, currentLine.Y2); //計算當前畫線的長度   foreach (Ellipse ellipse in ellipseList)   {    if (currentPointArray.Contains(ellipse.Tag.ToString())) //排除已經經過的點     continue;    var ellipseCenterPoint = GetCenterPoint(ellipse); //取當前點的中心點    lineCA = GetLineLength(currentLine.X1, currentLine.Y1, ellipseCenterPoint.X, ellipseCenterPoint.Y); //計算當前點到線A端的長度    lineCB = GetLineLength(currentLine.X2, currentLine.Y2, ellipseCenterPoint.X, ellipseCenterPoint.Y); //計算當前點到線B端的長度    dis = Math.Abs(lineAB - (lineCA + lineCB)); //線CA的長度+線CB的長度>當前線AB的長度 說明點不線上上    if (dis <= deciation) //因為繪製的點具有一個寬度和高度,所以需設定一個允許的偏差範圍,讓線靠近點就命中之(吸附效果)    {     return ellipse;    }   }   return null;  }

檢查點是否正確,按數組順序逐個匹配之


/// <summary>  /// 檢查座標點是否正確  /// </summary>  /// <returns></returns>  private bool CheckPoint()  {          //PointArray:正確的座標值數組         //currentPointArray:當前繪製的座標值數組   if (currentPointArray.Count != PointArray.Count)    return false;   for (var i = 0; i < currentPointArray.Count; i++)   {    if (currentPointArray[i] != PointArray[i])     return false;   }   return true;  }

記錄經過點,並建立一條新的線


/// <summary>  /// 記錄經過的點  /// </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>  /// 擷取原點的中心點座標  /// </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;  }

當繪製完成時,執行完成動畫並觸發響應模式的事件


/// <summary>  /// 執行動畫  /// </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();    }   });  }

圖形解鎖的調用


<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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.