ImGui从入门到精通

一、ImGui简介

ImGui是一种用于创建用户界面的C ++库。它具有极低的性能开销，因此可用于需要GUI的游戏、应用程序和工具。

ImGui库由Ocornut维护，已在GitHub上开源。

ImGui的主要特点：

1、ImGui非常快速，这使得在实时应用程序中使用它成为了一个很好的选择，比如游戏开发。

2、使用ImGui的代码量很小，易于理解，不需要太多的抽象概念。

3、ImGui与任何可编译的C ++框架（比如SDL、OpenGL、DirectX）兼容。

二、ImGui的基本用法

在您的代码中使用ImGui主要包含三个步骤：

1、在应用程序初始化时，调用初始化函数ImGut::CreateContext()创建一个上下文。

ImGui::CreateContext();

2、在每一帧的开始时，开始绘制ImGui UI：

ImGui::NewFrame();

3、使用ImGui函数来创建UI元素，例如Button、ProgressBar或者Slider：

ImGui::Begin("Hello, world!");
ImGui::Text("This is some text.");
ImGui::End();

三、ImGui的基本元素

1、窗口（Window）

打开一个基本窗口：

ImGui::Begin("My Window");
ImGui::Text("Hello, I am a window.");
ImGui::End();

2、文本（Text）

ImGui::Text("Bold text");
ImGui::TextColored(ImVec4(1,1,0,1), "Important stuff");
ImGui::TextDisabled("Disabled text");
ImGui::TextWrapped("This text will automatically wrap on the edge of the window.");

3、按钮（Button）

ImGui::Button("Click me");
if (ImGui::Button("Click me too"))
    do_something();

4、输入框（Input）

static char str0[128] = "hello world";
ImGui::InputText("string", str0, IM_ARRAYSIZE(str0));

5、滑条条目（Slider）

ImGui::SliderFloat("float", &f, 0.0f, 1.0f);

四、ImGui高级元素

1、图表（Chart）

ImGui::PlotLines函数用于绘制一系列的数据点到一个图表上，数据点只需要传入一个包含x和y坐标的向量。

static float values[90] = {};
ImGui::PlotLines("Line Graph", values, IM_ARRAYSIZE(values));

2、拖拽条（Drag）

ImGui::DragFloat("Draggable Float", &f, 0.005f);
ImGui::DragInt("Draggable Int", &i, 1);

3、颜色选择器（ColorPicker）

ImGui::ColorEdit3("My Color", color);

4、列表框（ListBox）

static const char* items[] = { "Item 1", "Item 2", "Item 3" };
static int item_current = 0;
ImGui::ListBox("listbox", &item_current, items, IM_ARRAYSIZE(items));

五、ImGui样式

ImGui允许您根据您的喜好来改变UI外观。您可以使用ImGui::GetStyle()访问当前的样式设置。您可以使用ImGui风格和ImGui中的元素进行交互，例如以下样式设置将改变按钮、颜色选择器和输入框的外观：

ImGuiStyle& style = ImGui::GetStyle();
style.Colors[ImGuiCol_Button] = ImVec4(0.40f, 0.20f, 0.05f, 1.00f);
style.Colors[ImGuiCol_ButtonHovered] = ImVec4(0.50f, 0.30f, 0.05f, 1.00f);
style.Colors[ImGuiCol_ButtonActive] = ImVec4(0.60f, 0.35f, 0.05f, 1.00f);

style.Colors[ImGuiCol_FrameBg] = ImVec4(0.80f, 0.20f, 0.05f, 1.00f);

style.Colors[ImGuiCol_Header] = ImVec4(0.40f, 0.20f, 0.05f, 1.00f);
style.Colors[ImGuiCol_HeaderHovered] = ImVec4(0.50f, 0.30f, 0.05f, 1.00f);
style.Colors[ImGuiCol_HeaderActive] = ImVec4(0.60f, 0.35f, 0.05f, 1.00f);

style.Colors[ImGuiCol_SliderGrab] = ImVec4(0.80f, 0.20f, 0.05f, 1.00f);

style.Colors[ImGuiCol_Text] = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
style.Colors[ImGuiCol_TextSelectedBg] = ImVec4(0.50f, 0.30f, 0.05f, 1.00f);

六、完整代码示例

下面的示例代码将演示创建一个简单的ImGui UI：

#include "imgui.h"
#include "imgui_impl_sdl.h"
#include "imgui_impl_opengl3.h"

#define IMGUI_IMPL_OPENGL_LOADER_GLAD
#include   
#include 
#include 

int main()
{
  SDL_Init(SDL_INIT_VIDEO);

  SDL_GL_SetAttribute(SDL_GL_CONTEXT_FLAGS, SDL_GL_CONTEXT_FORWARD_COMPATIBLE_FLAG); 
  SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_CORE);
  SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 3);
  SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 2);

  SDL_Window *window = SDL_CreateWindow("ImGui SDL+OpenGL3 example", 
    SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 1280, 720, 
    SDL_WINDOW_OPENGL|SDL_WINDOW_RESIZABLE);

  SDL_GLContext gl_context = SDL_GL_CreateContext(window);

  if (!gladLoadGLLoader((GLADloadproc)SDL_GL_GetProcAddress)) {
    printf("Failed to initialize OpenGL context\n");
    return -1;
  }       

  IMGUI_CHECKVERSION();
  ImGui::CreateContext();
  ImGuiIO& io = ImGui::GetIO(); (void)io;
  ImGui::StyleColorsDark();
  ImGui_ImplSDL2_InitForOpenGL(window, gl_context);
  ImGui_ImplOpenGL3_Init("#version 150");

  bool show_demo_window = true;

  while (!done) {
    SDL_Event event;
    while (SDL_PollEvent(&event)) {
      ImGui_ImplSDL2_ProcessEvent(&event);

      if (event.type == SDL_QUIT) {
        done = true;
      }
    }

    ImGui_ImplOpenGL3_NewFrame();
    ImGui_ImplSDL2_NewFrame(window);
    ImGui::NewFrame();

    if (show_demo_window) {
      ImGui::ShowDemoWindow(&show_demo_window);
    }

    ImGui::Render();
    SDL_GL_MakeCurrent(window, gl_context);
    glViewport(0, 0, (int)io.DisplaySize.x, (int)io.DisplaySize.y);
    glClearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);
    glClear(GL_COLOR_BUFFER_BIT);
    ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
    SDL_GL_SwapWindow(window);
  }

  ImGui_ImplOpenGL3_Shutdown();
  ImGui_ImplSDL2_Shutdown();
  ImGui::DestroyContext();
  
  SDL_GL_DeleteContext(gl_context);
  SDL_DestroyWindow(window);
  SDL_Quit();

  return 0;
}