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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# WPF  # 图形解锁  # 屏幕解锁  # ScreenUnLock  # C# WPF Image控件的绑定方法  # C# WPF 父控件通过使用可视化树找到子控件的示例代码  # C# 使用WPF 用MediaElement控件实现视频循环播放  # C# WPF ListView控件的实例详解  # WPF自定义控件和样式之自定义按钮（Button）  # WPF滑块控件(Slider)的自定义样式  # WPF自定义实现IP地址输入控件  # WPF自定义选择年月控件详解  # C# WPF实现的语音播放自定义控件  # 解锁  # 画线  # 坐标点  # 中心点  # 两点  # 经过了  # 点到  # 坐标值  # 是否正确  # 过程中  # 好了  # 九宫格  # 线上  # 自定义  # 机上  # 先来  # 点上  # 大家多多  # 条数  # 一条线 

相关文章： 公司网站建设制作费用,想建设一个属于自己的企业网站，该如何去做？  香港服务器选型指南：免备案配置与高效建站方案解析  如何在IIS中新建站点并配置端口与IP地址？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  c++ stringstream用法详解_c++字符串与数字转换利器  建站之星安全性能如何？防护体系能否抵御黑客入侵？  ,巨量百应是干嘛的？  中山网站推广排名,中山信息港登录入口？  如何配置支付宝与微信支付功能？  如何用y主机助手快速搭建网站？  ,怎么在广州志愿者网站注册？  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  如何用5美元大硬盘VPS安全高效搭建个人网站？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  javascript基本数据类型及类型检测常用方法小结  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  高性价比服务器租赁——企业级配置与24小时运维服务  全景视频制作网站有哪些,全景图怎么做成网页？  Swift开发中switch语句值绑定模式  已有域名和空间如何快速搭建网站？  如何在建站主机中优化服务器配置？  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么？  网站制作价目表怎么做,珍爱网婚介费用多少？  网站微信制作软件,如何制作微信链接？  如何获取上海专业网站定制建站电话？  如何通过智能用户系统一键生成高效建站方案？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  官网网站制作腾讯审核要多久,联想路由器newifi官网  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  做企业网站制作流程,企业网站制作基本流程有哪些？  上海网站制作开发公司,上海买房比较好的网站有哪些？  如何通过多用户协作模板快速搭建高效企业网站？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  独立制作一个网站多少钱,建立网站需要花多少钱？  网站代码制作软件有哪些,如何生成自己网站的代码？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  如何在阿里云香港服务器快速搭建网站？  深圳网站制作费用多少钱,读秀，深圳文献港这样的网站很多只提供网上试读，但有些人只要提供试读的文章就能全篇下载，这个是怎么弄的？  建站之星安装提示数据库无法连接如何解决？  如何选择高效可靠的多用户建站源码资源？  如何在VPS电脑上快速搭建网站？  ,石家庄四十八中学官网？  建站之星价格显示格式升级，你的预算足够吗？  如何挑选高效建站主机与优质域名？  网站制作大概多少钱一个,做一个平台网站大概多少钱？