小喵的唠叨话:话说近些日子小喵也要起来写散文了,想了两周照旧尚未眉目,不知情该写些什么。恰好又被分配了少数表明数据的做事,于是乎想写点代码,休闲一下。结果也正是那篇博客。对了,小喵对GUI编制程序一无所知,只精晓Windows有MFC,Mac上的不知晓。。。恰好听新闻说过QT,并且知道那个界面库是跨平台的,也就选取了那么些工具了。

三个轻巧残暴的人脸认证标明工具的兑现,人脸标记

小喵的唠叨话:话说近期小喵也要起来写散文了,想了两周依然尚未眉目,不知道该写些什么。恰好又被分配了好几标明数据的劳作,于是乎想写点代码,休闲一下。结果也便是那篇博客。对了,小喵对GUI编制程序一无所知,只略知一二Windows有MFC,Mac上的不明了。。。恰好听别人讲过QT,并且知道这么些分界面库是跨平台的,也就选择了那几个工具了。

 

正文系原创,转发请申明出处~

小喵的博客:

博客原来的小说:

 

那正是说未来初步和小喵一同瞎猫似的捯饬QT吧~

先看一眼效果图:

是或不是乍一看还挺粲焕。作用上也辛亏,至少轻易的评释职业都能达成了。那么让我们来一步一步的达成这么些工具吧。

 

一、效用要求

其一顺序首要的意义是到位一位脸认证的标记工具。

具体来讲,正是给定比较多对面部的图形,要申明一下这一对是还是不是同一人。同时,每部分的图片的人脸一张是生活照,一张是证件照,供给同时标明出哪张是证照,那张是生活照。照片都是经过检验和对齐的,那么些工具只必要产生轻松的来得、注脚、保存记录的干活就足以。

当然思量到有时候供给标明的list大概十分大,能够参与跳转的作用。申明结果都保存在内部存款和储蓄器,用户能够随时变动,点击保存,则写入硬盘。

本文系原创,转发请评释出处~

二、数据结构

那么是或不是当今就足以入手写代码了啊?当然不是!

小喵写这么些软件一共用了3天的时间,第一天形成了四个超简单demo程序,通晓了一晃QT的事件增添,路线选取和显示图片的多少个作用。之后又精心的沉思了弹指间各类数码的布局,才入手做了这一版工具。未有一个清晰的数目标定义,会导致相当多的无用功。所以,大家在写程序的时候,要在策动阶段多花一点岁月来斟酌,究竟写代码才是最轻易易行的事体不是啊?

小喵的博客:http://www.miaoerduo.com

三、分界面制作

GUI程序的分界面一贯是个很令人胸闷的标题,记得在本科学习Java的时候,需求自个儿手写贰个控件,使用new
JButton()类似的方法开创按钮,然后增多到主分界面上,地方怎么的都得调用这一个指标来设置,十三分的麻烦。那么QT能或无法简化那一个进度吧?答案是没有疑问的。

创造项目->选用Application->Qt Widgets
Application。然后项目名改成Anno
Pro,别的任何暗中同意设置,就成立好了三个项目了。这一个初步的花色里面有3个文本夹:头文件,源文件和分界面文件,以及三个.pro结尾的等级次序布局文件。

既是须要编写制定分界面,大家本来会想查看一下分界面文件了,双击MainWindow.ui(笔者这里全都是默许的名字)。现身的是多个满载种种控件的可视化分界面编辑器。

根据大家后面包车型大巴界面样式,拖动左侧的控件,就能够落成分界面的编纂了。小喵这里只用到了两种控件:

QPushButton:种种按键

QLabel:所以显得文字和图像的区域都是那那些控件

QFrame:一个容器,小喵用它只是为了协会上更清楚

QSlider:滑动条,小喵用的是水平滑动条

QStatusBar:状态栏,
那应当是自带的,要是删掉的话,在MainWindow控件点击右键就足以创制了

拖动完毕后,双击空间,就足以给空间设置文本,同有时候注意给各样控件起二个白璧微瑕的名字(起名字很要紧的!《代码大全》中竟然用一章,好几十页的篇幅介绍怎么样命名)。

至于别的的控件,我们能够自动钻研。反正小喵未来的道行应该才是筑基。

那正是说大家就欣然的达成了分界面包车型地铁编写制定了~点击左右下的运转Logo(三角形的不胜),就足以见见本人的运作程序了!

博客原著:http://www.miaoerduo.com/qt/两个简约凶恶的人脸认证标记工具的落实.html

四、数据定义与初阶化

大家以前曾经深入分析了我们需求的数额了,那有个别起头利用代码的定义那个构造。

