VS2010+OpenCV2.4.3+Qt4.8.4 图形界面第一个演示程序

终于将VS2010+OpenCV2.4.3+Qt4.8.4配置完成，当然要享受一下图形界面的的好处了，于是参考http://blog.csdn.net/yang_xian521/article/details/6968012这篇文章，来做一个图像打开与翻转的图形界面演示程序。

 

1.ui设计

先新建工程Qt Project --> Qt Application，点击finish完成工程的创建。然后在项目属性里的连接器的附加依赖项里面添加opencv的lib文件。

工程创建好之后，一个后缀名为.ui的文件就是关于界面设计的。我们首先就要对它操作。

双击.ui，进入designer（设计师），首先创建两个按钮，拖拽两个Push Buttons到Form中去，修改其名称，一个名字为Open Image，一个为Process。（注意：原作者用的插件是qt vs intergration，但是相信大部分人和我一样，用的都是QtAddin，因此原作者在文中所提到的右击button，添加信息链接槽，我实现不了，我在这写下我的比较笨方法，回头再尝试一下作者的简单方法）

 

2.定义button函数

 在头文件（qt_test1.h）中添加两个button调用的函数：

private slots: void on_OpenImage_clicked(); void on_ProcessImage_clicked();

 

同时，添加OpenCV的头文件与变量，完成后的头文件（qt_test1.h）如下：

#ifndef QT_TEST1_H#define QT_TEST1_H#include <QFileDialog> #include <QLabel>#include <QtGui/QMainWindow>#include "ui_qt_test1.h"#include <opencv/cv.h>  #include <opencv/highgui.h> class Qt_test1 : public QMainWindow{Q_OBJECTpublic:Qt_test1(QWidget *parent = 0, Qt::WFlags flags = 0);~Qt_test1();private:Ui::Qt_test1Class ui;cv::Mat image;  // cv image;private slots: void on_OpenImage_clicked(); void on_ProcessImage_clicked();};#endif // QT_TEST1_H

 

在源文件（qt_test1.cpp）中，定义那两个button的函数：

 

与MFC中显示图片需要CvvImage类似，要想在Qt的Form中显示图片，图片的格式也必须为QImage，需要将cv::Mat的RGB通道顺序变换为RGBA，QImage的格式为Format_RGB32，调用cvtColor实现.（后经实验，对于webcam视频需要使用参数：BGR2RGB，Format_RGB888这组参数，格式的问题真是混乱！！！）（这段话是yang_xian521说的）

 

#include "qt_test1.h"Qt_test1::Qt_test1(QWidget *parent, Qt::WFlags flags): QMainWindow(parent, flags){ui.setupUi(this);}Qt_test1::~Qt_test1(){}void Qt_test1::on_OpenImage_clicked(){QString fileName = QFileDialog::getOpenFileName(this, tr("Open Image"), ".", tr("Image Files (*.png *.jpg *.jpeg *.bmp)"));image = cv::imread(fileName.toAscii().data());//       注释的部分是按键响应，并不显示在Form中// cv::namedWindow("Original Image");// cv::imshow("Original Image", image);// image=cv::imread("D:/demo.jpg");// cv::imshow("test",image);cv::cvtColor(image, image, CV_RGB2RGBA);QImage img = QImage((const unsigned char*)(image.data), image.cols, image.rows, QImage::Format_RGB32);QLabel *label = new QLabel(this);label->move(200, 50);//图像在窗口中所处的位置;label->setPixmap(QPixmap::fromImage(img));label->resize(label->pixmap()->size());label->show();}void Qt_test1::on_ProcessImage_clicked(){cv::flip(image, image, 1);  // cv::namedWindow("Output Image");  // cv::imshow("Output Image", image);//cv::cvtColor(image, image, CV_RGB2RGBA);QImage img = QImage((const unsigned char*)(image.data), image.cols, image.rows, QImage::Format_RGB32);QLabel *label = new QLabel(this);label->move(200, 50);label->setPixmap(QPixmap::fromImage(img));label->resize(label->pixmap()->size());label->show();}

至此我们的两个button的函数就搞定了，下一步就是把button与函数链接起来就好了。

 

3.链接button与函数：

回到.ui的designer，转入编辑信号/槽模式：

 

双击Open Image这个button，弹出配置连接界面：

注意，我这是配置好了才有右边的两个函数。左边点击click()，右边点击“编辑”，进入如下界面：

在“槽”中添加刚才编辑的两个函数：

on_OpenImage_clicked()

on_ProcessImage_clicked()

与各自button相连。

 

这样就将button与相应的函数链接起来了，完成后在右下方的信号/槽编辑器显示如下：

 

4.运行程序：