利用opencv实现九宫格拼图功能

利用opencv实现九宫格拼图功能@TOC

- 设计思路

1 读入一张图片，并对图像进行切割，分成九块；
2 利用数组保存九张图片，设法将九张图片显示在一张图片中；
3 随机初始化，使九张图片随机分布在显示界面图片的九个区域；
4 利用鼠标回调函数，通过鼠标点击交换两张相邻图片的位置；

- 关于实现

1. 读入图片并对图片进行切割-------Rect（）函数

  Rect(int _x,int _y,int _width,int _height); 参数意思为：左上角x坐标 左上角y坐标 矩形的宽 矩形的高

    Mat img = imread("C:\\picture\\aa.jpg");int m = img.cols;//宽int n = img.rows;//高Mat imge[10];imge[1] = img(Rect(0, 0, m / 3, n / 3));imge[2] = img(Rect(m / 3, 0, m / 3, n / 3));imge[3] = img(Rect(m / 3 * 2, 0, m / 3, n / 3));imge[4] = img(Rect(0, n / 3, m / 3, n / 3));imge[5] = img(Rect(m / 3, n / 3, m / 3, n / 3));imge[6] = img(Rect(m / 3 * 2, n / 3, m / 3, n / 3));imge[7] = img(Rect(0, n / 3 * 2, m / 3, n / 3));imge[8] = img(Rect(m / 3, n / 3 * 2, m / 3, n / 3));imge[9] = img(Rect(m / 3 * 2, n / 3 * 2, m / 3, n / 3));

图像布局

y x	1	2	3
1	1	2	3
2	4	5	6
3	7	8	9

2 九张图片显示在一张图片中------resize（）函数

resize函数其实是调整大小的，但我们尝试一下发现，其实也可以用它来实现图片的“粘贴”功能
关于resize函数的用法如下

函数原型

void resize(InputArray src, OutputArray dst, Size dsize, double fx=0, double fy=0, int interpolation=INTER_LINEAR)

参数含义
src - 原图
dst - 目标图像。当参数dsize不为0时，dst的大小为size；否则，它的大小需要根据src的大小，参数fx和fy决定。dst的类型（type）和src图像相同
dsize - 目标图像大小。当dsize为0时，它可以通过以下公式计算得出：

所以，参数dsize和参数(fx, fy)不能够同时为0
fx - 水平轴上的比例因子。当它为0时，计算公式如下：

interpolation - 插值方法。共有5种：
１）INTER_NEAREST - 最近邻插值法
２）INTER_LINEAR - 双线性插值法（默认）
３）INTER_AREA - 基于局部像素的重采样（resampling using pixel area relation）。对于图像抽取（image decimation）来说，这可能是一个更好的方法。但如果是放大图像时，它和最近邻法的效果类似。
４）INTER_CUBIC - 基于4x4像素邻域的3次插值法
５）INTER_LANCZOS4 - 基于8x8像素邻域的Lanczos插值
借鉴博文
原文：https://blog.csdn.net/u012005313/article/details/51943442

将combine分区
cv::Mat combine = cv::Mat::zeros(m, n, img.type());
Mat imgROI1 = combine(Rect(0, 0, m / 3, n / 3));
Mat imgROI2 = combine(Rect(m / 3, 0, m / 3, n / 3));
Mat imgROI3 = combine(Rect(m / 3 * 2, 0, m / 3, n / 3));
Mat imgROI4 = combine(Rect(0, n / 3, m / 3, n / 3));
Mat imgROI5 = combine(Rect(m / 3, n / 3, m / 3, n / 3));
Mat imgROI6 = combine(Rect(m / 3 * 2, n / 3, m / 3, n / 3));
Mat imgROI7 = combine(Rect(0, n / 3 * 2, m / 3, n / 3));
Mat imgROI8 = combine(Rect(m / 3, n / 3 * 2, m / 3, n / 3));
Mat imgROI9 = combine(Rect(m / 3 * 2, n / 3 * 2, m / 3, n / 3));
//combine图片即为显示图片，将其分成九个区域//将图片a[1]至a[9]"粘贴"到combine的九个区域中
resize(a[1], imgROI1, imgROI1.size());
resize(a[2], imgROI2, imgROI2.size());
resize(a[3], imgROI3, imgROI3.size());
resize(a[4], imgROI4, imgROI4.size());
resize(a[5], imgROI5, imgROI5.size());
resize(a[6], imgROI6, imgROI6.size());
resize(a[7], imgROI7, imgROI7.size());
resize(a[8], imgROI8, imgROI8.size());
resize(a[9], imgROI9, imgROI9.size());

3 随机初始化九张图片的位置

新建图片数组a[],a[1]–a[9]随机存储imge的九张图片，将a[1]–a[9]顺序粘贴在九个区域中，即可随机初始化九张图片的位置。
代码实现：