开荒大家/*唯一的*/头文件mianwindow.h,增添供给的变量,小喵就一贯把温馨的头文件复制下来了:

 1 #ifndef MAINWINDOW_H
 2 #define MAINWINDOW_H
 3 
 4 #include <QMainWindow>
 5 #include <vector>
 6 #include <string>
 7 namespace Ui {
 8 
 9 class MainWindow;
10 }
11 
12 class MainWindow : public QMainWindow
13 {
14     enum AnnoState {
15         UNKNOWN = 0,  // 未标注
16         YES = 1,      // 匹配
17         NO = 2,       // 不匹配
18         UNSURE = 3    // 不确定
19     };
20 
21 public:
22     explicit MainWindow(QWidget *parent = 0);
23     ~MainWindow();
24 
25 private:
26     Ui::MainWindow *ui; // 自带的,ui界面的接口
27     std::vector<std::string> image_list_1;  // 用来存放左边的图片的list
28     std::vector<std::string> image_list_2;  // 用来存放右边的图片的list
29     int current_idx;                        // 当前图片对的id
30     int total_pair_num;                     // 总共的图片对的数目
31     std::vector< AnnoState > annotation_list;  // 标注的结果
32 };
33 
34 #endif // MAINWINDOW_H

可以见到,小喵增多了三个enum的体系,用来表示标明结果的品类。尽管唯有4个情形,大家照旧足以平素约定多少个int值来表示,但相信本人,为如此4个情景定义一个枚举类型是一丝一毫有须要的。

然后大家富有的分子变量都是private的。具体意思,注释中也是有写明。

下一步便是起先化了。初叶化的历程当然得写在构造函数里,这里,小喵在开首化的时候强迫用户选取三个标号的list,要是不那样做,会有众多的不测意况。请见谅小喵的怠惰。。。

 1 MainWindow::MainWindow(QWidget *parent) :
 2     QMainWindow(parent),
 3     ui(new Ui::MainWindow)
 4 {
 5     ui->setupUi(this);
 6 
 7     // 选择输入文件
 8     while (1) {
 9         QString file_name = QFileDialog::getOpenFileName(this, "choose a file to annotate", ".");
10         if (file_name.isEmpty()) {
11             int ok = QMessageBox::information(this, "choose a file to annotate", "Don't want to work now?", QMessageBox::Ok | QMessageBox::Cancel);
12             if (ok == QMessageBox::Ok) {
13                 exit(0);
14             }
15             continue;
16         }
17         std::ifstream is(file_name.toStdString());
18         std::string image_name;
19         bool is_odd = true;
20         while (is >> image_name) {
21             if (is_odd) {
22                 this->image_list_1.push_back(image_name);
23             } else {
24                 this->image_list_2.push_back(image_name);
25             }
26             is_odd = !is_odd;
27         }
28         is.close();
29 
30         if (image_list_1.size() != image_list_2.size()) {
31             QMessageBox::information(this, "choose a file to annotate", "this image list is not even", QMessageBox::Ok);
32             continue;
33         }
34         if (0 == image_list_1.size()) {
35             QMessageBox::information(this, "choose a file to annotate", "this image list is empty", QMessageBox::Ok);
36             continue;
37         }
38         break;
39     }
40 
41     assert(image_list_1.size() == image_list_2.size());
42     // 初始化其他参数
43     this->total_pair_num = image_list_1.size();
44     this->current_idx = 0;
45     std::vector<AnnoState> annotation_list(this->total_pair_num, AnnoState::UNKNOWN);
46     this->annotation_list.swap(annotation_list);
47 
48     display();
49 }

此处用了多少个QT的组件:

QFileDialog:这么些组件是一个文书对话框,个中有三个拾叁分灵光的函数:getOpenFileName用于选择一个文件,并再次回到文件名;getSaveFileName用于采取三个文书来保存数据,并赶回多少个文本名。这三个函数的参数很多,小喵只用到了前头的3个,用到的参数依次是:父组件,标题,开首目录。别的的参数的作用,喵粉能够去官网查一下。

QMessageBox::information,这些函数的效劳是展现一个音讯窗口。四个参数分别代表:父组件,标题,内容,开关样式。

相信大家懂一丢丢C++的学识的话,很轻易看懂这段代码。

这里正是选用了贰个周而复始,让用户选取文件,如果选用成功了,则读取数据到我们的list中,最后伊始化了别的的参数,在调用display函数来体现。那一个display函数是大家和煦编排的,后边会谈起。其他,assert函数是预感,他保障了断言的数码的合法性,借使违规,程序会脱离。想选取这么些函数,需求包蕴头文件assert.h。

 

五,增添事件响应

小喵在此以前通晓到,QT使用的是一种功率信号和槽的风云机制,是一种相当高档的体制。那么有未有何轻松的办法,为大家的各样控件绑定本身的的风云呢?

