Wpf登录验证方式(2)-文字点选的实现

实现思路：

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>

　　

好了，至此结束。