实现思路:
1.随机生成四个汉字
2.区域从左到右均分成四个区域,每个区域随机一个点
3.在随机的四个点上显示汉字,汉字随机旋转一定角度。
4.对这四个汉字进行随机排序,然后选择前三个作为点击顺序,并显示在界面下方指引用户。
5.点击汉字显示一个定位标记,内部有个文字,按照点击顺序从1标记到3.
截图如下:
按照顺序点击后
XAML代码如下
<UserControl x:Class="Util.Controls.TextClickVerify" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:controls="clr-namespace:Util.Controls" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <UserControl.Resources> <!--Button模板--> <ControlTemplate x:Key="DefaultButton_Template" TargetType="{x:Type Button}"> <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}" Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}" CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.CornerRadius)}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}"> <!--Text--> <Grid VerticalAlignment="Center" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"> <ContentPresenter RecognizesAccessKey="True" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Grid> </Border> <!--触发器--> <ControlTemplate.Triggers> <!--设置鼠标进入时的背景、前景样式--> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.MouseOverBackground)}" TargetName="border" /> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.MouseOverForeground)}"/> </Trigger> <!--鼠标按下时的前景、背景样式--> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.PressedBackground)}" TargetName="border" /> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(controls:ControlAttachProperty.PressedForeground)}" /> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Opacity" Value="0.5" TargetName="border"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style x:Key="DefaultButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" /> <Setter Property="Foreground" Value="{DynamicResource WhiteBrush}" /> <Setter Property="controls:ControlAttachProperty.MouseOverBackground" Value="{DynamicResource GrayBrush8}" /> <Setter Property="controls:ControlAttachProperty.MouseOverForeground" Value="{StaticResource BlackBrush}" /> <Setter Property="controls:ControlAttachProperty.PressedBackground" Value="{DynamicResource BlackBrush}" /> <Setter Property="controls:ControlAttachProperty.PressedForeground" Value="{DynamicResource WhiteBrush}" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="controls:ControlAttachProperty.CornerRadius" Value="0" /> <Setter Property="Padding" Value="0" /> <Setter Property="Content" Value="{x:Null}" /> <Setter Property="MinHeight" Value="22" /> <Setter Property="Template" Value="{StaticResource DefaultButton_Template}"/> <Setter Property="BorderThickness" Value="1"/> </Style> </UserControl.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="30"/> </Grid.RowDefinitions> <Canvas x:Name="myCanvas"> </Canvas> <TextBlock x:Name="txtInfo" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"/> <Button x:Name="btnReset" Grid.Row="1" Visibility="Collapsed" Style="{StaticResource DefaultButtonStyle}"/> </Grid> </UserControl>
cs代码如下:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Util.Controls { /// <summary> /// TextClickVerify.xaml 的交互逻辑 /// </summary> public partial class TextClickVerify : UserControl { public TextClickVerify() { InitializeComponent(); this.Loaded += TextClickVerify_Loaded; ; myCanvas.MouseLeftButtonDown += MyCanvas_MouseLeftButtonDown; btnReset.Click += BtnReset_Click; } private void BtnReset_Click(object sender, RoutedEventArgs e) { Restart(); } private void MyCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { if (btnReset.Visibility == Visibility.Visible) { Restart(); return; } var position = e.GetPosition(myCanvas); if (e.OriginalSource.GetType() == typeof(Grid)) { Grid grid = (Grid)e.OriginalSource; if (grid.Tag.ToString() == strs.FirstOrDefault()) { AddPath(4 - strs.Count, position.X, position.Y); strs.RemoveAt(0); if (strs.Count == 0) { Result = true; RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "验证成功"; btnReset.Background = Brushes.Green; } } else { AddPath(4 - strs.Count, position.X, position.Y); RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "验证失败,请重试"; btnReset.Background = Brushes.Red; } } else { AddPath(4 - strs.Count, position.X, position.Y); RaiseResultChanged(Result); txtInfo.Visibility = Visibility.Collapsed; btnReset.Visibility = Visibility.Visible; btnReset.Content = "验证失败,请重试"; btnReset.Background = Brushes.Red; } } public bool Result { get { return (bool)GetValue(ResultProperty); } set { SetValue(ResultProperty, value); } } public static readonly DependencyProperty ResultProperty = DependencyProperty.Register("Result", typeof(bool), typeof(TextClickVerify), new PropertyMetadata(false)); public string ImageUri { get { return (string)GetValue(ImageUriProperty); } set { SetValue(ImageUriProperty, value); } } public static readonly DependencyProperty ImageUriProperty = DependencyProperty.Register("ImageUri", typeof(string), typeof(TextClickVerify), new PropertyMetadata(null)); #region Routed Event public static readonly RoutedEvent ResultChangedEvent = EventManager.RegisterRoutedEvent("ResultChanged", RoutingStrategy.Bubble, typeof(ResultChangedEventHandler), typeof(TextClickVerify)); public event ResultChangedEventHandler ResultChanged { add { AddHandler(ResultChangedEvent, value); } remove { RemoveHandler(ResultChangedEvent, value); } } void RaiseResultChanged(bool result) { var arg = new RoutedEventArgs(ResultChangedEvent, result); RaiseEvent(arg); } #endregion private void TextClickVerify_Loaded(object sender, RoutedEventArgs e) { Restart(); } private List<string> strs; private void Restart() { if (!myCanvas.IsVisible) return; Result = false; Random ran = new Random(); BitmapImage image = GetBitmapImage(); SetBackground(image); //获取GB2312编码页(表) Encoding gb = Encoding.GetEncoding("gb2312"); string str1; string str2; string str3; string str4; //调用函数产生4个随机中文汉字编码 object[] bytes = ChineseCode.CreateRegionCode(4); //根据汉字编码的字节数组解码出中文汉字 str1 = gb.GetString((byte[])Convert.ChangeType(bytes[0], typeof(byte[]))); str2 = gb.GetString((byte[])Convert.ChangeType(bytes[1], typeof(byte[]))); str3 = gb.GetString((byte[])Convert.ChangeType(bytes[2], typeof(byte[]))); str4 = gb.GetString((byte[])Convert.ChangeType(bytes[3], typeof(byte[]))); strs = new List<string>(); strs.Add(str1); strs.Add(str2); strs.Add(str3); strs.Add(str4); strs = strs.OrderBy(p => ran.NextDouble()).Take(3).ToList(); int width = (int)(myCanvas.ActualWidth - 30); int height = (int)(myCanvas.ActualHeight - 40); var brush = Application.Current.FindResource("AccentColorBrush") as Brush; myCanvas.Children.Clear(); AddChild(str1, 0, brush, width, height, ran); AddChild(str2, 1, brush, width, height, ran); AddChild(str3, 2, brush, width, height, ran); AddChild(str4, 3, brush, width, height, ran); txtInfo.Visibility = Visibility.Visible; txtInfo.Text = $"请依次点击"{strs[0]}""{strs[1]}""{strs[2]}""; btnReset.Visibility = Visibility.Collapsed; btnReset.Background = Brushes.Transparent; } public void AddChild(string str, int index, Brush brush, int width, int height, Random ran) { Grid grid = new Grid(); grid.Tag = str; OutlineText outlinetext = new OutlineText() { FontSize = 30, Text = str, FontWeight = FontWeights.Bold, Fill = new SolidColorBrush (Color.FromRgb(Convert.ToByte(ran.Next(0, 255)), Convert.ToByte(ran.Next(0, 255)), Convert.ToByte(ran.Next(0, 255)))),//brush, IsHitTestVisible = false, }; grid.Children.Add(outlinetext); SetLeft(grid, ran.Next((int)(width * index / 4) , (int)(width * (index + 1)/ 4))); SetTop(grid, ran.Next(0, (int)height)); RotateTransform rtf = new RotateTransform(ran.Next(0, 360), 15, 20); grid.RenderTransform = rtf; grid.Background = new SolidColorBrush(Colors.Transparent); myCanvas.Children.Add(grid); } private void AddPath(int number, double left, double top) { Grid grid = new Grid(); Path path = new Path(); path.Fill = Application.Current.FindResource("AccentColorBrush") as Brush;// Application.Current.FindResource("BlackBrush") as Brush; path.Stroke = Application.Current.FindResource("WhiteBrush") as Brush; string sData = "M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"; var converter = TypeDescriptor.GetConverter(typeof(Geometry)); path.Data = (Geometry)converter.ConvertFrom(sData); path.Height = 40; path.Width = 30; path.StrokeThickness = 2; path.Stretch = Stretch.Fill; path.HorizontalAlignment = HorizontalAlignment.Center; path.VerticalAlignment = VerticalAlignment.Center; grid.Children.Add(path); TextBlock text = new TextBlock(); text.Text = number.ToString(); text.Foreground = Application.Current.FindResource("WhiteBrush") as Brush; text.HorizontalAlignment = HorizontalAlignment.Center; text.VerticalAlignment = VerticalAlignment.Center; text.Margin = new Thickness(0, 0, 0, 2); grid.Children.Add(text); myCanvas.Children.Add(grid); SetLeft(grid, left - path.Width / 2); SetTop(grid, top - path.Height); } private BitmapImage GetBitmapImage() { Random ran = new Random(); int value = ran.Next(1, 3); // Create source. BitmapImage image = new BitmapImage(); // BitmapImage.UriSource must be in a BeginInit/EndInit block. image.BeginInit(); image.UriSource = new Uri(ImageUri ?? $"pack://application:,,,/Util.Controls;component/Resources/{value}.jpg"); image.DecodePixelWidth = (int)myCanvas.ActualWidth; image.DecodePixelHeight = (int)myCanvas.ActualHeight; image.EndInit(); return image; } private void SetBackground(BitmapImage image) { ImageBrush ib = new ImageBrush(); ib.ImageSource = image; myCanvas.Background = ib; } private void SetVerCenter(FrameworkElement element) { double top = (myCanvas.ActualHeight - element.ActualHeight) / 2; Canvas.SetTop(element, top); } private void SetLeft(FrameworkElement element, double left) { Canvas.SetLeft(element, left); } private void SetTop(FrameworkElement element, double top) { Canvas.SetTop(element, top); } } }
随机汉字的代码,网上找的一个
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Util.Controls { class ChineseCode { public static void Test() { //获取GB2312编码页(表) Encoding gb = Encoding.GetEncoding("gb2312"); //调用函数产生4个随机中文汉字编码 object[] bytes = CreateRegionCode(4); //根据汉字编码的字节数组解码出中文汉字 string str1 = gb.GetString((byte[])Convert.ChangeType(bytes[0], typeof(byte[]))); string str2 = gb.GetString((byte[])Convert.ChangeType(bytes[1], typeof(byte[]))); string str3 = gb.GetString((byte[])Convert.ChangeType(bytes[2], typeof(byte[]))); string str4 = gb.GetString((byte[])Convert.ChangeType(bytes[3], typeof(byte[]))); //输出的控制台 Console.WriteLine(str1 + str2 + str3 + str4); } /**/ /* 此函数在汉字编码范围内随机创建含两个元素的十六进制字节数组,每个字节数组代表一个汉字,并将 四个字节数组存储在object数组中。 参数:strlength,代表需要产生的汉字个数 */ public static object[] CreateRegionCode(int strlength) { //定义一个字符串数组储存汉字编码的组成元素 string[] rBase = new String[16] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" }; Random rnd = new Random(); //定义一个object数组用来 object[] bytes = new object[strlength]; /**/ /*每循环一次产生一个含两个元素的十六进制字节数组,并将其放入bject数组中 每个汉字有四个区位码组成 区位码第1位和区位码第2位作为字节数组第一个元素 区位码第3位和区位码第4位作为字节数组第二个元素 */ for (int i = 0; i < strlength; i++) { //区位码第1位 int r1 = rnd.Next(11, 14); string str_r1 = rBase[r1].Trim(); //区位码第2位 rnd = new Random(r1 * unchecked((int)DateTime.Now.Ticks) + i);//更换随机数发生器的 //种子避免产生重复值 int r2; if (r1 == 13) { r2 = rnd.Next(0, 7); } else { r2 = rnd.Next(0, 16); } string str_r2 = rBase[r2].Trim(); //区位码第3位 rnd = new Random(r2 * unchecked((int)DateTime.Now.Ticks) + i); int r3 = rnd.Next(10, 16); string str_r3 = rBase[r3].Trim(); //区位码第4位 rnd = new Random(r3 * unchecked((int)DateTime.Now.Ticks) + i); int r4; if (r3 == 10) { r4 = rnd.Next(1, 16); } else if (r3 == 15) { r4 = rnd.Next(0, 15); } else { r4 = rnd.Next(0, 16); } string str_r4 = rBase[r4].Trim(); //定义两个字节变量存储产生的随机汉字区位码 byte byte1 = Convert.ToByte(str_r1 + str_r2, 16); byte byte2 = Convert.ToByte(str_r3 + str_r4, 16); //将两个字节变量存储在字节数组中 byte[] str_r = new byte[] { byte1, byte2 }; //将产生的一个汉字的字节数组放入object数组中 bytes.SetValue(str_r, i); } return bytes; } } }
控件使用方法
<util:TextClickVerify x:Name="verify2" Width="300" Height="300"> <i:Interaction.Triggers> <i:EventTrigger EventName="ResultChanged"> <i:InvokeCommandAction Command="{Binding ResultChangedComamnd}" CommandParameter="{Binding Path=Result,ElementName=verify2}"/> </i:EventTrigger> </i:Interaction.Triggers> </util:TextClickVerify>
好了,至此结束。