在分界面编辑分界面下,右击亟待丰盛事件的长空,然后选用转到槽。那时候会有多数选项,这里直接选取clicked就能够。然后你会发觉大家的mainwindow类中,多了二个pivate
slot的函数(也正是槽函数)。

大家能够给每叁个亟需增加事件的函数都用这种方法来绑定事件,最后头文件中会出现这么的扬言(函数名称的条条框框是:on_控件名_信号类型):

1 private slots:
2     void on_pushButton_save_clicked();
3     void on_pushButton_ok_clicked();
4     void on_pushButton_no_clicked();
5     void on_pushButton_unsure_clicked();
6     void on_pushButton_next_clicked();
7     void on_pushButton_prev_clicked();
8     void on_pushButton_switch_clicked();
9     void on_horizontalSlider_progress_sliderReleased();

在源文件中,也会生成空的函数定义。我们只需求团结做到函数定义就水到渠成!

下边给出的是除了save的全部的函数的概念。

重大办事是,给每个事件编写修改数据的代码,而不去承担负何分界面相关的有些。各样控件能够经过this->ui来安装和收获。使用Qt
Creator的时候,要充足利用智能提醒。

 1 /**
 2  * @brief MainWindow::on_pushButton_ok_clicked
 3  * 标注为"匹配"
 4  */
 5 void MainWindow::on_pushButton_ok_clicked()
 6 {
 7     this->annotation_list[this->current_idx] = MainWindow::AnnoState::YES;
 8     ++ this->current_idx;
 9     display();
10 }
11 
12 /**
13  * @brief MainWindow::on_pushButton_no_clicked
14  * 标注为"不匹配"
15  */
16 void MainWindow::on_pushButton_no_clicked()
17 {
18     this->annotation_list[this->current_idx] = MainWindow::AnnoState::NO;
19     ++ this->current_idx;
20     display();
21 }
22 
23 /**
24  * @brief MainWindow::on_pushButton_unsure_clicked
25  * 标注为"不确定"
26  */
27 void MainWindow::on_pushButton_unsure_clicked()
28 {
29     this->annotation_list[this->current_idx] = MainWindow::AnnoState::UNSURE;
30     ++ this->current_idx;
31     display();
32 }
33 
34 /**
35  * @brief MainWindow::on_pushButton_next_clicked
36  * 移动到下一组
37  */
38 void MainWindow::on_pushButton_next_clicked()
39 {
40     ++ this->current_idx;
41     display();
42 }
43 
44 /**
45  * @brief MainWindow::on_pushButton_prev_clicked
46  * 移动到上一组
47  */
48 void MainWindow::on_pushButton_prev_clicked()
49 {
50     -- this->current_idx;
51     display();
52 }
53 
54 /**
55  * @brief MainWindow::on_pushButton_switch_clicked
56  * 交换两边的图片
57  */
58 void MainWindow::on_pushButton_switch_clicked()
59 {
60     std::string tmp = this->image_list_1[this->current_idx];
61     this->image_list_1[this->current_idx] = this->image_list_2[this->current_idx];
62     this->image_list_2[this->current_idx] = tmp;
63     display();
64 }
65 
66 /**
67  * @brief MainWindow::on_horizontalSlider_progress_sliderReleased
68  * 拖放进度条,控制进度
69  */
70 void MainWindow::on_horizontalSlider_progress_sliderReleased()
71 {
72     int pos = this->ui->horizontalSlider_progress->value();
73     this->current_idx = pos;
74     this->display();
75 }

迄今结束,我们的大要的法力逻辑就编写完了。

那么怎么让分界面上出示大家的种类状态吧?注意到了笔者们地方的每五个函数都调用了display这几个函数了呢?这几个函数正式承担绘制分界面包车型客车效率。

