【QT开发（5）】0919-QT里面新增ui类，新增使用opencv读取图片的普通类，在ui类中显示图片

参考资料

1、Qt Creator快速入门_第三版__霍亚飞编著
2、《Qt+OpenCV显示图片（Mat转QImage然后显示在QLabel上）》

输出材料

https://gitee.com/hiyanyx/qt5.14-cpp_-empty_-project/tree/Study2023-section5/

git分支“Study2023-section5”

新增文件布局

新增ui类

c.cpp  
c.h
c.ui
1
2
3

新增使用opencv读取图片的普通类

A.cpp
A.h
1
2

具体步骤

1.1 创建新增使用opencv读取图片的普通类

为了更加方便，可在QT 中添加普通类，这样会自动生成一些模板语句，方便使用。然后再A.h 在引入opencv 头文件#include 。在成员中增加 图片路径成员image_name和 cv的图像数据结构Mat 的成员img1。以及增加了成员函数int test()

/*
 * =========================== A.h ==========================
 *                                        CREATE --
 *                                        MODIFY -- 
 * ----------------------------------------------------------
 */
#ifndef CLASS_A_H
#define CLASS_A_H

#include "innDebug.h"
#include 


class A{
public:
    A( int data_ ): data(data_){
        debug::log( "class A: Constructor" );
    }

    ~A(){
        debug::log( "class A: Destructor" );
    }

    inline int get_data()const noexcept{
        return this->data;
    } 

    int test();
    cv::Mat img1;

private:
    int data;
    std::string image_name = "/var/GPU1NFSshare/LaneDetection_End2End/DATASET/images/1.jpg";

};

void print_A_data( const A &a_ );

#endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

然后修改A.cpp 文件,撰写成员test()函数：用opencv 读取图片。

/*
 * =========================== A.cpp ==========================
 *                                        CREATE --
 *                                        MODIFY -- 
 * ----------------------------------------------------------
 */
#include "A.h"
#include "pch.h"


void print_A_data( const A &a_ ){
    debug::log( "a.data = {}", a_.get_data() );
}

int A::test()
{
    std::string image_name = "1.jpg";
    //this pointer can distinguish same name var
    debug::log(this->image_name);
    this->img1 = cv::imread(this->image_name, -1);
    if (!this->img1.data ) {
        debug::log("fail to imread");
        return -1;
    }
    else
    {
        //cv::imshow("source image", img1);
        //cv::waitKey(1);
        debug::log("success to imread");
    }

    return 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.1 创建c.ui文件

进入可视化设计界面。默认情况中间的主设计区下已经有一个QMainWindow和QWidget的对象。我们需要将采集到图像显示到一个QLabel的部件上，从右侧的部件列表的“DisplayWidget”中选择“Label”部件拖动到中间.

1.2 创建c类

在c.cpp 中写下在c.ui 在显示图片的语句。主要是将Mat对象转为QImage对象并使用Qt显示出来的步骤如下：

1.将使用OpenCV imread函数加载一张图片

2.将Mat转为QImage

3.将QImage转为QPixmap

4.将QPixmap放到QLabel上并显示出来

首先导入头文件

#include 
#include "A.h"
1
2

然后在c.cpp 写

#include "c.h"
#include "ui_c.h"

c::c(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::c)
{
    ui->setupUi(this);

	//初始化A类，实例化b
    A b(0);
    //在b中进行图片读取
    b.test();
    // Mat convert to QImage
    QImage dst = QImage(b.img1.data,b.img1.cols,b.img1.rows,b.img1.step,QImage::Format_BGR888);
    // 在ui中显示图像
    ui->label->setPixmap(QPixmap::fromImage(dst));
}

c::~c()
{
    delete ui;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

补充讲解：ui文件是什么？

可以理解：ui 就是一种可以自动生成 h 头文件的可视化编程工具。与自己写QT 可视化界面代码的效果是一模一样的。

我们尝试使用代码写一个界面aboutme界面，而不用ui设计工具。

1、 头文件中引入

#include 
#include 
1
2

2、 在c类，设计abouteme 函数，申明函数QPushButton *about_button;，例如下列头函数的书写：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 
#include 
#include 
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void aboutme();


private:
    Ui::MainWindow *ui;
    QPushButton *about_button;

};
#endif // MAINWINDOW_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3、然后在cpp 中撰写详细代码

void MainWindow::aboutme(){
    QMessageBox *about_message=new QMessageBox(this);
    about_message->setWindowTitle("??");
    about_message->setText("name yanyx\n"
                           "QQ \n"
                           "date");
    about_message->exec();
}
1
2
3
4
5
6
7
8

4、在c 类引入button 按钮，并关联aboutme 函数

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // aboute me button
    about_button=new QPushButton(this);
    connect(about_button,SIGNAL(clicked()),this,SLOT(aboutme()));
    about_button->setText("about");
    about_button->setGeometry(8,8,90,30);

}
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：