Wpf登录验证方式(5)-推理拼图的实现

实现思路：

1.假设是3*3的拼图，有属性可以设置拼图块数。

2.读取一张图片，按照顺序的偏移显示在9个矩形中，如果未打乱，就像一张完整的图片。

3.随机获取这9个矩形中的两个，交换位置，打好标记。

4.鼠标左键按下，获取按下的图片，可以拖动。

5.拖动到另外一个图片上（两个图片左上角的距离小于矩形框长和宽平均值的一半（或者取斜角的一半）），另外一个图片显示外框，并且新增一个一模一样的图片显示在拖动图片的原先位置。

6.当左键松开，那么比较一下两个图片是否是标记好的图片，如果是那么完成。

截图如下：

 拖动过程

拖动离开

 

 这个代码比之前几个的逻辑稍微绕了一点，要处理好鼠标移动过程，鼠标移入另外一个快的处理，还是上代码吧。

XAML代码

<UserControl x:Class="Util.Controls.DragVerify"
             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="{DynamicResource BlackBrush}" />
            <Setter Property="controls:ControlAttachProperty.PressedBackground" Value="{DynamicResource AccentColorBrush}" />
            <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>
    /// DragVerify.xaml 的交互逻辑
    /// </summary>
    public partial class DragVerify : UserControl
    {
        private List<Rectangle> rects;
        private Rectangle dragrect;
        private Rectangle overlayrect;
        private Rectangle temprect;
        private  Point mousePoint;
        private int width;
        private int height;

        public DragVerify()
        {
            InitializeComponent();

            this.Loaded += TextClickVerify_Loaded; ;
            myCanvas.MouseLeftButtonDown += MyCanvas_MouseLeftButtonDown;
            myCanvas.MouseMove += MyCanvas_MouseMove;
            myCanvas.MouseLeftButtonUp += MyCanvas_MouseLeftButtonUp;
            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;
            }

            if (e.OriginalSource.GetType() == typeof(Rectangle))
            {
                dragrect = (Rectangle)e.OriginalSource;
                dragrect.Stroke = Application.Current.FindResource("AccentColorBrush") as Brush;
                mousePoint = e.GetPosition(myCanvas);

                Canvas.SetZIndex(dragrect, RowNum * ColumnNum);
            }
        }

        private void MyCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            if (dragrect != null)
            {
                if (e.LeftButton == MouseButtonState.Pressed)
                {
                    Point theMousePoint = e.GetPosition((Canvas)sender);

                    Canvas.SetLeft(dragrect, theMousePoint.X - (mousePoint.X - Canvas.GetLeft(dragrect)));
                    Canvas.SetTop(dragrect, theMousePoint.Y - (mousePoint.Y - Canvas.GetTop(dragrect)));

                    mousePoint = theMousePoint;

                    var oldoverlayrect = overlayrect;
                    overlayrect = GetOverlay(dragrect);
                    if (oldoverlayrect != overlayrect || oldoverlayrect == null || overlayrect == null)
                    {
                        if (oldoverlayrect != null)
                        {
                            oldoverlayrect.Stroke = Brushes.Transparent;                            
                        }
                        if (temprect != null)
                        {
                            myCanvas.Children.Remove(temprect);
                        }
                        if (overlayrect != null)
                        {
                            overlayrect.Stroke = Application.Current.FindResource("AccentColorBrush") as Brush;
                            temprect = CopyRectangle(overlayrect);
                            temprect.Tag = dragrect.Tag;
                            ArrayRectangle(temprect, width, height);
                        }
                    }
                }
            }
        }

        private void MyCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (overlayrect != null && dragrect != null)
            {
                var overlayrectTag = overlayrect.Tag as RectangleTag;
                var dragrectTag = dragrect.Tag as RectangleTag;
                if (dragrectTag.Row == overlayrectTag.NewRow && dragrectTag.Column == overlayrectTag.NewColumn)
                {                    
                    myCanvas.Children.Remove(overlayrect);
                    dragrect.Tag = overlayrect.Tag;
                    ArrayRectangle(dragrect, width, height);
                    dragrect.Stroke = Brushes.Transparent;
                    temprect.Stroke = Brushes.Transparent;
                    Result = true;
                    RaiseResultChanged(Result);
                    txtInfo.Visibility = Visibility.Collapsed;
                    btnReset.Visibility = Visibility.Visible;
                    btnReset.Content = "验证成功";
                    btnReset.Background = Brushes.Green;

                    return;
                }
            }
            if (dragrect != null)
            {
                Canvas.SetZIndex(dragrect, 0);
                ArrayRectangle(dragrect, width, height);
                dragrect.Stroke = Brushes.Transparent;
                dragrect = null;
            }
            if (temprect != null)
            {
                myCanvas.Children.Remove(temprect);
                temprect = null;
            }
            if (overlayrect != null)
            {
                overlayrect.Stroke = Brushes.Transparent;
                overlayrect = null;

                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(DragVerify), 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(DragVerify), new PropertyMetadata(null));

        public int RowNum
        {
            get { return (int)GetValue(RowNumProperty); }
            set { SetValue(RowNumProperty, value); }
        }

        public static readonly DependencyProperty RowNumProperty =
            DependencyProperty.Register("RowNum", typeof(int), typeof(DragVerify), new PropertyMetadata(3));

        public int ColumnNum
        {
            get { return (int)GetValue(ColumnNumProperty); }
            set { SetValue(ColumnNumProperty, value); }
        }

        public static readonly DependencyProperty ColumnNumProperty =
            DependencyProperty.Register("ColumnNum", typeof(int), typeof(DragVerify), new PropertyMetadata(3));

        #region Routed Event
        public static readonly RoutedEvent ResultChangedEvent = EventManager.RegisterRoutedEvent("ResultChanged", RoutingStrategy.Bubble, typeof(ResultChangedEventHandler), typeof(DragVerify));
        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 void Restart()
        {
            if (!myCanvas.IsVisible)
                return;

            Result = false;

            width = (int)(myCanvas.ActualWidth);
            height = (int)(myCanvas.ActualHeight);
            BitmapImage image = GetBitmapImage(width, height);

            myCanvas.Children.Clear();
            rects = new List<Rectangle>();
            dragrect = null;
            overlayrect = null;

            for (int i = 0; i < RowNum; i++)
            {
                for (int j = 0; j < ColumnNum; j++)
                {
                    Rectangle rect = GetChild(image, i, j, width, height);
                    rects.Add(rect);
                }
            }

            Random ran = new Random();
            var changedrect = rects.OrderBy(p => ran.NextDouble()).Take(2).ToArray();
            var rectTag0 = changedrect[0].Tag as RectangleTag;
            var rectTag1 = changedrect[1].Tag as RectangleTag;
            rectTag0.NewRow = rectTag1.Row;
            rectTag0.NewColumn = rectTag1.Column;
            rectTag1.NewRow = rectTag0.Row;
            rectTag1.NewColumn = rectTag0.Column;

            foreach (var rect in rects)
            {
                ArrayRectangle(rect, width, height);
            }

            txtInfo.Visibility = Visibility.Visible;
            txtInfo.Text = "拖动交换2个图块复原图片";
            btnReset.Visibility = Visibility.Collapsed;
            btnReset.Background = Brushes.Transparent;
        }

        private Rectangle GetChild(BitmapImage image, int row, int column, int width, int height)
        {
            Rectangle rectangle = new Rectangle()
            {
                Width = width / ColumnNum,
                Height = height / RowNum,
                StrokeThickness = 2,
                Stroke = Brushes.Transparent,
            };

            ImageBrush ib = new ImageBrush();
            ib.AlignmentX = AlignmentX.Left;
            ib.AlignmentY = AlignmentY.Top;
            ib.ImageSource = image;
            ib.Viewbox = new Rect(column * width / ColumnNum, row * height / RowNum, width, height);
            ib.ViewboxUnits = BrushMappingMode.Absolute; //按百分比设置宽高
            ib.TileMode = TileMode.None; //按百分比应该不会出现 image小于要切的值的情况
            ib.Stretch = Stretch.None;

            rectangle.Fill = ib;
            //SetLeft(rectangle, column * width / ColumnNum + column * 3);
            //SetTop(rectangle, row * height / RowNum  + row * 3);

            RectangleTag rectangleTag = new RectangleTag()
            {
                Row = row,
                Column = column,
                NewRow = row,
                NewColumn = column,
            };

            rectangle.Tag = rectangleTag;

            return rectangle;
        }

        public void ArrayRectangle(Rectangle rectangle, int width, int height)
        {
            var rectTag = rectangle.Tag as RectangleTag;
            SetLeft(rectangle, rectTag.NewColumn * width / ColumnNum);
            SetTop(rectangle, rectTag.NewRow * height / RowNum);

            if (!myCanvas.Children.Contains(rectangle))
            {
                myCanvas.Children.Add(rectangle);
            }
        }



        private BitmapImage GetBitmapImage(int width, int height)
        {
            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 = width;
            image.DecodePixelHeight = height;
            image.EndInit();

            return image;
        }


        private void SetLeft(FrameworkElement element, double left)
        {
            Canvas.SetLeft(element, left);
        }

        private void SetTop(FrameworkElement element, double top)
        {
            Canvas.SetTop(element, top);
        }

        private Rectangle GetOverlay(Rectangle rectangle)
        {
            var left = Canvas.GetLeft(rectangle);
            var top = Canvas.GetTop(rectangle);
            var rect = rects.Where(p => p != rectangle && (Math.Sqrt(Math.Pow(Canvas.GetLeft(p) - left, 2) + Math.Pow(Canvas.GetTop(p) - top, 2)) < rectangle.Width / 2)).FirstOrDefault();
            return rect;
        }

        private Rectangle CopyRectangle(Rectangle rectangle)
        {
            string xaml = System.Windows.Markup.XamlWriter.Save(rectangle);
            return System.Windows.Markup.XamlReader.Parse(xaml) as Rectangle;
        }

    }

    public class RectangleTag
    {
        public int Row { get; set; }
        public int Column { get; set; }
        public int NewRow { get; set; }
        public int NewColumn { get; set; }
    }
}

控件使用方法

  <util:DragVerify x:Name="verify5" Width="300" Height="300">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="ResultChanged">
                                <i:InvokeCommandAction Command="{Binding ResultChangedComamnd}" CommandParameter="{Binding Path=Result,ElementName=verify5}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
</util:DragVerify>

　　

好了，又完成一个，想搞那个空间推理，貌似有点难啊，看看吧。