有个别重要介绍几个函数:

 1 const std::string UNSURE_FILE = ":File/images/unsure.png";
 2 const std::string YES_FILE = ":File/images/yes.gif";
 3 const std::string NO_FILE = ":File/images/no.gif";
 4 const std::string UNKNOWN_FILE = ":File/images/unknown.png";
 5 
 6 /**
 7  * @brief set_image 将图像设置到label上,图像自动根据label的大小来缩放
 8  * @param label
 9  * @param image
10  */
11 void set_image(QLabel *label, const QPixmap &image) {
12     float ratio(0.);
13     ratio = 1. * label->width() / image.width();
14     ratio = fmin( 1. * label->height() / image.height(), ratio );
15     QPixmap m = image.scaled(static_cast<int>(image.width() * ratio), static_cast<int>(image.height() * ratio));
16     label->setPixmap(m);
17 }
18 
19 void set_image(QLabel *label, const std::string image_path) {
20     QPixmap image(image_path.c_str());
21     set_image(label, image);
22 }
23 
24 /**
25  * @brief MainWindow::display \n
26  * 根据系统中的所有的变量来设置当前界面中的各个部分的内容
27  */
28 void MainWindow::display() {
29 
30     if (this->current_idx >= this->total_pair_num) {
31         QMessageBox::information(this, "annotation over", "Congratulations! You've finished all the job! Please save your work :)", QMessageBox::Ok);
32         this->current_idx = this->total_pair_num - 1;
33     }
34     if (this->current_idx < 0) {
35         QMessageBox::information(this, "annotation warning", "You must start at 0 (not a negative position, I konw you wanna challenge this app) :)", QMessageBox::Ok);
36         this->current_idx = 0;
37     }
38 
39     // 进度条
40     this->ui->horizontalSlider_progress->setRange(0, this->total_pair_num - 1);
41     this->ui->horizontalSlider_progress->setValue(this->current_idx);
42 
43     // 状态栏
44     this->ui->statusBar->showMessage(QString((std::to_string(this->current_idx + 1) + " / " + std::to_string(this->total_pair_num)).c_str()));
45 
46     // 文件名
47     std::string image_name_1 = this->image_list_1[this->current_idx];
48     std::string image_base_name_1 = image_name_1.substr(image_name_1.find_last_of("/") + 1);
49     std::string image_name_2 = this->image_list_2[this->current_idx];
50     std::string image_base_name_2 = image_name_2.substr(image_name_2.find_last_of("/") + 1);
51     this->ui->label_image_name_1->setText(image_base_name_1.c_str());
52     this->ui->label_image_name_2->setText(image_base_name_2.c_str());
53 
54     // 显示图像
55     set_image(this->ui->label_image_view_1, image_name_1);
56     set_image(this->ui->label_image_view_2, image_name_2);
57 
58     // 显示标注结果
59     std::string show_image_name = UNKNOWN_FILE;
60     switch (this->annotation_list[this->current_idx]) {
61     case AnnoState::UNKNOWN:
62         show_image_name = UNKNOWN_FILE;
63         break;
64     case AnnoState::YES:
65         show_image_name = YES_FILE;
66         break;
67     case AnnoState::NO:
68         show_image_name = NO_FILE;
69         break;
70     case AnnoState::UNSURE:
71         show_image_name = UNSURE_FILE;
72         break;
73     }
74     set_image(this->ui->label_image_compare_status, show_image_name);
75 
76 }

最起初大家定义了4个图片的门道。那足以是相对路线只怕相对路线。咱们那边的门路设置的相比诡异,在上面我们会讲到。

set_image负担将加以的图纸绘制到QLabel上,为了突显的狼狈,图像会依照QLabel的尺码来动态的缩放。那样就不会出现有个图像太大或太小的情景了。

display则是背负每个地方的绘图。

还差一步是保留结果:

 1 /*
 2  * @brief MainWindow::on_pushButton_save_clicked \n
 3  * 保存结果文件
 4  */
 5 void MainWindow::on_pushButton_save_clicked()
 6 {
 7     QString file_name = QFileDialog::getSaveFileName(this, "choose a file to save", ".");
 8     if (file_name.isEmpty()) {
 9         QMessageBox::information(this, "choose a file to save", "please enter a legal file name", QMessageBox::Ok);
10         return;
11     }
12     std::ofstream os(file_name.toStdString());
13     for (int idx = 0; idx < static_cast<int>(this->annotation_list.size()); ++ idx) {
14         os << this->image_list_1[idx] << " " << this->image_list_2[idx] << " " << this->annotation_list[idx] << "\n";
15     }
16     os.close();
17     QMessageBox::information(this, "save", "save result success", QMessageBox::Ok);
18 }

那就是说未来起始和小喵一同瞎猫似的捯饬QT吧~

六、增多能源

是因为大家的顺序是索要publish出去的,由此图片文件等能源,必须含有在先后中。那么Qt怎么添Gavin件资源呢?

在项目视图下,右键项目->增多新文件->Qt->Qt Resource
File。就足以创建叁个qrc文件了。

本身这里给那些文件取名称为image。

自此,建议在项目标根目录里面新建三个文件夹,用来寄存能源。小喵的布局是其同样子的:

小喵的门类根目录新建了二个文本夹images,并将图像资料归入了那一个文件夹。

随后回到QT,

小喵的唠叨话:话说方今小喵也要从头写诗歌了,想了两周照旧未有头脑,不通晓该写…

先看一眼效果图:

图片 1

是还是不是乍一看还挺炫彩。功效上也幸而,至少简单的标记专门的职业都能成就了。那么让大家来一步一步的成功那个工具吧。

一、效率需要

这么些程序首要的意义是完结一人脸认证的标号工具。

具体来讲,正是给定相当多对脸部的图形,要标记一下这一对是还是不是同壹个人。同有的时候间,每部分的图样的人脸一张是生活照,一张是牌照,需求同一时间标记出哪张是牌照,那张是生活照。照片都以通过检查测量检验和对齐的,那么些工具只须要完结轻巧的显得、标明、保存记录的劳作就能够。