//生成随机数int i, j;int b[10];//存储获取到的随机数。int f[10] = { 0 };//存储是否获取到过。int nx = 1; //计数器。srand((unsigned)time(NULL));//设置随机数种子。while (nx < 10){int my = rand() % 10; //获取一个0~9的随机数。if (f[my]||my==0) continue;//该数之前已经获取到过。b[nx++] = my;//将该数存入数组。f[my] = 1;//标记该数已经获取过。}for (i = 1; i <= 9; i++){a[i] = imge[b[i]];}

4 利用鼠标回调函数交换两张不相邻图片的位置

思路：
1 由鼠标位置坐标得知所点击区域是几
2 明确是第几次点击，以此判断我所要交换的第一二张图片
3 设置中间变量，利用数组交换两张图片的位置
4 交换前需要判断两张图片是否相邻

关于鼠标回调函数

opencv中的鼠标响应的函数是setMouseCallback()。

c++: void setMousecallback(const string& winname, MouseCallback onMouse, void* userdata=0)

winname:窗口的名字
onMouse:鼠标响应函数，回调函数。指定窗口里每次鼠标时间发生的时候，被调用的函数指针。这个函数的原型应该为void on_Mouse(int event, int x, int y, int flags, void* param);
userdate：传给回调函数的参数

void on_Mouse(int event, int x, int y, int flags, void* param);

event是 CV_EVENT_*变量之一
EVENT_MOUSEMOVE 滑动
EVENT_LBUTTONDOWN 左击
EVENT_RBUTTONDOWN 右击
EVENT_MBUTTONDOWN 中键点击
EVENT_LBUTTONUP 左键放开
EVENT_RBUTTONUP 右键放开
EVENT_MBUTTONUP 中键放开
EVENT_LBUTTONDBLCLK 左键双击
EVENT_RBUTTONDBLCLK 右键双击
EVENT_MBUTTONDBLCLK 中键双击
x和y是鼠标指针在图像坐标系的坐标（不是窗口坐标系）
flags是CV_EVENT_FLAG的组合，flag的状态有：
EVENT_FLAG_LBUTTON 左键拖拽
EVENT_FLAG_RBUTTON 右键拖拽
EVENT_FLAG_MBUTTON 中键拖拽
EVENT_FLAG_CTRLKEY 按住Ctrl不放
EVENT_FLAG_SHIFTKEY 按住Shift不放
EVENT_FLAG_ALTKEY 按住Alt不放
param是用户定义的传递到setMouseCallback函数调用的参数。

参照原文：https://blog.csdn.net/roly_yu/article/details/44623739

判断所点击图片的位置—利用鼠标位置(x,y)

//可参照上方表格
int f(int xx, int yy)
{int s;if (xx + yy == 2){s = 1;}if (xx + yy == 3 && xx > yy){s = 2;}if (xx + yy == 4 && xx > yy){s = 3;}if (xx + yy == 3 && xx < yy){s = 4;}if (xx + yy == 4 && xx == yy){s = 5;}if (xx + yy == 5 && xx > yy){s = 6;}if (xx + yy == 4 && xx < yy){s = 7;}if (xx + yy == 5 && xx < yy){s = 8;}if (xx + yy == 6){s = 9;}return s;
}

