库的介绍

Dear ImGui（以下简称ImGui）是一个为C++设计的无膨胀图形用户界面库，具有最小依赖性。它输出优化的顶点缓冲区，可以在任何启用了3D管道的应用中随时渲染。该库旨在实现快速迭代，赋能程序员创建内容创建工具、可视化工具和调试工具，而不是针对平均终端用户的UI。它缺乏如完全国际化（右到左文本、双向文本、文本整形等）和可访问性功能，重点放在简洁性和生产力上。它特别适合集成到游戏引擎、实时3D应用、全屏应用、嵌入式应用或控制台平台，其中操作系统功能是非标准的。

ImGui的核心理念是即时模式（Immediate Mode），这意味着UI是在每一帧中动态生成的，而不是保留模式（Retained Mode）那样维持UI状态树。这使得它超级适合于动态数据和快速原型开发。该库由Omar Cornut开发，并由社区维护，已被许多游戏行业的主要参与者广泛使用，包括Unity、Unreal Engine等工具的内部开发。

ImGui的仓库位于
https://github.com/ocornut/imgui，包含主分支和docking分支，后者添加了对停靠和多视口的支持。库的核心文件是平台无关的，只需几个文件即可集成到现有项目中，无需特定的构建过程。仓库还包括backends文件夹用于后端支持、examples文件夹用于示例应用，以及misc文件夹用于额外工具如调试器支持。

作为一名资深C++开发者，我在使用ImGui时发现它极大地简化了工具开发的流程。无需复杂的UI框架，只需几行代码即可创建交互界面。这使得它在原型设计和调试中脱颖而出。ImGui的版本管理也很灵活，用户可以选择稳定版本或最新特性分支。

此外，ImGui支持多种语言绑定，但核心是C++。它不依赖任何外部库，如STL（虽然可以与std::string集成），这使得它在嵌入式环境中也很友善。库的大小小，编译快，适合大型项目。

特点

ImGui具有以下关键特点，使其在C++ GUI库中独树一帜：

0. 快速和高效：运行时和内存消耗低，每帧只需少量绘制调用和状态变更。适合高性能应用，如游戏引擎工具，其中帧率至关重大。ImGui的渲染是优化的，只生成必要的顶点数据，避免不必要的计算。
1. 便携性和无依赖：自包含，无外部依赖，易于移植到不同平台。只需C++编译器即可使用，无需Boost或Qt等重型库。这使得它在跨平台开发中超级便利。
2. 渲染器无关：输出顶点缓冲区和命令列表，可与各种图形API集成，如OpenGL、DirectX、Vulkan、Metal、WebGPU等。用户只需实现简单的后端即可适配自定义渲染管道。
3. 最小化状态同步：用户侧最小化UI相关状态存储，简化维护。即时模式意味着无需跟踪UI树，每帧重新构建UI，这减少了bug并提高了灵活性。
4. 易于使用：支持动态UI，反映动态数据集；代码驱动和数据驱动工具；即席短期工具和长期复杂工具。开发者可以随时调用ImGui函数，而无需复杂的回调或事件系统。
5. 支持热重载：如Edit&Continue，快速添加/移除小部件。在开发中，可以热编辑代码，立即看到UI变化，这大大加速迭代。
6. 战斗测试：被游戏行业广泛使用，稳定可靠。许多AAA游戏工作室使用它构建内部工具，证明了其 robustness。
7. 扩展性强：有众多第三方扩展，如ImPlot用于绘图、ImNodes用于节点编辑等。社区活跃，wiki页面列出了大量有用插件。
8. 输入处理灵活：支持键盘、游戏手柄、鼠标，并有标志如WantCaptureMouse来决定是否捕获输入，避免与应用冲突。
9. 字体和DPI支持：支持加载自定义字体，动态缩放以适应高DPI屏幕。从1.92版本开始，字体可动态缩放。

ImGui不适合构建高度样式化的消费者UI，由于它缺少高级主题化，但对于工具和调试UI，它是完美的选择。其哲学是“简单就是美”，避免特征膨胀。

案例

更多案例参考仓库的issue。

详细的模块分类

ImGui的模块可以分为核心模块、后端模块、示例模块和扩展模块。以下是详细分类。

核心模块

核心模块是ImGui的基础，位于根目录的文件中。这些模块处理UI的创建、布局和交互。