不移至理思虑到一时候必要标明的list可能非常大,能够参预跳转的作用。证明结果都保存在内存,用户能够每一天变动,点击保存,则写入硬盘。

二、数据结构

那正是说是否后天就足以动手写代码了吗?当然不是!

小喵写那个软件一共用了3天的时日,第一天产生了贰个超轻松demo程序,熟识了弹指间QT的事件增加,路线采取和展现图片的多少个职能。之后又精心的思虑了一下各样数据的布局,才出手做了这一版工具。未有三个清晰的多寡的概念,会招致广大的无用功。所以,大家在写程序的时候,要在打算阶段多花一点年华来思索,究竟写代码才是最简易的作业不是啊?

  1. 输入数据格式:因为小喵的干活条件下,大家都对linux有一对打听,所以能够自行生成好图片的路线的list,这里统一要求,list必须是偶数行(2n行),代表n对,相邻的图纸为一对。
  2. 标注数据存款和储蓄:思索到大家不但须要标记是或不是局地,还得标明哪张是牌照,所以无妨直接在读数据的时候就分为两份,那样就用五个std::vector<std::string>来积存就行了。
  3. 表明过程的事态:大家要求明白评释进度中的那多个音信呢?主要应该有:总量据量,当前已标明的对数。
  4. 标注结果:每一对都有一组对应地
    结果,思量到有4中状态:未标明,不分明,不相配,相称那八种,我们定义一个枚举的景况表enum
    AnnoState就好。之后用八个std::vector<enum
    AnnoState>来积累标记结果。

三、界面制作

GUI程序的分界面一贯是个很令人发烧的主题材料,记得在本科学习Java的时候,供给团结手写四个控件,使用new
JButton()类似的办法开创开关,然后增添到主分界面上,地点怎么的都得调用那一个目的来安装,十三分的累赘。那么QT能还是不可能简化这么些历程吧?答案是必定的。

创建项目->选用Application->Qt Widgets
Application。然后项目名改成Anno
Pro,别的一切默许设置,就创设好了三个连串了。那些开头的品类里面有3个公文夹:头文件,源文件和分界面文件,以及一个.pro结尾的类型配置文件。

图片 2

既然如此要求编写制定分界面,大家当然会想查看一下分界面文件了,双击MainWindow.ui(作者这里全是私下认可的名字)。出现的是三个满载各个控件的可视化分界面编辑器。

图片 3

依照我们后面包车型客车分界面样式,拖动左侧的控件,就能够完结分界面包车型大巴编写制定了。小喵这里只用到了三种控件:

QPushButton:种种按键

QLabel:所以显得文字和图像的区域都以那那一个控件

QFrame:一个容器,小喵用它只是为了组织上更显然

QSlider:滑动条,小喵用的是水平滑动条

QStatusBar:状态栏,
这应当是自带的,如若删掉的话,在MainWindow控件点击右键就足以创建了

拖动完结后,双击空间,就足以给空间设置文本,同不时候注意给种种控件起三个称心的名字(起名字很要紧的!《代码大全》中竟然用一章,好几十页的篇幅介绍怎么着命名)。

关于其余的控件,大家可以活动钻研。反正小喵以往的道行应该才是筑基。

那正是说大家就高兴的成就了分界面包车型客车编辑撰写了~点击左右下的运转Logo(三角形的不胜),就能够见见自身的运作程序了!

四、数据定义与初叶化

咱俩原先已经分析了大家需求的多寡了,那部分起首应用代码的概念这几个协会。

开垦大家/*唯一的*/头文件mianwindow.h,加多必要的变量,小喵就径直把自身的头文件复制下来了:

 1 #ifndef MAINWINDOW_H
 2 #define MAINWINDOW_H
 3 
 4 #include <QMainWindow>
 5 #include <vector>
 6 #include <string>
 7 namespace Ui {
 8 
 9 class MainWindow;
10 }
11 
12 class MainWindow : public QMainWindow
13 {
14     enum AnnoState {
15         UNKNOWN = 0,  // 未标注
16         YES = 1,      // 匹配
17         NO = 2,       // 不匹配
18         UNSURE = 3    // 不确定
19     };
20 
21 public:
22     explicit MainWindow(QWidget *parent = 0);
23     ~MainWindow();
24 
25 private:
26     Ui::MainWindow *ui; // 自带的,ui界面的接口
27     std::vector<std::string> image_list_1;  // 用来存放左边的图片的list
28     std::vector<std::string> image_list_2;  // 用来存放右边的图片的list
29     int current_idx;                        // 当前图片对的id
30     int total_pair_num;                     // 总共的图片对的数目
31     std::vector< AnnoState > annotation_list;  // 标注的结果
32 };
33 
34 #endif // MAINWINDOW_H