void onMouseHandle(int event, int x, int y, int flags, void *param)
{int xx ;int yy ;switch (event){case CV_EVENT_LBUTTONDOWN ://左键单击{ xx = x / (m / 3) + 1;yy = y / (n / 3) + 1;++t;if (t % 2 == 1){first = f(xx, yy);}if (t % 2 == 0){second = f(xx, yy);if (second == first + 3 || second == first - 3 || second == first + 1 || second == first - 1){temp = a[first];a[first] = a[second];a[second] = temp;resize(a[1], imgROI1, imgROI1.size());resize(a[2], imgROI2, imgROI2.size());resize(a[3], imgROI3, imgROI3.size());resize(a[4], imgROI4, imgROI4.size());resize(a[5], imgROI5, imgROI5.size());resize(a[6], imgROI6, imgROI6.size());resize(a[7], imgROI7, imgROI7.size());resize(a[8], imgROI8, imgROI8.size());resize(a[9], imgROI9, imgROI9.size());}}imshow("九宫格", combine);}break;default:break;}}

效果展示

全部代码

#include <iostream>#include <opencv2/core/core.hpp>#include <opencv2/highgui/highgui.hpp>#include <opencv2/imgproc/imgproc.hpp>#include <stdlib.h>#include <time.h> using namespace cv;
using namespace std;Mat img = imread("C:\\picture\\aa.jpg");
int m = img.cols;//宽
int n = img.rows;//高
cv::Mat combine = cv::Mat::zeros(m, n, img.type());
Mat imgROI1 = combine(Rect(0, 0, m / 3, n / 3));
Mat imgROI2 = combine(Rect(m / 3, 0, m / 3, n / 3));
Mat imgROI3 = combine(Rect(m / 3 * 2, 0, m / 3, n / 3));
Mat imgROI4 = combine(Rect(0, n / 3, m / 3, n / 3));
Mat imgROI5 = combine(Rect(m / 3, n / 3, m / 3, n / 3));
Mat imgROI6 = combine(Rect(m / 3 * 2, n / 3, m / 3, n / 3));
Mat imgROI7 = combine(Rect(0, n / 3 * 2, m / 3, n / 3));
Mat imgROI8 = combine(Rect(m / 3, n / 3 * 2, m / 3, n / 3));
Mat imgROI9 = combine(Rect(m / 3 * 2, n / 3 * 2, m / 3, n / 3));
Mat a[10];
Mat imge[10];
int t = 0;
int first;
int second;
Mat temp;int f(int xx, int yy);
void onMouseHandle(int event, int x, int y, int flags, void *param);int main(){//分割图像rect()imge[1] = img(Rect(0, 0, m / 3, n / 3));imge[2] = img(Rect(m / 3, 0, m / 3, n / 3));imge[3] = img(Rect(m / 3 * 2, 0, m / 3, n / 3));imge[4] = img(Rect(0, n / 3, m / 3, n / 3));imge[5] = img(Rect(m / 3, n / 3, m / 3, n / 3));imge[6] = img(Rect(m / 3 * 2, n / 3, m / 3, n / 3));imge[7] = img(Rect(0, n / 3 * 2, m / 3, n / 3));imge[8] = img(Rect(m / 3, n / 3 * 2, m / 3, n / 3));imge[9] = img(Rect(m / 3 * 2, n / 3 * 2, m / 3, n / 3));//生成随机数int i, j;int b[10];//存储获取到的随机数。int f[10] = { 0 };//存储是否获取到过。int nx = 1; //计数器。srand((unsigned)time(NULL));//设置随机数种子。while (nx < 10){int my = rand() % 10; //获取一个0~9的随机数。if (f[my]||my==0) continue;//该数之前已经获取到过。b[nx++] = my;//将该数存入数组。f[my] = 1;//标记该数已经获取过。}for (i = 1; i <= 9; i++){a[i] = imge[b[i]];}namedWindow("九宫格");resize(a[1], imgROI1, imgROI1.size());resize(a[2], imgROI2, imgROI2.size());resize(a[3], imgROI3, imgROI3.size());resize(a[4], imgROI4, imgROI4.size());resize(a[5], imgROI5, imgROI5.size());resize(a[6], imgROI6, imgROI6.size());resize(a[7], imgROI7, imgROI7.size());resize(a[8], imgROI8, imgROI8.size());resize(a[9], imgROI9, imgROI9.size());imshow("九宫格", combine);setMouseCallback("九宫格", onMouseHandle, (void*)&combine);// 等待6000 ms后窗口自动关闭waitKey(0);return 0;}int f(int xx, int yy)
{int s;if (xx + yy == 2){s = 1;}if (xx + yy == 3 && xx > yy){s = 2;}if (xx + yy == 4 && xx > yy){s = 3;}if (xx + yy == 3 && xx < yy){s = 4;}if (xx + yy == 4 && xx == yy){s = 5;}if (xx + yy == 5 && xx > yy){s = 6;}if (xx + yy == 4 && xx < yy){s = 7;}if (xx + yy == 5 && xx < yy){s = 8;}if (xx + yy == 6){s = 9;}return s;
}
void onMouseHandle(int event, int x, int y, int flags, void *param)
{int xx ;int yy ;switch (event){case CV_EVENT_LBUTTONDOWN ://左键单击{ xx = x / (m / 3) + 1;yy = y / (n / 3) + 1;++t;if (t % 2 == 1){first = f(xx, yy);}if (t % 2 == 0){second = f(xx, yy);if (second == first + 3 || second == first - 3 || second == first + 1 || second == first - 1){temp = a[first];a[first] = a[second];a[second] = temp;resize(a[1], imgROI1, imgROI1.size());resize(a[2], imgROI2, imgROI2.size());resize(a[3], imgROI3, imgROI3.size());resize(a[4], imgROI4, imgROI4.size());resize(a[5], imgROI5, imgROI5.size());resize(a[6], imgROI6, imgROI6.size());resize(a[7], imgROI7, imgROI7.size());resize(a[8], imgROI8, imgROI8.size());resize(a[9], imgROI9, imgROI9.size());}}imshow("九宫格", combine);}break;default:break;
}
}