VS2019下基于Qt+Opencv的用户界面开发

• 一、安装工作

1.1安装Qt和vs下的Qt插件

1.1.1 下载与安装Qt

（1）选择与VS2019匹配的版本。https://download.qt.io/archive/qt/5.14/5.14.2/

（2）安装，其中选择几个重要的组件

安装完成之后，将目录中的几个重要组件添加到系统环境变量。

参考：Vs2019+Qt+Opencv环境配置心得_安装vs2019 qt opencv-CSDN博客

1.1.2 下载与安装Qt插件

（1）方式1：建立C++工程，点击拓展--管理拓展--联机--搜索qt--下载（网络较好时下载较快）

（2）方式2：直接下载插件安装Index of /archive/vsaddin/2.7.1

1.2 VS2019和Opencv安装比较简单

二、配置工作

2.1 VS2019下的Opencv配置相对简单，满互联网和博客，百家讲坛。

2.2 VS2019下的Qt的配置。

（1）配置工作其实就是Qt插件的安装工作。其中要说明的是，在建立好Qt工程项目之后，解决方案资源管理器中会出现“Form Files”，如下左图。双击里面的*.ui文件，直接会跳转到Qt界面，如下右图。

（2）弹出上面右图后，拖动控件有时候会报错。原因是Designer设置的问题，这时候，在*.ui文件上右键，选择打开方式，添加，浏览到Qt安装目录下的bin中的designer.exe。可以解决问题。

（3）Qt一旦设置好，之后建立Qt项目就属于一劳永逸。

三、GUI编辑

3.1 建立Qt项目

（1）搜索qt，定位到Qt Widgets Application，下一步

（2）命名：项目名称；设置项目位置；创建

（3）创建之后会连续弹出下面三个对话框，点击“Next”和“Finish”

  

（4）完成之后，解决方案资源管理器中会出现下面的文件，运行之后弹出Qt界面，就算Qt测试成功。

  

3.2配置Opencv

涉及opencv的每一个工程项目，都需要这样配置一次。具体参考另一篇文档。

3.3在Qt编辑界面

（1）双击Form Files下面的*.ui文件，跳转到Qt Designer界面，拖动相应的控件，完成界面编辑，如图。

（2）保存一下，回到Vs窗口，运行一下。验证界面。至此界面编辑完成，下来进行核心函数的编写。

3.4写槽函数

上面的步骤仅仅完成了一个空壳界面的工作，算是虚有其表。核心部分，还需继续努力。接下对各个主要控件进行事件编辑和槽函数。

3.4.1 编辑qtGuiForOpencv.h文件

方式1：在Header Files文件下，双击qtGuiForOpencv.h打开这个头文件，进行槽函数和按钮动作的链接。链接的格式：on_控件名_clicked（）。

这里两个按钮的控件名分别为：OpenFig、Progress和Quit

编辑按钮程序前，需要将三个按钮的objectName改成控件名。例如

///qtGuiForOpencv.h////

#pragma once

#include <QtWidgets/QMainWindow>

#include "ui_qtGuiForOpencv.h"

#include<QGraphicsScene> 

#include<QGraphicsView>                   //graphicsview类

#include<opencv2\imgproc\imgproc.hpp>

#include <opencv2\core\core.hpp>

#include <opencv2\highgui\highgui.hpp>  //opencv申明

#include <qfiledialog.h>                //getopenfilename 类申明

#include <qlabel.h>                     //label类

using namespace cv;

class qtGuiForOpencv : public QMainWindow

{

    Q_OBJECT

public:

    qtGuiForOpencv(QWidget *parent = Q_NULLPTR);

    ~qtGuiForOpencv(); //析构函数

/// <summary>

/// 添加槽函数

/// </summary>

private slots:

    void on_OpenFig_clicked();

void on_Progress_clicked();

void on_Quit_clicked();

/// <summary>

/// 定义类中对象

/// </summary>

private:

    Ui::qtGuiForOpencvClass ui;

    Mat image;

    QLabel* label;

    QLabel* label_2;

};

方式2：直接在Qt界面点击添加，参考

QT+VS+Opencv制作界面显示图片_opencv和vs做软件界面-CSDN博客 例如，Quit按钮的操作函数与链接。

3.4.2 编辑qtGuiForOpencv.cpp文件

qtGuiForOpencv.cpp这个文件中链接着qtGuiForOpencv.h文件内

#include "qtGuiForOpencv.h"

using namespace cv;

using namespace std;

qtGuiForOpencv::qtGuiForOpencv(QWidget *parent)

    : QMainWindow(parent)

{

    ui.setupUi(this);

}

qtGuiForOpencv::~qtGuiForOpencv()

{

    //析构函数

}

/// <summary>

/// 打开图片的槽函数

/// </summary>

void qtGuiForOpencv::on_OpenFig_clicked()

{

    QString filename;

    filename = QFileDialog::getOpenFileName(this,

        tr("选择图像"),

        "",

        tr("Images (*.png *.bmp *.jpg *.tif *.GIF )"));

    if (filename.isEmpty())

    {

        return;

    }

    else

    {

       

        string str = filename.toStdString();  // 将filename转变为string类型；

        image = imread(str);

        //image=imread(fileName.toLatin1().data);

        cvtColor(image, image, CV_BGR2RGB);

        cv::resize(image, image, Size(300, 200));

        QImage img = QImage((const unsigned char*)(image.data), image.cols, image.rows, QImage::Format_RGB888);

        label = new QLabel();

        label->setPixmap(QPixmap::fromImage(img));

        label->resize(QSize(img.width(), img.height()));

        ui.scrollArea->setWidget(label);

    }

}

/// <summary>

/// 处理图片的槽函数

/// </summary>

void qtGuiForOpencv::on_Progress_clicked()

{

    flip(image, image, 4);//反转函数 0 上下反转；整数，水平发转；负数，水平垂直均反转

    QImage img1 = QImage((const unsigned char*)(image.data), image.cols, image.rows, QImage::Format_RGB888);

    label_2 = new QLabel();

    label_2->setPixmap(QPixmap::fromImage(img1));

    label_2->resize(QSize(img1.width(), img1.height()));

    ui.scrollArea_2->setWidget(label_2);

}

/// <summary>

/// 关闭窗口

/// </summary>

void qtGuiForOpencv::on_Quit_clicked()

{

    close();

}