• 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>
    

      

    好了,至此结束。

    作者:竹天笑
    互相学习,提高自己。
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
  • 相关阅读:
    JSP基本使用
    Web介绍
    通用的数据库数据操作类
    Java集合与泛型
    我是如何刷 LeetCode
    这或许是东半球讲十大排序算法最好的一篇文章(c++版程序)
    【游戏后端】游戏服务器端开发的一些建议(转载)
    【高并发】Redis为什么是单线程,高并发快的3大原因详解
    【高可用】Redis哨兵、复制、集群的设计原理与区别
    深入理解各种排序的一些思路及分享
  • 原文地址:https://www.cnblogs.com/akwkevin/p/14141084.html
Copyright © 2020-2023  润新知