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;
}