能够看到,小喵增加了一个enum的系列,用来代表注解结果的体系。即使独有4个情景,我们以致能够直接约定多少个int值来代表,但相信作者,为这么4个状态定义三个枚举类型是一丝一毫有不能缺少的。

其后大家具备的成员变量都是private的。具体意思,注释中也是有写明。

下一步正是开端化了。伊始化的经过当然得写在构造函数里,这里,小喵在初阶化的时候强迫用户挑选二个标注的list,假如不这么做,会有为数相当的多的意外处境。请见谅小喵的怠惰。。。

 1 MainWindow::MainWindow(QWidget *parent) :
 2     QMainWindow(parent),
 3     ui(new Ui::MainWindow)
 4 {
 5     ui->setupUi(this);
 6 
 7     // 选择输入文件
 8     while (1) {
 9         QString file_name = QFileDialog::getOpenFileName(this, "choose a file to annotate", ".");
10         if (file_name.isEmpty()) {
11             int ok = QMessageBox::information(this, "choose a file to annotate", "Don't want to work now?", QMessageBox::Ok | QMessageBox::Cancel);
12             if (ok == QMessageBox::Ok) {
13                 exit(0);
14             }
15             continue;
16         }
17         std::ifstream is(file_name.toStdString());
18         std::string image_name;
19         bool is_odd = true;
20         while (is >> image_name) {
21             if (is_odd) {
22                 this->image_list_1.push_back(image_name);
23             } else {
24                 this->image_list_2.push_back(image_name);
25             }
26             is_odd = !is_odd;
27         }
28         is.close();
29 
30         if (image_list_1.size() != image_list_2.size()) {
31             QMessageBox::information(this, "choose a file to annotate", "this image list is not even", QMessageBox::Ok);
32             continue;
33         }
34         if (0 == image_list_1.size()) {
35             QMessageBox::information(this, "choose a file to annotate", "this image list is empty", QMessageBox::Ok);
36             continue;
37         }
38         break;
39     }
40 
41     assert(image_list_1.size() == image_list_2.size());
42     // 初始化其他参数
43     this->total_pair_num = image_list_1.size();
44     this->current_idx = 0;
45     std::vector<AnnoState> annotation_list(this->total_pair_num, AnnoState::UNKNOWN);
46     this->annotation_list.swap(annotation_list);
47 
48     display();
49 }

此处用了三个QT的零件:

QFileDialog:那个组件是一个文件对话框,在这之中有多少个特别使得的函数:getOpenFileName用于选用一个文本,并回到文件名;getSaveFileName用于选用一个文件来保存数据,并赶回一个文书名。那八个函数的参数非常多,小喵只用到了前边的3个,用到的参数依次是:父组件,标题,开始目录。别的的参数的功效,喵粉能够去官方网站查一下。

QMessageBox::information,那些函数的作用是显得二个新闻窗口。四个参数分别代表:父组件,标题,内容,开关样式。

信任我们懂一丢丢C++的学问的话,很轻便看懂这段代码。

此处正是行使了三个生生不息,让用户挑选文件,若是接纳成功了,则读取数据到我们的list中,最后开头化了其余的参数,在调用display函数来呈现。这几个display函数是大家和好编写的,前边会谈到。其它,assert函数是预知,他保险了断言的多少的合法性,假诺违法,程序会脱离。想行使这几个函数,必要包罗头文件assert.h。

五,增多风云响应

小喵之前明白到,QT使用的是一种复信号和槽的风浪机制,是一种异常高档的体制。那么有未有怎么着简单的格局,为大家的每一种控件绑定自身的的风浪呢?

在分界面编辑分界面下,右击急需丰盛事件的长空,然后选用转到槽。那时候会有好多选项,这里一分区直属机关接大选择clicked就足以。然后你会意识大家的mainwindow类中,多了二个pivate
slot的函数(也正是槽函数)。

图片 4

大家得以给每二个亟需增添事件的函数都用这种形式来绑定事件,最后头文件中会出现那样的扬言(函数名称的平整是:on_控件名_时限信号类型):

1 private slots:
2     void on_pushButton_save_clicked();
3     void on_pushButton_ok_clicked();
4     void on_pushButton_no_clicked();
5     void on_pushButton_unsure_clicked();
6     void on_pushButton_next_clicked();
7     void on_pushButton_prev_clicked();
8     void on_pushButton_switch_clicked();
9     void on_horizontalSlider_progress_sliderReleased();

在源文件中,也会生成空的函数定义。大家只供给团结产生函数定义就顺理成章!

上边给出的是除了save的全数的函数的定义。

