0 前言

终于学会了用cmake编译Qt程序了，接下来只要在CMakeLists.txt里面加上Opencv的内容就可以好好把两者合并在一起把玩了。

cmake编译Qt见链接——ubuntu下用cmake编译Qt

1 Demo的功能

本Demo旨在了解如何配合使用Qt和Opencv，不涉及复杂的算法问题，主要实现的功能如下：

（1）主界面包含三个按钮和左右两个显示框；

（2）三个按钮分别为"Start"，"Canny"和"Close"，对应的功能如下：

"Start"：开启电脑摄像头，并在左边显示框中显示摄像头拍摄到的内容；

"Canny"：使用Opencv自带的Canny边缘检测算法，并在右边显示框中显示通过该算法处理完摄像头内容后的内容；

"Close"：关闭界面。

2 Demo文件目录

?bin：存放可执行文件

build：存放编译过程中产生的文件

include：存放自定义的头文件

qrc：存放.qrc文件

src：存放源代码.cpp文件

ui：存放.ui文件

3 实现逻辑

3.1 创建ui文件

打开Qt Designer，绘制框图大致如下：

主窗口被命名为"VideoWidget"。

图中两个被选中的框框为两个QLabel控件，分别为"LeftLabel"和"RightLabel"，用于后面的程序中显示摄像头的视频。

此外还有三个QPushButton控件，分别的名称如图的右上角所示，分别对应"Start"，"Canny"和"Close"三个按钮。

3.2 代码实现逻辑

有了ui文件过后就开始编写代码了。主要逻辑如下：

最关键的包含两个变量，isStart和isCanny，分别是在点击Start按钮和Canny按钮后设置为真。

主要逻辑是通过定时器来定时触发Update函数，该函数判断以上两个变量完成相应的获取图像操作并完成界面更新，界面更新便会自动触发paintEvent函数，根据Update中获取的图像完成绘图。

4 CMakeLists.txt

在编译Qt的基础之上添加opencv的内容，如下：

cmake_minimum_required(VERSION 3.10.0)

project(Build_Qt_Opencv_Demo)

set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

set(CMAKE_AUTOUIC_SEARCH_PATHS ${CMAKE_SOURCE_DIR}/ui)

set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin)

find_package(Qt5 COMPONENTS Core Gui Widgets REQUIRED)
find_package(OpenCV REQUIRED)

FILE(GLOB ${PROJECT_NAME}_SOURCES "./src/*.cpp")
FILE(GLOB ${PROJECT_NAME}_UI "./ui/*.ui")
FILE(GLOB ${PROJECT_NAME}_QRC "./qrc/*.qrc")
FILE(GLOB ${PROJECT_NAME}_HEADER "./include/*")

include_directories(${PROJECT_SOURCE_DIR}/include ${OpenCV_INCLUDE_DIRS})

add_executable(${PROJECT_NAME}
          ${${PROJECT_NAME}_UI}
          ${${PROJECT_NAME}_SOURCES}
          ${${PROJECT_NAME}_QRC}
          ${${PROJECT_NAME}_HEADER}
          )       

target_link_libraries(${PROJECT_NAME} Qt5::Core Qt5::Gui Qt5::Widgets ${OpenCV_LIBS})