• 上下文和管理模块：包括ImGui::CreateContext()、ImGui::DestroyContext()、ImGui::GetIO()。用于设置全局配置，如启用键盘导航（ImGuiConfigFlags_NavEnableKeyboard）。
• 窗口模块：Begin()/End()用于创建和管理窗口。支持菜单栏、停靠（docking分支）、多视口。窗口标志如ImGuiWindowFlags_MenuBar。
• 小部件模块：这是ImGui的核心交互元素，分为显示、输入和交互类。
• 显示小部件：Text()、Image()、Plot()等，用于显示数据。
• 输入小部件：InputText()、SliderFloat()、Checkbox()、ColorEdit4()等，用于用户输入。
• 交互小部件：Button()、RadioButton()、MenuItem()等，用于触发动作。
• 布局模块：用于组织UI元素。
• Columns()用于多列布局。
• TreeNode()用于树结构。
• TabBar()用于标签页。
• Child()用于子窗口。
• 绘制模块：ImDrawList和相关函数，用于自定义2D绘制，如线条、矩形、文本。
• 样式和输入模块：ImGuiStyle用于自定义外观，ImGuiIO用于输入配置。
• ID管理模块：PushID()/PopID()用于避免ID冲突。
• 调试模块：ShowMetricsWindow()、ShowDebugLogWindow()等，用于内部调试。

后端模块

后端模块位于backends/文件夹，提供平台和渲染集成。

• 渲染后端：imgui_impl_dx11.cpp for DirectX11, imgui_impl_opengl3.cpp for OpenGL3等。负责将ImGui的绘制数据渲染到屏幕。
• 平台后端：imgui_impl_win32.cpp for Windows, imgui_impl_glfw.cpp for GLFW等。负责窗口创建和事件转发。
• 组合后端：如SDL + Vulkan。

后端初始化一般包括Init()、NewFrame()、RenderDrawData()、Shutdown()。

示例模块

examples/文件夹包含23个独立示例应用，展示不同后端集成。

• example_win32_dx11：演示Win32 + DirectX11。
• example_glfw_opengl3：GLFW + OpenGL3。
• example_sdl2_vulkan：SDL2 + Vulkan。

每个示例有main.cpp，展示完整主循环。

扩展模块

扩展是第三方插件，增强ImGui功能。从wiki Useful Extensions：

• 测试模块：imgui_test_engine for自动化测试。
• 文本编辑模块：ImGuiColorTextEdit for彩色文本编辑, Zep for vim-like编辑。
• 节点编辑模块：imgui-node-editor, ImNodes for节点图。
• 绘图模块：ImPlot for 2D/3D绘图, ImPlot3D。
• 曲线编辑模块：ImSequencer for动画序列, ImGradient for渐变。
• 文件对话模块：ImFileDialog for文件浏览器，支持图标和预览。
• 其他：ImKnob for旋钮, ImGuizmo for 3D gizmos。

这些模块需单独下载并集成。

应用场景

ImGui在各种场景中闪耀，尤其在需要快速UI的领域。

0. 游戏开发工具：创建编辑器面板、调试控制台、性能分析器。例如，在Unreal Engine中用ImGui构建自定义调试UI，显示实体属性、调整光照参数。
1. 实时可视化：在3D应用中，直播览数据集、调整算法参数。如科学模拟中，用Slider实时改变模拟变量。
2. 嵌入式和控制台：在资源有限的环境中构建UI，如 Raspberry Pi 或游戏主机工具。无依赖性使它理想。
3. 原型设计：快速构建短期工具，如变量调整器、日志查看器。支持热重载，代码变更立即生效。
4. 长期复杂工具：构建完整编辑器，如节点基于的工作流工具，使用ImNodes扩展。
5. 远程访问：使用netImgui或imgui-ws，在网络上远程控制UI，适合服务器调试。
6. 科学和数据分析：结合ImPlot绘制图表，交互探索数据。
7. 无鼠标/键盘环境：用游戏手柄模拟输入，或Synergy远程控制。

从FAQ，ImGui用于AAA游戏、研究工具，证明其 versatility。

详细各功能模块的代码示例

以下详细示例，嵌入代码。

上下文管理模块示例

初始化上下文：

 #include <imgui.h>
 #include <imgui_impl_glfw.h>
 #include <imgui_impl_opengl3.h>
 
 IMGUI_CHECKVERSION();
 ImGui::CreateContext();
 ImGuiIO& io = ImGui::GetIO();
 io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
 io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;
 ImGui::StyleColorsDark();
 ImGui_ImplGlfw_InitForOpenGL(window, true);
 ImGui_ImplOpenGL3_Init("#version 330");

