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; }
点和线都创建都定义好了，可以开始监听绘制事件了