首要工作是,给各样事件编写修改数据的代码,而不去承负担何界面相关的部分。各类控件能够经过this->ui来设置和收获。使用Qt
Creator的时候,要丰裕利用智能提示。

 1 /**
 2  * @brief MainWindow::on_pushButton_ok_clicked
 3  * 标注为"匹配"
 4  */
 5 void MainWindow::on_pushButton_ok_clicked()
 6 {
 7     this->annotation_list[this->current_idx] = MainWindow::AnnoState::YES;
 8     ++ this->current_idx;
 9     display();
10 }
11 
12 /**
13  * @brief MainWindow::on_pushButton_no_clicked
14  * 标注为"不匹配"
15  */
16 void MainWindow::on_pushButton_no_clicked()
17 {
18     this->annotation_list[this->current_idx] = MainWindow::AnnoState::NO;
19     ++ this->current_idx;
20     display();
21 }
22 
23 /**
24  * @brief MainWindow::on_pushButton_unsure_clicked
25  * 标注为"不确定"
26  */
27 void MainWindow::on_pushButton_unsure_clicked()
28 {
29     this->annotation_list[this->current_idx] = MainWindow::AnnoState::UNSURE;
30     ++ this->current_idx;
31     display();
32 }
33 
34 /**
35  * @brief MainWindow::on_pushButton_next_clicked
36  * 移动到下一组
37  */
38 void MainWindow::on_pushButton_next_clicked()
39 {
40     ++ this->current_idx;
41     display();
42 }
43 
44 /**
45  * @brief MainWindow::on_pushButton_prev_clicked
46  * 移动到上一组
47  */
48 void MainWindow::on_pushButton_prev_clicked()
49 {
50     -- this->current_idx;
51     display();
52 }
53 
54 /**
55  * @brief MainWindow::on_pushButton_switch_clicked
56  * 交换两边的图片
57  */
58 void MainWindow::on_pushButton_switch_clicked()
59 {
60     std::string tmp = this->image_list_1[this->current_idx];
61     this->image_list_1[this->current_idx] = this->image_list_2[this->current_idx];
62     this->image_list_2[this->current_idx] = tmp;
63     display();
64 }
65 
66 /**
67  * @brief MainWindow::on_horizontalSlider_progress_sliderReleased
68  * 拖放进度条,控制进度
69  */
70 void MainWindow::on_horizontalSlider_progress_sliderReleased()
71 {
72     int pos = this->ui->horizontalSlider_progress->value();
73     this->current_idx = pos;
74     this->display();
75 }

到现在,我们的大意的功用逻辑就编写完了。

那就是说怎么让分界面上浮现大家的系统状态吧?注意到了大家地点的每二个函数都调用了display这些函数了吗?这么些函数正式承担绘制分界面的意义。

局地重视介绍多少个函数:

 1 const std::string UNSURE_FILE = ":Fileunsure.png";
 2 const std::string YES_FILE = ":Fileyes.gif";
 3 const std::string NO_FILE = ":Fileno.gif";
 4 const std::string UNKNOWN_FILE = ":Fileunknown.png";
 5 
 6 /**
 7  * @brief set_image 将图像设置到label上,图像自动根据label的大小来缩放
 8  * @param label
 9  * @param image
10  */
11 void set_image(QLabel *label, const QPixmap &image) {
12     float ratio(0.);
13     ratio = 1. * label->width() / image.width();
14     ratio = fmin( 1. * label->height() / image.height(), ratio );
15     QPixmap m = image.scaled(static_cast<int>(image.width() * ratio), static_cast<int>(image.height() * ratio));
16     label->setPixmap(m);
17 }
18 
19 void set_image(QLabel *label, const std::string image_path) {
20     QPixmap image(image_path.c_str());
21     set_image(label, image);
22 }
23 
24 /**
25  * @brief MainWindow::display \n
26  * 根据系统中的所有的变量来设置当前界面中的各个部分的内容
27  */
28 void MainWindow::display() {
29 
30     if (this->current_idx >= this->total_pair_num) {
31         QMessageBox::information(this, "annotation over", "Congratulations! You've finished all the job! Please save your work :)", QMessageBox::Ok);
32         this->current_idx = this->total_pair_num - 1;
33     }
34     if (this->current_idx < 0) {
35         QMessageBox::information(this, "annotation warning", "You must start at 0 (not a negative position, I konw you wanna challenge this app) :)", QMessageBox::Ok);
36         this->current_idx = 0;
37     }
38 
39     // 进度条
40     this->ui->horizontalSlider_progress->setRange(0, this->total_pair_num - 1);
41     this->ui->horizontalSlider_progress->setValue(this->current_idx);
42 
43     // 状态栏
44     this->ui->statusBar->showMessage(QString((std::to_string(this->current_idx + 1) + " / " + std::to_string(this->total_pair_num)).c_str()));
45 
46     // 文件名
47     std::string image_name_1 = this->image_list_1[this->current_idx];
48     std::string image_base_name_1 = image_name_1.substr(image_name_1.find_last_of("/") + 1);
49     std::string image_name_2 = this->image_list_2[this->current_idx];
50     std::string image_base_name_2 = image_name_2.substr(image_name_2.find_last_of("/") + 1);
51     this->ui->label_image_name_1->setText(image_base_name_1.c_str());
52     this->ui->label_image_name_2->setText(image_base_name_2.c_str());
53 
54     // 显示图像
55     set_image(this->ui->label_image_view_1, image_name_1);
56     set_image(this->ui->label_image_view_2, image_name_2);
57 
58     // 显示标注结果
59     std::string show_image_name = UNKNOWN_FILE;
60     switch (this->annotation_list[this->current_idx]) {
61     case AnnoState::UNKNOWN:
62         show_image_name = UNKNOWN_FILE;
63         break;
64     case AnnoState::YES:
65         show_image_name = YES_FILE;
66         break;
67     case AnnoState::NO:
68         show_image_name = NO_FILE;
69         break;
70     case AnnoState::UNSURE:
71         show_image_name = UNSURE_FILE;
72         break;
73     }
74     set_image(this->ui->label_image_compare_status, show_image_name);
75 
76 }

