官方文档链接:https://dovyski.github.io/cvui/usage/
下面是使用 CVUI 需要执行的几个步骤。
C++ 中使用 CVUI (Using cvui in C++)
1. Include cvui.h
下载最新版本的 CVUI 并将 cvui.h 与项目文件放在一起。在 C++ 的一个文件中包含 cvui.h ,如下所示:
#define CVUI_IMPLEMENTATION
#include "cvui.h"
重要:
如果你在多个文件中使用 cvui.h。例如,不同的布局类,则需要且只能在一个 C++ 文件中使用 #define CVUI_IMPLEMENTATION。所有其他文件都应该包含 cvui.h,而不要 #define CVUI_IMPLEMENTATION 。例如:
// File: main.cpp
#define CVUI_IMPLEMENTATION <-- CVUI_IMPLEMENTATION defined in one (and only one) C++ source file.
#include "cvui.h"
// (. . .)
/
// File: another.cpp
#include "cvui.h"
// (. . .)
/
// File: MyClass.hpp
#include "cvui.h"
// (. . .)
/
提示
查看多个文件示例,了解在包含 cvui.h 的多个文件的项目中使用 cvui 的更多信息。
2. 初始化 CVUI (Initialize cvui)
在使用 CVUI 之前,需要先调用 cvui::init() 对其进行初始化。最简单的方法是初始化 cvui 并调用它创建将要使用的 OpenCV 窗口。下面是初始化 cvui 并创建窗口的实例:
#define CVUI_IMPLEMENTATION
#include "cvui.h"
#include <iostream>
#include <opencv2/opencv.hpp>
#include <opencv2/core/core.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/imgcodecs/imgcodecs.hpp>
#include <opencv2/highgui/highgui.hpp>
#define WINDOW_NAME "CVUI Test"
int main(int argc, char** argv)
{
// Tell cvui to init and create a window
cvui::init(WINDOW_NAME);
while (true)
{
// your app logic here
if (cv::waitKey(20) == 27)
break;
}
return 0;
}
提示:如果需要在多个窗口中使用 cvui,或者希望对创建窗口的过程进行更多控制,请查看 Multiple OpenCV windows 页和 multiple-windows 以及 multiple-windows-complex 示例。
3. 提供 cvui 组件 (Render cvui components)
cvui 中的所有组件均提供给 cv::Mat。下面是一个示例,展示如何在名为 frame 的 cv::Mat 上呈现 “Hello world” 消息:
#define CVUI_IMPLEMENTATION
#include "cvui.h"
#include <iostream>
#include <opencv2/opencv.hpp>
#include <opencv2/core/core.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/imgcodecs/imgcodecs.hpp>
#include <opencv2/highgui/highgui.hpp>
#define WINDOW_NAME "CVUI Test"
int main(int argc, char** argv)
{
cvui::init(WINDOW_NAME);
// Create a frame
cv::Mat frame = cv::Mat(cv::Size(400, 200), CV_8UC3);
while (true)
{
// Clear the frame
frame = cv::Scalar(49, 52, 200);
// render a message in the frame at position (10, 15)
cvui::text(frame, 10, 15, "Hello world!");
if (cv::waitKey(20) == 27)
break;
}
return 0;
}
此段代码运行完没有显示出 “Hello world!” 请先看完 “4. 显示内容”
4. 显示窗口内容 (Show (window) content)
渲染组件后,使用 cvui::imshow() 显示最终结果,这是 cvui 对 OpenCV 中的 cv::imshow() 的改进版本。
#define CVUI_IMPLEMENTATION
#include "cvui.h"
#include <iostream>
#include <opencv2/opencv.hpp>
#include <opencv2/core/core.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/imgcodecs/imgcodecs.hpp>
#include <opencv2/highgui/highgui.hpp>
#define WINDOW_NAME "CVUI Test"
int main(int argc, char** argv)
{
cvui::init(WINDOW_NAME);
// Create a frame
cv::Mat frame = cv::Mat(cv::Size(400, 200), CV_8UC3);
while (true)
{
// Clear the frame
frame = cv::Scalar(49, 52, 200);
// render a message in the frame at position (10, 15)
cvui::text(frame, 10, 15, "Hello world!");
cvui::imshow(WINDOW_NAME, frame);
if (cv::waitKey(20) == 27)
break;
}
return 0;
}
运行结果
当使用 cvui::imshow() 代替 cv::imshow() 时,cvui 不仅会显示内容,还会更新它的内部结构,以确保所有的 UI 交互正常工作。
如果要使用 cv::imshow(),则必须在使用 cv::imshow() 之前和调用完 cvui 组件之后调用 cvui::update(),以便 cvui 可以在执行其内部操作来处理鼠标交互,例如:
5. (可选项)禁用 cvui 编译信息 (Disable cvui compilation messages)
cvui 的编译过程将生成一些控制台消息以帮助开发人员调试可能出现的问题,例如使用 #define CVUI_IMPLEMENTATION 包含 cvui.h。
例如在 VS 2019 中使用 cvui 编译程序得到的编译信息如下:
同时,可以在 #include “cvui.h” 之前定义 #define CVUI_DISABLE_COMPILATION_NOTICES 来禁用编译信息。
#include <opencv2/opencv.hpp>
#define CVUI_DISABLE_COMPILATION_NOTICES
#define CVUI_IMPLEMENTATION
#include "cvui.h"