主循环：

 while (!glfwWindowShouldClose(window)) {
     glfwPollEvents();
     ImGui_ImplOpenGL3_NewFrame();
     ImGui_ImplGlfw_NewFrame();
     ImGui::NewFrame();
     // UI代码
     ImGui::Render();
     glClear(GL_COLOR_BUFFER_BIT);
     ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
     glfwSwapBuffers(window);
 }

清理：

 ImGui_ImplOpenGL3_Shutdown();
 ImGui_ImplGlfw_Shutdown();
 ImGui::DestroyContext();

窗口模块示例

基本窗口：

 bool open = true;
 ImGui::Begin("Example Window", &open);
 ImGui::Text("This is some text.");
 ImGui::End();

带菜单：

 ImGui::Begin("Tool", nullptr, ImGuiWindowFlags_MenuBar);
 if (ImGui::BeginMenuBar()) {
     if (ImGui::BeginMenu("Edit")) {
         ImGui::MenuItem("Cut");
         ImGui::EndMenu();
     }
     ImGui::EndMenuBar();
 }
 ImGui::End();

小部件模块示例

文本和按钮：

 ImGui::Text("Value: %f", value);
 if (ImGui::Button("Click me")) {
     value += 1.0f;
 }

滑块和输入：

 float slider_value = 0.0f;
 ImGui::SliderFloat("Slider", &slider_value, 0.0f, 100.0f, "%.1f");
 
 char text_buf[128] = "";
 ImGui::InputText("Input", text_buf, sizeof(text_buf));

颜色和复选：

 float color[3] = {0.0f, 1.0f, 0.0f};
 ImGui::ColorEdit3("Color", color);
 
 bool checked = false;
 ImGui::Checkbox("Enable", &checked);

布局模块示例

列：

 ImGui::Begin("Columns");
 ImGui::Columns(2, "cols");
 ImGui::Text("Left");
 ImGui::NextColumn();
 ImGui::Text("Right");
 ImGui::Columns(1);
 ImGui::End();

树和标签：

 if (ImGui::TreeNode("Node")) {
     ImGui::Text("Child");
     ImGui::TreePop();
 }
 
 if (ImGui::BeginTabBar("Tabs")) {
     if (ImGui::BeginTabItem("One")) {
         ImGui::Text("Tab One");
         ImGui::EndTabItem();
     }
     ImGui::EndTabBar();
 }

绘制模块示例

自定义线条：

 ImDrawList* draw_list = ImGui::GetBackgroundDrawList();
 draw_list->AddRectFilled(ImVec2(10, 10), ImVec2(100, 100), IM_COL32(255, 255, 0, 255));

后端模块示例

DirectX11渲染：

 ImGui_ImplDX11_RenderDrawData(ImGui::GetDrawData());

扩展模块示例

ImPlot绘图：

 #include <implot.h>
 if (ImPlot::BeginPlot("Line Plot")) {
     ImPlot::PlotLine("Data", x_data, y_data, data_size);
     ImPlot::EndPlot();
 }

ImNodes节点：

 #include <imnodes.h>
 ImNodes::BeginNodeEditor();
 ImNodes::BeginNode(0);
 ImGui::Text("Node 0");
 ImNodes::EndNode();
 ImNodes::EndNodeEditor();

内存编辑：

 #include <imgui_memory_editor.h>
 MemoryEditor editor;
 editor.DrawWindow("Mem Edit", mem_data, sizeof(mem_data));

高级功能示例

输入捕获：

 if (ImGui::GetIO().WantCaptureKeyboard) {
     // 忽略应用键盘输入
 }

字体加载：

 io.Fonts->AddFontFromFileTTF("arial.ttf", 14.0f, nullptr, io.Fonts->GetGlyphRangesChineseFull());
 io.Fonts->Build();

std::string输入：

 #include <imgui_stdlib.h>
 std::string name;
 ImGui::InputText("Name", &name);

ID管理：

 ImGui::PushID(0);
 ImGui::Button("Button 0");
 ImGui::PopID();

调试窗口：

 ImGui::ShowMetricsWindow();

这些示例覆盖了主要功能，可直接复制到项目中测试。

结语

ImGui以其简洁高效改变了C++ GUI开发。通过本指南，您可以全面了解其介绍、特点、模块、场景和示例。开始您的ImGui之旅吧！