9宫格拼图

选张图片做成9宫格拼图

 

今天要学习一个拼图项目。

目标是传入一张图片，然后将它分成9份，去掉一份，鼠标点击进行拼图。

源文件结构很简单

第一步、新建项目

这一步没什么好说的，新建一个项目就跟源文件结构一样了

 第二步、页面布局（.xaml文件）

看下源文件

控件有 DockPanel Grid Button三个然后设置了Grid有三列和三行。DockPannel暂时不知道有什么用，所以我先不忙加。然后我就报错了

原来 xaml是用的xml格式。button外面没有双标签包围，不能识别，所以报错。所以外面再加个标签包裹就行了，如果加DockPanel标签就和源文件一样了，此处为了明白DockPane有什么用，所以还是用Grid，看等会儿会不会报错。我现在的代码是

第二步、编写点击按钮选图片的功能

 这个帖子上周就开始写了，但是做了一半又去研究c++了。c++研究了一段时间，忽然明白我为什么要编程了。我编程不是对计算机有兴趣，不是为了0和1。我学计算机和程序只是为了做东西。所以又回过头来继续写这个系列，之后的内容我不会再抓细节，有些东西，能看懂就行了。记不住也没关系，要用的时候再查就是了。将项目做出来之后，我还要将它做成我喜欢的样子，而不是做成跟源代码一样。

 点击按钮要做两件事

1、弹出文件选择对话框，选择图片。

2、选择图片后生成拼图

下面是选择图片的代码

 

 

　　

生成拼图 第一步是把图片分成9块，并填充相应区域的图像

这个有点复杂，源码用了很多方法，我习惯拆出来作为一个类单独写。

　　 /// <summary>
    /// 拼图生成类
    /// 传入一张图片 生成一个9*9的图片集合
    /// </summary>
    public class PuzzleForImage
    {
        BitmapImage     _image;                                         　　　　//原图片
        public List<Rectangle> initialUnallocatedParts = new List<Rectangle>();//要返回的拼图集合
        /// <summary>
        /// 新建对象时传入原图片
        /// </summary>
        /// <param name="image"></param>
        public PuzzleForImage(BitmapImage image)
        {
            _image = image;
　　　　　　　//创建拼图
        }
　　}

第一步：写个子方法，根据起点和图片宽高绘制矩形。然后调用9次，得到整个拼图集合

第二步：将9张中的8张拼图随机排列，这里选前八张

第三步：再添加块空白的拼图

第四步：添加鼠标点击移动事件

到这一步，源码部分就结束了，自己添加了个判断成功的代码 在方块中的点击事件中执行。

下面是我的代码。

运行效果：

还存在的问题：

1、现在图片会被拉伸，暂时没想到好的办法。

2、会随机一些拼不出来的拼图

 

------------------------------分割线2016-8-3 16：47---------------------------------

图片拉伸问题已经解决

@曙光闪现
[quote]图片拉伸应该只能通过限制窗体的缩放按图片的比例缩放了。之前搞过9path原理就是类似这个九宫格[/quote]

下面是代码

更新了MainWindow.xaml.cs文件 和 MainWindow.xaml文件

下面是最新的代码

PuzzleForImage.cs没变还是上面那个

 

两个黄鹂鸣翠柳，一行代码上青天