WPF 그래 픽 잠 금 해제 컨트롤 ScreenUnLock 사용 설명
15413 단어 WPF도형 잠 금 해제ScreenUnLock
본인 은 휴대 전화의 그래 픽 잠 금 해제 기능 을 WPF 에 이식 하려 는 기발 한 생각 이 들 었 다.회사 프로젝트 에 도 활용 됐다.
ScreenUnLock 을 만 들 기 전에 도형 잠 금 해제 의 실현 방향 을 분석 해 보 세 요.
1.구 궁 격 원점(또는 더 많은 칸)을 만 들 고 점 마다 좌표 값 을 정의 합 니 다.
2.그래 픽 잠 금 해제 와 관련 된 확장 속성 과 이 벤트 를 제공 하여 호출 자의 정 의 를 편리 하 게 합 니 다.예 를 들 어 점 과 선의 색상(Color),조작 모드(Check|Remember),정확 한 색상 검증(RightColor),실패 한 색상 검증(ErrorColor),잠 금 해제 이벤트 OnCheckedPoint,기억 이벤트 OnRemember Point 등;
3.Mouse Move 이벤트 감청 선 행 위 를 정의 합 니 다.선 을 그 리 는 부분 도 본문의 핵심 이다.선 을 그 리 는 과정 에서프로그램 은 선 이 어느 점 에서 그 려 졌 는 지,어느 점 을 거 쳤 는 지 판단 해 야 한다(기 록 된 점 제외).그리 기 완료 여부 등등.
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
}
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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
MaterialDesign의 ComboBox HasClearButton 크기 변경WPF MaterialDesign은 편리하지만 때로는 표시가 너무 크거나 약간 사용하기 쉽습니다. ComboBox를 사용할 때 선택한 버튼을 지우려면 지우기 버튼을 표시할 수 있습니다. 아래와 같은 표시가 됩니다 다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
