这篇文章是给予 ( ImGui 入门到精通 ) 这期视频进行参考使用
GitHub : https://github.com/Half-People/Video-ImGuiCode
// main.cpp 主要運行
//這個代碼由 半個人(HalfPeople) 編寫
// By HalfPeople Studio
// https://www.bilibili.com/read/cv19537138 專欄連結
// https://space.bilibili.com/443124242/video Up主頁
//定義此宏 ( GLEW_STATIC ) 告訴GLEW 需要公開某些函數 !!!否則無法使用
#define GLEW_STATIC
//引用 glfw (窗口創建工具) 和 glew (OpenGL 3d繪製褲)
#include <GL/glew.h>
#include <GLFW/glfw3.h>
//導入褲
#pragma comment(lib,"../API/GLFW/glfw3.lib")
#pragma comment(lib,"../API/GLEW/glew32s.lib")
//雖然我們沒有這一個 lib 但是他直接存在於 你的顯卡驅動當中
#pragma comment(lib,"Opengl32.lib")
//引用 <iostream> 方便進行Debug和打印 (可以沒有)
#include <iostream>
//引用 <string> 方便進行文本操作 (可以沒有)
#include <string>
//引用 "imgui.h" 當中包含大部分 Imgui 內容
#include "imgui.h"
//引用 "imgui_impl_glfw.h" 由於我們的窗口是由 GLFW 進行創建的
#include "imgui_impl_glfw.h"
//引用 "imgui_impl_opengl3.h" 由於我們的底層渲染是由 OpenGL (glew) 進行的
#include "imgui_impl_opengl3.h"
//引用 把控件繪製分離到 "GUI.h" 當中 (方便整理)
#include "GUI.h"
//窗口指針
GLFWwindow* Windows;
//程式開始
int main()
{
//初始化窗口
glfwInit();
//給窗口定義 創建模式 (包括關閉垂直同步 使用不同的底層渲染 多重渲染... ... 操作可以使用它來實現)
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
//創建窗口給予 窗口指針 窗口大小X 窗口大小Y 窗口標題 這兩個為控制項 直接留空
Windows = glfwCreateWindow(900, 800,"HalfPeople-Imgui",NULL,NULL);
//給予控制權
glfwMakeContextCurrent(Windows);
glfwSwapInterval(0);
//初始化ImGui
IMGUI_CHECKVERSION();
ImGui::CreateContext(NULL);
//獲取 io (設置ImGui內容)
ImGuiIO& io = ImGui::GetIO(); (void)io;
//添加字體 文件路徑 字體大小 (高級)混合多種字體會使用所以留空即可 定義字體範圍
io.Fonts->AddFontFromFileTTF("kaiu.ttf" , 18 , NULL, io.Fonts->GetGlyphRangesChineseFull());
//允許停靠
io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;
//視口設置無裝飾
io.ConfigFlags |= ImGuiViewportFlags_NoDecoration;
//允許視口停靠
io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;
//停靠於背景
io.ConfigFlags |= ImGuiCol_DockingEmptyBg;
//設置基礎 顏色風格
ImGui::StyleColorsDark();
//獲取風格
ImGuiStyle& style = ImGui::GetStyle();
//從風格當中獲取顏色列表
ImVec4* colors = style.Colors;
//進行顏色配置
colors[ImGuiCol_FrameBg] = ImVec4(0.16f, 0.16f, 0.17f, 1.00f);
colors[ImGuiCol_FrameBgHovered] = ImVec4(0.37f, 0.36f, 0.36f, 102.00f);
colors[ImGuiCol_FrameBgActive] = ImVec4(0.10f, 0.10f, 0.10f, 171.00f);
colors[ImGuiCol_TitleBgActive] = ImVec4(0.20f, 0.20f, 0.20f, 255.00f);
colors[ImGuiCol_CheckMark] = ImVec4(0.61f, 0.61f, 0.61f, 1.00f);
colors[ImGuiCol_SliderGrab] = ImVec4(0.64f, 0.64f, 0.64f, 1.00f);
colors[ImGuiCol_SliderGrabActive] = ImVec4(0.31f, 0.31f, 0.31f, 1.00f);
colors[ImGuiCol_Button] = ImVec4(0.22f, 0.22f, 0.22f, 0.40f);
colors[ImGuiCol_ButtonHovered] = ImVec4(0.29f, 0.29f, 0.29f, 1.00f);
colors[ImGuiCol_ButtonActive] = ImVec4(0.13f, 0.13f, 0.13f, 1.00f);
colors[ImGuiCol_Header] = ImVec4(0.45f, 0.45f, 0.45f, 0.31f);
colors[ImGuiCol_HeaderHovered] = ImVec4(0.55f, 0.55f, 0.55f, 0.80f);
colors[ImGuiCol_HeaderActive] = ImVec4(0.09f, 0.09f, 0.09f, 1.00f);
colors[ImGuiCol_ResizeGrip] = ImVec4(1.00f, 1.00f, 1.00f, 0.20f);
colors[ImGuiCol_ResizeGripHovered] = ImVec4(0.46f, 0.46f, 0.46f, 0.67f);
colors[ImGuiCol_ResizeGripActive] = ImVec4(0.17f, 0.17f, 0.17f, 0.95f);
colors[ImGuiCol_SeparatorActive] = ImVec4(0.42f, 0.42f, 0.42f, 1.00f);
colors[ImGuiCol_SeparatorHovered] = ImVec4(0.50f, 0.50f, 0.50f, 0.78f);
colors[ImGuiCol_TabHovered] = ImVec4(0.45f, 0.45f, 0.45f, 0.80f);
colors[ImGuiCol_TabActive] = ImVec4(0.28f, 0.28f, 0.28f, 1.00f);
colors[ImGuiCol_TabUnfocusedActive] = ImVec4(0.19f, 0.19f, 0.19f, 1.00f);
colors[ImGuiCol_DockingPreview] = ImVec4(0.51f, 0.51f, 0.51f, 0.70f);
colors[ImGuiCol_Tab] = ImVec4(0.21f, 0.21f, 0.21f, 0.86f);
colors[ImGuiCol_TabUnfocused] = ImVec4(0.15f, 0.15f, 0.15f, 0.97f);
colors[ImGuiCol_NavHighlight] = ImVec4(1.00f, 0.40f, 0.13f, 1.00f);
colors[ImGuiCol_TextSelectedBg] = ImVec4(0.45f, 1.00f, 0.85f, 0.35f);
//從風格當中配置 窗口/控件 樣式數據
style.WindowRounding = 4;
style.FrameRounding = 4;
style.GrabRounding = 3;
style.ScrollbarSize = 7;
style.ScrollbarRounding = 0;
//初始化ImGui用於Glfw創建的窗口 (而且使用OpenGL進行底層渲染)
ImGui_ImplGlfw_InitForOpenGL(Windows, true);
//初始化ImGui用於OpenGL渲染繪製 (需要定義OpenGL版本號 進行GLSL代碼的自動創建)
ImGui_ImplOpenGL3_Init("#version 330");
//創建文本編輯器給予 "GUI.h"
te = new TextEditor();
//給文本編輯器定義 使用的電腦語言
te->SetLanguageDefinition(TextEditor::LanguageDefinition::C());
//渲染循環 (若用戶點擊右上角 交叉 停止循環)
while (!glfwWindowShouldClose(Windows))
{
//清除渲染數據
glClear(GL_COLOR_BUFFER_BIT);
//ImGui每幀初始化
ImGui_ImplOpenGL3_NewFrame();
ImGui_ImplGlfw_NewFrame();
ImGui::NewFrame();
//創建視口停靠
ImGui::DockSpaceOverViewport();
//調用 "GUI.h" 當中函數進行繪製
DrawGUI();
//繪製 ImGui Demo Window (完全是可以不用)
ImGui::ShowDemoWindow();
//獲取所需繪製數據
ImGui::Render();
//繪製ImGui數據
ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
if (io.ConfigFlags & ImGuiConfigFlags_ViewportsEnable)
{
//當窗口拉出窗口範圍 創建子窗口
GLFWwindow* backup_current_context = glfwGetCurrentContext();
ImGui::UpdatePlatformWindows();
ImGui::RenderPlatformWindowsDefault();
glfwMakeContextCurrent(backup_current_context);
}
//繪製窗口內容
glfwSwapBuffers(Windows);
//繪製事件
glfwPollEvents();
}
}
//這個代碼由 半個人(HalfPeople) 編寫
// By HalfPeople Studio
// https://www.bilibili.com/read/cv19537138 專欄連結
// https://space.bilibili.com/443124242/video Up主頁
// GUI.h 從主文件中分離出來的IMGUI繪製部分
//這個代碼由 半個人(HalfPeople) 編寫
// By HalfPeople Studio
// https://www.bilibili.com/read/cv19537138 專欄連結
// https://space.bilibili.com/443124242/video Up主頁
//引用了IMGUI 文件作為函數調用
#pragma once
#include "Imgui.h"
#include "TextEditor.h"
#include <vector> // 這一個數組控制起來比較方便 : )
std::vector <int> DragList; //拖拽列表 用於保存拖拽過來的數據
TextEditor* te; //文本編輯器的指針
void DrawGUI()//繪製函數
{
ImGui::Begin(u8"作業用");// 中文窗口標題測試 (默認使用八位元編碼 中文是16位的 所以前面要加一個u8 進行轉換)
// 為了方便直接使用 ForLoop 進行創建 循環5次
for (size_t i = 0; i < 5; i++)
{
//創建 按鈕 名稱等於 循環次數轉換為字符串再轉換為文本
ImGui::Button(std::to_string(i).c_str());
//限制最後一個不同添加下面的函數
if (i+1 < 5)
{
//這一個函數會將下一個 控件位置 改為向右排佈 !! 此函數調用後沒有可以接受的控件程式崩潰
ImGui::SameLine();
}
//創建拖拽事件 (為上一個控件創建)
if (ImGui::BeginDragDropSource())
{
//拖拽時顯示控件 當然除了文本 你可以放置圖片
ImGui::Text(std::string("Drag : ").append(std::to_string(i)).c_str());
//設置拖拽時變量保存
ImGui::SetDragDropPayload("DragIndexButton", &i, sizeof(int));
ImGui::EndDragDropSource();
}
}
//窗口完結
ImGui::End();
//創建窗口
ImGui::Begin("Drag Window");
//隨便放一個控件用於接收拖拽數據與訊息
ImGui::Text("Drag Target");
//創建拖拽目標用事件 (為上一個控件創建)
if (ImGui::BeginDragDropTarget())
{
//獲取拖拽時變量保存
if (const ImGuiPayload* payload = ImGui::AcceptDragDropPayload("DragIndexButton"))
{
//把數據保存到 拖拽列表
DragList.push_back(*(const int*)payload->Data);
}
//完結拖拽事件
ImGui::EndDragDropTarget();
}
//循環次數為 數組大小
for (size_t i = 0; i < DragList.size(); i++)
{
//創建按鈕 名稱為 拖拽列表當中 當前循環次數 的數據 將其轉換為字符串再轉換為文本
if (ImGui::Button(std::to_string(DragList.at(i)).c_str()))
{
//當按鈕被點擊時 移除 拖拽列表 當中 當前循環次數 的數據
DragList.erase(DragList.begin() + i);
}
//此處和上方十分相似 限制最後一個不同添加下面的函數
if (i + 1 < DragList.size())
{
//這一個函數會將下一個 控件位置 改為向右排佈 !! 此函數調用後沒有可以接受的控件程式崩潰
ImGui::SameLine();
}
}
//窗口完結
ImGui::End();
//創建窗口
ImGui::Begin("TextEditor");
//繪製文本編輯器
te->Render("TextED");
//窗口完結
ImGui::End();
}
//這個代碼由 半個人(HalfPeople) 編寫
// By HalfPeople Studio
// https://www.bilibili.com/read/cv19537138 專欄連結
// https://space.bilibili.com/443124242/video Up主頁