最初步大家定义了4个图片的门道。那能够是绝对路线或然相对路线。我们那边的路径设置的可比奇怪,在底下大家会讲到。

set_image负担将加以的图片绘制到QLabel上,为了显示的狼狈,图像会根据QLabel的尺寸来动态的缩放。那样就不会冒出有个图像太大或太小的情事了。

display则是担当每个地方的绘图。

还差一步是保存结果:

 1 /*
 2  * @brief MainWindow::on_pushButton_save_clicked \n
 3  * 保存结果文件
 4  */
 5 void MainWindow::on_pushButton_save_clicked()
 6 {
 7     QString file_name = QFileDialog::getSaveFileName(this, "choose a file to save", ".");
 8     if (file_name.isEmpty()) {
 9         QMessageBox::information(this, "choose a file to save", "please enter a legal file name", QMessageBox::Ok);
10         return;
11     }
12     std::ofstream os(file_name.toStdString());
13     for (int idx = 0; idx < static_cast<int>(this->annotation_list.size()); ++ idx) {
14         os << this->image_list_1[idx] << " " << this->image_list_2[idx] << " " << this->annotation_list[idx] << "\n";
15     }
16     os.close();
17     QMessageBox::information(this, "save", "save result success", QMessageBox::Ok);
18 }

六、增多财富

是因为大家的主次是索要publish出去的,由此图片文件等财富,必须带有在先后中。那么Qt怎么添Gavin件财富呢?

在项目视图下,右键项目->增添新文件->Qt->Qt Resource
File。就能够成立三个qrc文件了。

图片 5

本人那边给这么些文件取名字为image。

事后,建议在项指标根目录里面新建贰个文本夹,用来寄放财富。小喵的布局是那些样子的:

图片 6

小喵的种类根目录新建了二个文书夹images,并将图像资料放入了这些文件夹。

日后回来QT,大家刚建好的image.qrc文件->Open in Editor。

先加多前缀,这里写上/File。之后点击新建的/File目录,再点击加多->添Gavin件,选拔大家的材质文件。最后的功用图如下:

图片 7

自此,大家就足以在先后中平素访谈这个能源了。那也正是大家事先的那多少个想不到的路子的由来了。

七、发布

当前,相信每三个喵粉的顺序都能在和谐的微型Computer上欢跃的娱乐了。这么有趣的主次,怎么分享给其余人呢?

和Windows上常用的VS类似,Qt Creator的左下角有个公布选项:

图片 8

挑选Release,然后创设整个项目就足以了。之后找到大家的次第,双击就能够运维。

那会儿你会欣然的把这么些程序发给你的老铁人,得到的反应自然是:那是甚!作者打不开!

何以吗?

尽管Qt是二个跨平台的分界面库,但一旦对方的管理器上尚无安装Qt,那么就不能够运作。可是并非消极,Qt中已经给出五个理想的化解办法。

小喵的Computer是Mac的,所以找到的化解方案也是Mac的,Windows和Linux上也可以有临近的法子,我们能够活动物检疫索。

参照他事他说加以考察上述博客,大家选取macdeployqt这几个工具来拍卖一下release的先后就解决。那时候你会意识原先100k的主次形成了22M。然则一直发放旁人的时候,是足以一直运转的!

 

迄今结束,本次的博客截至了。

完全的类型在github上得以下载:

 

即使您认为本文对你有帮带,那请小喵喝杯茶啊O(∩_∩)O

图片 9

转发请表明出处~

相关文章