C++轻量级界面开发框架ImGUI介绍

大家好，欢迎来到IT知识分享网。

  如果从事过C++ Windows客户端开发，大家对MFC、Qt、DuiLib等各种DirectUI应该有了解，本篇给大家介绍一个超级轻量级的C++开源跨平台图形界面框架ImGUI.

  imgui视频教程：https://www.bilibili.com/video/BV1JM4m1o7HE/?vd_source=dddbd48a76f0f870e223c6781ad043ab

ImGUI简介

  以下是ImGUI的核心实现原理：

1. 立即模式 vs 保留模式:
   • 保留模式: 在这种模式下，用户首先创建并设置GUI小部件（如按钮、标签、滑块等），然后GUI库会处理渲染和事件。这些小部件在内存中通常会长时间存在，直到明确被销毁。
   • 立即模式: 用户在每一帧中描述要显示的GUI元素，并直接获取交互反馈，比如按钮是否被点击。不存在明确的小部件对象；只是函数调用和它们的返回值。
2. 简化的API:

   if (ImGui::Button("Click Me")) { 
         // handle button click } 

   如上述代码所示，Button函数既负责渲染按钮，也负责检查按钮是否被点击。这大大简化了编码过程。

3. 无状态: 因为GUI元素没有持久的对象表示，所以GUI的状态通常由应用程序的变量维护。这样，你不需要查询GUI小部件的状态，只需查看你自己的变量。
4. 渲染:
   • ImGUI并不直接负责渲染，而是生成一个渲染指令列表。这些指令可以被转换为具体图形API的命令，例如OpenGL或DirectX。
   • 这种方式使得ImGUI可以在各种图形API上轻松地进行端到端的渲染。
5. 输入处理: ImGUI不直接从操作系统获取输入。相反，应用程序在每一帧中提供当前的输入状态，如鼠标位置、按键状态等。
6. 灵活性: 因为ImGUI生成的是渲染指令，并不与特定的渲染技术或图形API紧密绑定，所以它可以被轻松地集成到各种应用中，无论是使用OpenGL、DirectX还是其他的图形API。

  总结：ImGUI的实现原理主要基于立即模式的设计思路，它简化了GUI的构建过程，使得开发者可以更加直观、快速地编写界面代码，而不需要管理复杂的状态和对象生命周期。此外，由于其与特定的渲染技术和图形API解耦，这也增加了其跨平台和集成的灵活性。

  ImGUI又称为Dear ImGui，它是与平台无关的C++轻量级跨平台图形界面库，没有任何第三方依赖，可以将ImGUI的源码直接加到项目中使用，也可以编译成dll, ImGUI使用DX或者OpenGL进行界面渲染，对于画面质量要求较高，例如客户端游戏，4k/8k视频播放时，用ImGUI是很好的选择，当然，你得非常熟悉DirectX或者OpenGL，不然就是宝剑在手，屠龙无力。相对于Qt、MFC、DuiLib、SOUI等，ImGUI的拓展性更好，也更轻量级，当然对于开发者的要求也更高.

  运行win32_dx12界面如下：

  ImGUI没有类似于Qt/MFC这种，可以拖拽控件进行搭建界面，ImGUI的所有控件都必须手写实现。ImGUI的demo基本提供了所有控件、图表等的实现，源码也有，可以对照的学习。
  关于ImGUI的详细介绍，可以参考github.

ImGUI的界面实现

  基本控件：label、text、checkbox、slider

  窗体控件：树形控件、图片控件、ComboBox、列表控件、菜单栏等

  根据官方提供的demo来看，基本满足开发要求。

实现登录窗口

  使用ImGUI创建一个简单的登录窗口相对容易。以下是一个基本示例，展示如何用ImGUI创建一个包含用户名和密码输入框以及登录按钮的登录窗口：

  首先确保你已经正确设置了ImGUI。下面是一个使用ImGUI创建的登录窗口示例代码：

#include "imgui.h" // 假设这是你的应用程序或游戏循环内的代码 // 声明一些变量用于存储输入 static char username[32] = ""; static char password[32] = ""; static bool show_login_window = true; void ShowLoginWindow() { 
    if (!show_login_window) return; ImGui::Begin("Login Window", &show_login_window); // 开始一个新窗口 // 添加输入框 ImGui::InputText("Username", username, IM_ARRAYSIZE(username)); ImGui::InputText("Password", password, IM_ARRAYSIZE(password), ImGuiInputTextFlags_Password); // 添加登录按钮 if (ImGui::Button("Login")) { 
    // 这里你可以添加登录验证的代码 if (/*验证 username 和 password*/) { 
    show_login_window = false; // 登录成功后的操作... } else { 
    // 登录失败，例如显示一个错误消息... } } ImGui::End(); // 结束窗口 } void Render() { 
    // 其他的渲染代码... ShowLoginWindow(); ImGui::Render(); } int main() { 
    // 初始化你的应用或游戏... while (!/*退出条件*/) { 
    // ... 其他的更新代码 Render(); } return 0; } 

  这个示例为你创建了一个包含用户名、密码输入框和登录按钮的窗口。当用户填写信息并点击“登录”按钮时，你可以在后台进行验证。如果验证成功，你可以关闭登录窗口或者进行其他操作。

  请注意，这个例子只是一个简单的展示，并没有真正的验证机制。在实际应用中，你需要添加适当的验证代码，并确保密码等敏感信息的安全性。

技术选型

  在PC端技术选型时，如果公司有音视频、图形图像、4k/8k视频业务，可以考虑一下使用ImGUI，毕竟是直接使用DX/OpenGL来进行绘制渲染，其它功能就直接使用C++来实现。

如何使用ImGUI

  参考imgui的示例代码，如下所示：

  imgui github也有一些简单的介绍，可以参考，例如:

集成

官方维护的后端/绑定(在存储库中):

• 渲染器:DirectX9, DirectX10, DirectX11, DirectX12, Metal, OpenGL/ES/ES2, SDL_Renderer, Vulkan, WebGPU。
• 平台:GLFW, SDL2, Win32, Glut, OSX, Android。
• 框架:Emscripten, Allegro5, Marmalade。

第三方后端/绑定wiki页面:

• 语言:C, c#和:Beef, ChaiScript, Crystal, D, Go, Haskell, Haxe/hxcpp, Java, JavaScript, Julia, Kotlin, Lobster, Lua, Odin, Pascal, PureBasic, Python, Ruby, Rust, Swift…
• 框架:AGS/Adventure Game Studio, Amethyst, Blender, bsf, Cinder, Cocos2d-x，勤奋引擎，Flexium, GML/Game Maker studi2, GLEQ, Godot, GTK3+OpenGL3, Irrlicht引擎，LÖVE+LUA, Magnum, Monogame, NanoRT, cine, niine Game Lib，任天堂3DS & Switch (homebrew)， Ogre, openFrameworks, OSG/OpenSceneGraph, Orx, Photoshop, px_render, Qt/QtDirect3D，SDL_Renderer, sml, Sokol, Unity，虚幻引擎4,vtk, VulkanHpp, VulkanSceneGraph, Win32 GDI, WxWidgets。
• 注意，C绑定(cimgui)是自动生成的，你可以使用它的json/lua输出来生成其他语言的绑定。