3. CVUI 2.7.0 入門：使用 （官方文檔翻譯）

官方文檔鏈接：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"