Dear ImGui：C++ 中轻量级的即时模式 GUI 库

icy 昨天 17 抢沙发

默认

摘要： Dear ImGui：C++ 中轻量级的即时模式 GUI 库项目概述 Dear ImGui（常被称为 imgui）是一个使用 C++ 编写的轻量级即时模式图形用户界面库。它由 O...

Dear ImGui：C++ 中轻量级的即时模式 GUI 库

项目概述

Dear ImGui（常被称为 imgui）是一个使用 C++ 编写的轻量级即时模式图形用户界面库。它由 Omar Cornut 创建并维护，专门为游戏开发、工具创建和实时应用程序设计而优化。与传统的保留模式 GUI 不同，Dear ImGui 采用了一种独特的”即时模式”设计理念，使得 GUI 的创建和管理变得更加直观和高效。

核心特性

1. 即时模式设计

Dear ImGui 的核心思想是”即时模式”GUI，这意味着每一帧都重新构建整个界面，而不是维护持久的 UI 状态。这种设计带来了以下优势： - 代码更直观：UI 逻辑与渲染逻辑紧密结合 - 更少的状态管理：无需手动跟踪 UI 元素状态 - 更快的原型开发：快速迭代 UI 设计

2. 轻量级且无依赖

纯 C++ 实现，无外部依赖
单个头文件即可使用（imgui.h）
支持多种渲染后端（OpenGL, DirectX, Vulkan, Metal 等）
支持多种平台（Windows, macOS, Linux, iOS, Android）

3. 高度可定制

完全可定制的样式系统
支持多种字体和图标
可扩展的窗口和控件系统

基本使用示例

示例 1：简单的窗口和控件

text

#include "imgui.h"

void MyGuiFunction() {
    // 开始一个新窗口
    ImGui::Begin("My Window");
    
    // 添加文本
    ImGui::Text("Hello, world!");
    
    // 添加按钮
    if (ImGui::Button("Click Me")) {
        // 按钮被点击时的处理
        doSomething();
    }
    
    // 添加滑块
    static float value = 0.5f;
    ImGui::SliderFloat("Slider", &value, 0.0f, 1.0f);
    
    // 添加复选框
    static bool enabled = true;
    ImGui::Checkbox("Enable Feature", &enabled);
    
    // 结束窗口
    ImGui::End();
}

示例 2：创建工具面板

text

void CreateToolPanel() {
    ImGui::Begin("Tool Panel", nullptr, ImGuiWindowFlags_AlwaysAutoResize);
    
    // 使用折叠栏组织内容
    if (ImGui::CollapsingHeader("Transform")) {
        static float position[3] = {0.0f, 0.0f, 0.0f};
        static float rotation[3] = {0.0f, 0.0f, 0.0f};
        static float scale[3] = {1.0f, 1.0f, 1.0f};
        
        ImGui::DragFloat3("Position", position, 0.1f);
        ImGui::DragFloat3("Rotation", rotation, 1.0f);
        ImGui::DragFloat3("Scale", scale, 0.01f, 0.01f, 10.0f);
    }
    
    if (ImGui::CollapsingHeader("Material")) {
        static float color[4] = {1.0f, 1.0f, 1.0f, 1.0f};
        static float metallic = 0.5f;
        static float roughness = 0.5f;
        
        ImGui::ColorEdit4("Color", color);
        ImGui::SliderFloat("Metallic", &metallic, 0.0f, 1.0f);
        ImGui::SliderFloat("Roughness", &roughness, 0.0f, 1.0f);
    }
    
    ImGui::End();
}

示例 3：自定义样式和布局

text

void SetupCustomStyle() {
    // 获取当前样式
    ImGuiStyle& style = ImGui::GetStyle();
    
    // 自定义颜色
    style.Colors[ImGuiCol_WindowBg] = ImVec4(0.1f, 0.1f, 0.1f, 0.9f);
    style.Colors[ImGuiCol_Button] = ImVec4(0.2f, 0.6f, 0.2f, 1.0f);
    style.Colors[ImGuiCol_ButtonHovered] = ImVec4(0.3f, 0.7f, 0.3f, 1.0f);
    
    // 自定义间距和尺寸
    style.WindowPadding = ImVec2(10, 10);
    style.FramePadding = ImVec2(5, 5);
    style.ItemSpacing = ImVec2(10, 5);
}

void CreateCustomLayout() {
    ImGui::Begin("Custom Layout");
    
    // 使用列进行布局
    ImGui::Columns(2, "mycolumns");
    
    // 第一列
    ImGui::Text("Left Column");
    ImGui::Button("Button 1");
    ImGui::Button("Button 2");
    
    // 切换到下一列
    ImGui::NextColumn();
    
    // 第二列
    ImGui::Text("Right Column");
    ImGui::Button("Button 3");
    ImGui::Button("Button 4");
    
    // 结束列布局
    ImGui::Columns(1);
    
    ImGui::End();
}

集成到现有项目

基本集成步骤

下载源码：从 GitHub 仓库获取 Dear ImGui 源码
添加文件：将必要的源文件添加到项目中
选择后端：根据渲染 API 选择相应的后端实现
初始化：在应用程序启动时初始化 ImGui
渲染循环：在每帧中更新和渲染 GUI

简单的集成示例

text

// 初始化
ImGui::CreateContext();
ImGui_ImplGlfw_InitForOpenGL(window, true);
ImGui_ImplOpenGL3_Init("#version 130");

// 主循环
while (!glfwWindowShouldClose(window)) {
    // 开始新帧
    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplGlfw_NewFrame();
    ImGui::NewFrame();
    
    // 创建 GUI
    CreateMyGui();
    
    // 渲染
    ImGui::Render();
    ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
    
    // 交换缓冲区
    glfwSwapBuffers(window);
}

// 清理
ImGui_ImplOpenGL3_Shutdown();
ImGui_ImplGlfw_Shutdown();
ImGui::DestroyContext();