Imagelab-0-QT label显示 opencv 图像

开始之前

这其实也是opencv 处理图像的系列, 只是想我们在进一步复杂化我们的代码之前, 每次给出代码我们都要给出很多, 然后窗口的显示上也有很多不必要的东西, 我们为了后面进行更好的算法效果以及算法执行, 我们先规划一下程序, 写出来一个界面程序出来, 这样的话, 我们之后的程序部分只需要给出一个函数的部分就好, 我们的程序算法在增加的时候, 将功能做到一个一个的菜单里面来, 这样一边处理算法, 一边写出界面图像…

目录

正文

我们主要将图形界面部分使用代码来实现, 这样不需要进行编译便能够大概知道结果…

我们在进行复杂的界面之前, 我们先实现一个简单的工程, 能够使用 opencv 读取图片, 然后显示在 qt 的 label 控件 上面,

QT 图像格式

在qt 中提供了几种图像显示的方式,可以看这篇文章关于QPixmap/QImage/QPicture, 详细的介绍了几种格式的使用方法,
QT自带的 QImage 和 QPixmap, 都是支持读取图像的,可以直接用于显示图像, 但是呢, 我们后续还要进行复杂的算法实现, 所以我们还是要转回到 opencv 的怀抱中来, 那么我们不可避免的需要进行数据图像格式之间的互相转换, 目前大多说使用的方式都是 opencv的 Mat 格式与 QT QPixmap 格式之间的转换, 按后显示到 QT 的label 上面, 我们先来实现一下:

UI 界面设计

这里稍微提一下 QT Designer, 我们可以通过托拽的方式实现界面的设计, 也提供了很多组件让我们选择, 我们先暂时使用这种比较简单的方式进行, 后面逐渐介绍更为复杂的操作.

这里我们使用数字 1,2,3,4, 标记了四个区域, 就是我们常用的区域了

• 1. 编辑区域, 可以编辑与托拽, 能够预览
• 2. 控件结构树, 各个控件的从属结构, 名称就是 ObjectName 能够在程序使用控件名进行操控
• 3. 属性区域,能够直接调整相关的参数, 也可以在程序中进行调整各种属性
• 4. 控件区域, 不同种类的控件, 可以用于托拽, 直接显示在窗口中…

具体的实现方式不用去深究, 且通过托拽改变 .ui 文件, 实际上就是 一个 xml 格式的文件, QT 通过 uic 会将 xxx.ui 转换成 ui_xxx.h 文件, 我们通过引用即可直接操控控件了,

如果我们改变了ui, 但是运行之后没有更新, 在工程山强制 qmake 一下就能解决了

在我们这个工程中, 我们托拽了两个 QLabel 组件和两个 QPushButton 组件, 相应的可以在上图的2 区域看到对象名称…

• MainWindow:
  • geometry: 0,0,960,540 : 我们运行的窗口尺寸
  • windowsTitle: “ImageLab”
• lb_src:
  • geometry: 20,30,400,400 用于指定控件的左上角位置和 尺寸宽高, 我们使用这个参数指定即可
  • frameShape: WinPanel
• lb_dst:
  • geometry: 470,30,400,400 用于指定控件的左上角位置和 尺寸宽高, 我们使用这个参数指定即可
  • frameShape: WinPanel
• btn_test1,btn_test2: 都是默认托拽的 , 尺寸默认, 位置 随意就好, 后面用于我们进行一下测试算法 暂时忽略
• pt_log: 多行文本, 用于显示一些结果信息, 测试过程中的一些输出

我们这个界面也没有布局, 就是很简单的把东西给显示出来, 在编辑之后 按 Shift+Alt+R能够预览界面,
如果有布局之类的需要及时查看, 我们这里就是简单的ui , 布局什么样 得到的就是什么样子

我们后面的测试可能就是左边显示原始图像, 右边显示运算之后 的图像, 我们来实现一下

这里关于 ui界面的设计 只是稍微提一下, 你们可以直接查看其他的文章介绍的使用方法, 简单点的可以看使用Qt Designer来设计界面和使用Qt Designer创建界面

信号与槽 实现 UI点击事件

在我们进行显示图像之前, 我们稍微介绍一下 QT 的信号与槽的实现方式, QT 最NB 的地方实现了信号与槽 , 简单理解就是, 我们提前将信号与一个槽(函数)声明连接, 然后我们点击一个按钮 会发射一个信号, 然后经过QT的信号处理机制 就能够调用我们提前设定的函数了,

PS: 只是粗略 的这么看就行, 具体还要复杂很多, 后面再说

我们简单实现一下 这个功能, 点击输出我们点击可哪个按钮…
我们点击 测试按钮1: btn_test1调用一个函数 testFunc1, 然后在结果框输出点击了按钮1 ,

,我们只看 核心的代码部分

// mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"

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

   // 设定信号与槽 连接
   connect(ui->btn_test1,&QPushButton::clicked,this,&MainWindow::testFunc1);
   connect(ui->btn_test2,&QPushButton::clicked,this,&MainWindow::testFunc2);

   // 初始化 ui
   ui->pt_log->clear(