基于DirectX11+ImGui的Win32桌面程序开发

乌市泽哥 · 2023-7-5 17:45:06

一、常见图形界面框架(DirectUI、GUI)

1.题外话,纯属扯O

举两个常用的开发框架,MFC和Qt Widget里面每个控件都是Window，这是和DirectUI最大的区别。下面简单梳理下这个DirectUI与GUI之前错综复杂的爱恨情仇:
① 在侏罗纪时期,传统的Handle式GUI框架,是由操作系统内核(win32k.sys)直接提供的接口(GDI)，采用消息驱动的机制。窗口在Windows 操作系统中可以分为两种类型：一般窗口（Top-level Window）和子窗口（Child Window）。每一个窗口都会有一个系统全局标识符,也就是所谓的窗口句柄，由系统管理，每个窗口都会有独立的操作流程,用于处理消息的消息队列,循环处理系统发过来的窗口消息，例如当鼠标点击一个按钮的时候，操作系统会捕获鼠标消息，发送给对应窗口，通知窗口依据对应操作做出相对应的改变，重新绘制外观，发送一个按钮被点击的事件，也就是到了此时，用户才介入这个过程,进行按钮被点击之后的业务处理,窗口之间经过消息传递，然后经过一系列接口调用，最终反馈给用户呈现，窗口最终归属还是系统资源,用户层面无法窥探内部细节，仅仅是通过提供的接口进行调用操作，主打陪伴。
② 随着第四次科技革命的崛起，某岛核泄漏事件的发展,人们不再满足于单纯的功能界面，一群追求高颜值、高性能、高DIY的用户呐喊 "Please help me"，微软推出了DirectUI框架，采用DirectUI开发的应用程序，简单总结来说，就是除了顶级父窗口由操作系统负责,其余所有窗口全部由自己绘制，自己处理消息事件，窗口仅仅相当于一个容器，界面上的元素都属于一个逻辑区域，你问我什么是DirectUI？系统管得了的我要管，系统管不了的我也要管，先绘后渲，随心所欲，这就是DirectUI思想。
二、ImGui基本情况

1.什么是ImGui？

① ImGUI又称为Dear ImGui，它是一个跨平台、无第三方依赖的C++轻量级跨平台图形界面库，在项目中,可以直接引用ImGUI的源码，也可以编译成lib、dll等, ImGUI常使用DirectX或者OpenGL进行界面渲染，优点：性能高,快,实现简单等。缺点：布局有点复杂、字体支持不友好,不能动态加载等.
② 初步总结上面的话,可以大概理解为性能很好,入门简单,精通很难.需要非常熟悉DirectX或者OpenGL.但基础已经可以满足大多数人的需求了.
闲聊：谈谈ImGui与DirectUI之间，有部分相同点,比如依赖DirectX渲染绘制等,但不同点也很明显,ImGui 并不直接依赖于特定的操作系统或图形API，而是通过底层的图形渲染接口来绘制图形。这意味着 ImGui 可以在多个平台（如Windows、Linux、Mac等）和多个图形API（如DirectX、OpenGL、Vulkan等）上使用。在IMGUI中，用户界面每帧都是从代码中绘制的，而不是通过构建和维护UI元素的树形结构。这种即时模式的方法提供了更直接、更灵活的控制权，尤其适用于需要频繁更新和自定义的应用程序。
2.DirectX又是什么东西?

① DirectX 是微软公司开发的一套多媒体编程接口，用于在 Windows 平台上实现硬件加速的图形和音频功能。DirectX 提供了多个组件，其中包括了 Direct2D、Direct3D、DirectSound、DirectInput 等。它们分别用于2D图形渲染、3D图形渲染、音频处理和输入设备管理等领域。... 官话我也就不重复描述了，并非三言两语解释清除,详细了解的可以深度学习这个。
三、简单程序开发

1.开发前的小准备

① 下载 docking imgui 地址： https://github.com/ocornut/imgui/tree/docking
② 使用Visual Studio X创建一个空项目,打开解决方案根目录,创建文件夹,ImGui,Directx，如图所示

③ 打开下载的ImGui-docking压缩包,拷贝根目录如图所示文件，到刚才项目创建的文件夹"ImGui"下;

④ 拷贝***\imgui-docking\backends文件夹下的如图所示文件，至项目根目录文件夹Directx下;
(1

(2

⑤ 拷贝完成后,现有文件夹下文件如下图所示:

2.开始开发，撸起来.

① 创建main.cpp文件，创建基础测试代码,下面代码已经经过初步修改,修改范围:
（1.初始化屏蔽控制台，添加#pragma comment( linker, "/subsystem:windows /entry:mainCRTStartup" )
(2屏蔽Win32窗口，修改::ShowWindow(hwnd, SW_HIDE);
(3.分离绘制,修改，io.ConfigViewportsNoAutoMerge = true;
(4.关闭垂直同步，g_pSwapChain->Present(0, 0);
(5.增加ImGui对汉字的支持,添加 io.Fonts->AddFontFromFileTTF("C:/Windows/Fonts/SimHei.ttf", 14.0f, NULL, io.Fonts->GetGlyphRangesChineseFull());由于ImGui不支持动态加载，由此会引发内存异常的大....
下面代码里面包含了一些常见组件的使用，官方里面也有例子，具体还需要参照Demo程序慢慢学习.

1 #include "imgui.h"
2 #include "imgui_impl_win32.h"
3 #include "imgui_impl_dx11.h"
4 #include <d3d11.h>
5 #include <tchar.h>
6 #include <random>
7 #include <ctime>
8 #include <iostream>
9 using namespace std;
10
11 #pragma comment( linker, "/subsystem:windows /entry:mainCRTStartup" )//屏蔽控制台显示，编译后生效.
12
13 // Data
14 static ID3D11Device* g_pd3dDevice = nullptr;
15 static ID3D11DeviceContext* g_pd3dDeviceContext = nullptr;
16 static IDXGISwapChain* g_pSwapChain = nullptr;
17 static UINT g_ResizeWidth = 0, g_ResizeHeight = 0;
18 static ID3D11RenderTargetView* g_mainRenderTargetView = nullptr;
19
20 // 助手函数的声明
21 bool CreateDeviceD3D(HWND hWnd);
22 void CleanupDeviceD3D();
23 void CreateRenderTarget();
24 void CleanupRenderTarget();
25 LRESULT WINAPI WndProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam);
26
27 std::string string_to_utf8(const std::string& str)
28 {
29 int nwLen = MultiByteToWideChar(CP_ACP, 0, str.c_str(), -1, NULL, 0);
30 wchar_t* pwBuf = new wchar_t[nwLen + 1];
31 memset(pwBuf, 0, nwLen * 2 + 2);
32 MultiByteToWideChar(CP_ACP, 0, str.c_str(), str.length(), pwBuf, nwLen);
33
34 int nLen = WideCharToMultiByte(CP_UTF8, 0, pwBuf, -1, NULL, NULL, NULL, NULL);
35 char* pBuf = new char[nLen + 1];
36 memset(pBuf, 0, nLen + 1);
37 WideCharToMultiByte(CP_UTF8, 0, pwBuf, nwLen, pBuf, nLen, NULL, NULL);
38
39 std::string ret = pBuf;
40 delete[]pwBuf;
41 delete[]pBuf;
42
43 return ret;
44 }
45
46 int main(int, char**)
47 {
48 // 创建应用程序窗口
49 //ImGui_ImplWin32_EnableDpiAwareness();
50 WNDCLASSEXW wc = { sizeof(wc), CS_CLASSDC, WndProc, 0L, 0L, GetModuleHandle(nullptr), nullptr, nullptr, nullptr, nullptr, L"demo", nullptr };
51 ::RegisterClassExW(&wc);
52 HWND hwnd = ::CreateWindowW(wc.lpszClassName, L"demo", WS_OVERLAPPEDWINDOW, 100, 100, 1280, 800, nullptr, nullptr, wc.hInstance, nullptr);
53
54 // 初始化 Direct3D
55 if (!CreateDeviceD3D(hwnd))
56 {
57 CleanupDeviceD3D();
58 ::UnregisterClassW(wc.lpszClassName, wc.hInstance);
59 return 1;
60 }
61
62 // 设置窗口显示模式
63 ::ShowWindow(hwnd, SW_HIDE);
64 ::UpdateWindow(hwnd);
65
66 // 设置ImGui上下文
67 IMGUI_CHECKVERSION();
68 ImGui::CreateContext();
69 ImGuiIO& io = ImGui::GetIO(); (void)io;
70 //取消生成ini文件
71 io.IniFilename = NULL;
72 io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // 启用键盘控制
73 io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad; // 启用游戏板控制
74 io.ConfigFlags |= ImGuiConfigFlags_DockingEnable; // 启用停靠
75 io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable; // 启用多视口/平台窗口
76 io.ConfigViewportsNoAutoMerge = true;
77 //io.ConfigViewportsNoTaskBarIcon = true;
78 //io.ConfigViewportsNoDefaultParent = true;
79 //io.ConfigDockingAlwaysTabBar = true;
80 //io.ConfigDockingTransparentPayload = true;
81 //io.ConfigFlags |= ImGuiConfigFlags_DpiEnableScaleFonts; // FIXME-DPI：实验。这目前没有按预期工作。不要使用用户内应用程序！
82 //io.ConfigFlags |= ImGuiConfigFlags_DpiEnableScaleViewports; // FIXME-DPI：实验。
83
84 // 设置ImGui风格
85 ImGui::StyleColorsLight();
86
87 // 启用视口后，我们调整WindowRounding/WindowBg，使平台窗口看起来与常规窗口相同。
88
89 ImGuiStyle& style = ImGui::GetStyle();
90 if (io.ConfigFlags & ImGuiConfigFlags_ViewportsEnable)
91 {
92 style.WindowMinSize = ImVec2(700, 180);
93
94 style.WindowRounding = 10.0f;
95 style.Colors[ImGuiCol_WindowBg].w = 1.0f;
96
97 style.WindowBorderSize = 1.0f;
98 style.FrameBorderSize = 1.0f;
99 style.PopupBorderSize = 1.0f;
100
101 style.WindowPadding = ImVec2(8.0f, 8.0f);
102 style.FramePadding = ImVec2(4.0f, 8.0f);
103 style.PopupBorderSize = 1.0f;
104
105 }
106
107 // 设置平台/渲染器后端
108 ImGui_ImplWin32_Init(hwnd);
109 ImGui_ImplDX11_Init(g_pd3dDevice, g_pd3dDeviceContext);
110
111 //加载字体
112 //-如果没有加载字体，imgui将使用默认字体。您还可以加载多种字体，并使用ImGui:：PushFont（）/PopFont 选择它们
113 //-AddFontFromFileTTF（）将返回ImFont*，因此如果需要在多个字体中选择字体，则可以存储它。
114 //-如果无法加载文件，则函数将返回一个nullptr。请处理应用程序中的这些错误（例如，使用断言，或显示错误并退出）。
115 //-当调用ImFontAtlas:：Build（）/GetTexDataAsXXXXX（）时，字体将以给定的大小光栅化（w/过采样）并存储到纹理中，下面的ImGui_ImplXXXX_NewFrame将调用该纹理。
116 //-在您的imconfig文件中使用“#define IMGUI_ABLE_FREETYPE”可以使用FREETYPE进行更高质量的字体渲染。
117 //-有关更多说明和详细信息，请阅读“docs/FONTS.md”。
118 //-请记住，在C/C++中，如果要在字符串文字中包含反斜杠，则需要写一个双反斜杠\\
119 io.Fonts->AddFontFromFileTTF("C:/Windows/Fonts/SimHei.ttf", 14.0f, NULL, io.Fonts->GetGlyphRangesChineseFull());//支持汉字,单目前Ingui不支持动态,所以在调试模式下启动会变慢,改字体也会占用大量内存.
120
121 // 窗口设置
122 bool show_main_windows = true;
123 bool WindowShouldClose = false;
124
125 ImGui::SetNextWindowSize(ImVec2(700, 180), ImGuiCond_Appearing);
126
127 // 创建计时器变量
128 auto startTime = std::chrono::steady_clock::now();
129 while (!WindowShouldClose)
130 {
131 //轮询和处理消息（输入、窗口大小调整等）
132 //请参阅下面的WndProc（）函数，了解如何将事件调度到Win32后端。
133 MSG msg;
134 while (::PeekMessage(&msg, nullptr, 0U, 0U, PM_REMOVE))
135 {
136 ::TranslateMessage(&msg);
137 ::DispatchMessage(&msg);
138 if (msg.message == WM_QUIT)
139 WindowShouldClose = true;
140 }
141 if (WindowShouldClose)
142 break;
143
144 //处理窗口大小调整（我们不直接在WM_SIZE处理程序中调整大小）
145 if (g_ResizeWidth != 0 && g_ResizeHeight != 0)
146 {
147 CleanupRenderTarget();
148 g_pSwapChain->ResizeBuffers(0, g_ResizeWidth, g_ResizeHeight, DXGI_FORMAT_UNKNOWN, 0);
149 g_ResizeWidth = g_ResizeHeight = 0;
150 CreateRenderTarget();
151 }
152
153 // 启动ImGui框架
154 ImGui_ImplDX11_NewFrame();
155 ImGui_ImplWin32_NewFrame();
156 ImGui::NewFrame();
157
158 if (show_main_windows)
159 {
160 ImGui::Begin(u8"测试基础客户端", &show_main_windows);
161 std::random_device rd;
162 std::mt19937 gen(rd());
163 std::uniform_real_distribution<float> dis(0.0f, 1.0f);
164 ImVec4 randomColor(dis(gen), dis(gen), dis(gen), 1.0f);
165 ImGui::TextWrapped(u8"****");
166 ImGui::SameLine();
167 ImGui::PushStyleColor(ImGuiCol_Text, randomColor);
168 ImGui::SetCursorPosX((ImGui::GetCursorPosX() + ImGui::GetColumnWidth() - ImGui::CalcTextSize(u8"模拟客户端(特效)").x) / 2);
169 ImGui::TextWrapped(u8"模拟客户端(特效)");
170 ImGui::PopStyleColor();
171 ImGui::SameLine();
172 ImGui::SetCursorPosX(ImGui::GetCursorPosX() + ImGui::GetColumnWidth() - ImGui::CalcTextSize(u8"****").x);
173 ImGui::TextWrapped(u8"****");
174 ImGui::SeparatorText(u8"画一条分界线");
175
176 ImGui::Text("");
177
178 randomColor.x = 1.0f;
179 randomColor.y = 0.0f;
180 randomColor.z = 1.0f;
181 ImGui::PushStyleColor(ImGuiCol_Text, randomColor);
182 if (GetDriverState())
183 {
184 ImGui::SetCursorPosX((ImGui::GetCursorPosX() + ImGui::GetColumnWidth() - ImGui::CalcTextSize(u8"换个颜色").x) / 2);
185 ImGui::TextWrapped(u8"换个颜色");
186 }
187 else
188 {
189 ImGui::SetCursorPosX((ImGui::GetCursorPosX() + ImGui::GetColumnWidth() - ImGui::CalcTextSize(u8"再换个颜色·").x) / 2);
190 ImGui::TextWrapped(u8"再换个颜色·");
191 }
192 ImGui::PopStyleColor();
193 ImGui::SeparatorText(u8"");
194
195 // 计算运行时间
196 auto currentTime = std::chrono::steady_clock::now();
197 std::chrono::duration<float> elapsedTime = currentTime - startTime;
198 float runtime = elapsedTime.count();
199
200 // 获取当前时间
201 std::time_t now = std::time(nullptr);
202 std::tm* current_time = std::localtime(&now);
203 static char time_string[64] = { 0 };
204 std::strftime(time_string, sizeof(time_string), "%Y-%m-%d %H:%M:%S", current_time);
205
206 ImGui::TextColored(ImVec4(0.45f, 0.0f, 1.0f, 1.0f), u8"当前时间:%s,软件已运行: %.2f秒.", time_string, runtime);
207 ImGui::End();
208 }
209 else
210 {
211 WindowShouldClose = TRUE;
212 }
213
214 // 渲染页面
215 ImGui::Render();
216 ImGui_ImplDX11_RenderDrawData(ImGui::GetDrawData());
217
218 // 更新和渲染其他平台窗口
219 if (io.ConfigFlags & ImGuiConfigFlags_ViewportsEnable)
220 {
221 ImGui::UpdatePlatformWindows();
222 ImGui::RenderPlatformWindowsDefault();
223 }
224
225 //g_pSwapChain->Present(1, 0); // 与vsync一起演示
226 g_pSwapChain->Present(0, 0); // 存在但不带vsync
227 }
228
229
230 ImGui_ImplDX11_Shutdown();
231 ImGui_ImplWin32_Shutdown();
232 ImGui::DestroyContext();
233
234 CleanupDeviceD3D();
235 ::DestroyWindow(hwnd);
236 ::UnregisterClassW(wc.lpszClassName, wc.hInstance);
237
238 return 0;
239 }
240
241 // 帮助函数
242 bool CreateDeviceD3D(HWND hWnd)
243 {
244 // 设置交换链
245 DXGI_SWAP_CHAIN_DESC sd;
246 ZeroMemory(&sd, sizeof(sd));
247 sd.BufferCount = 2;
248 sd.BufferDesc.Width = 0;
249 sd.BufferDesc.Height = 0;
250 sd.BufferDesc.Format = DXGI_FORMAT_R8G8B8A8_UNORM;
251 sd.BufferDesc.RefreshRate.Numerator = 60;
252 sd.BufferDesc.RefreshRate.Denominator = 1;
253 sd.Flags = DXGI_SWAP_CHAIN_FLAG_ALLOW_MODE_SWITCH;
254 sd.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
255 sd.OutputWindow = hWnd;
256 sd.SampleDesc.Count = 1;
257 sd.SampleDesc.Quality = 0;
258 sd.Windowed = TRUE;
259 sd.SwapEffect = DXGI_SWAP_EFFECT_DISCARD;
260
261 UINT createDeviceFlags = 0;
262 //createDeviceFlags |= D3D11_CREATE_DEVICE_DEBUG;
263 D3D_FEATURE_LEVEL featureLevel;
264 const D3D_FEATURE_LEVEL featureLevelArray[2] = { D3D_FEATURE_LEVEL_11_0, D3D_FEATURE_LEVEL_10_0, };
265 HRESULT res = D3D11CreateDeviceAndSwapChain(nullptr, D3D_DRIVER_TYPE_HARDWARE, nullptr, createDeviceFlags, featureLevelArray, 2, D3D11_SDK_VERSION, &sd, &g_pSwapChain, &g_pd3dDevice, &featureLevel, &g_pd3dDeviceContext);
266 if (res == DXGI_ERROR_UNSUPPORTED) // 如果硬件不可用，请尝试高性能的WARP软件驱动程序。
267 res = D3D11CreateDeviceAndSwapChain(nullptr, D3D_DRIVER_TYPE_WARP, nullptr, createDeviceFlags, featureLevelArray, 2, D3D11_SDK_VERSION, &sd, &g_pSwapChain, &g_pd3dDevice, &featureLevel, &g_pd3dDeviceContext);
268 if (res != S_OK)
269 return false;
270
271 CreateRenderTarget();
272 return true;
273 }
274
275 void CleanupDeviceD3D()
276 {
277 CleanupRenderTarget();
278 if (g_pSwapChain) { g_pSwapChain->Release(); g_pSwapChain = nullptr; }
279 if (g_pd3dDeviceContext) { g_pd3dDeviceContext->Release(); g_pd3dDeviceContext = nullptr; }
280 if (g_pd3dDevice) { g_pd3dDevice->Release(); g_pd3dDevice = nullptr; }
281 }
282
283 void CreateRenderTarget()
284 {
285 ID3D11Texture2D* pBackBuffer;
286 g_pSwapChain->GetBuffer(0, IID_PPV_ARGS(&pBackBuffer));
287 g_pd3dDevice->CreateRenderTargetView(pBackBuffer, nullptr, &g_mainRenderTargetView);
288 pBackBuffer->Release();
289 }
290
291 void CleanupRenderTarget()
292 {
293 if (g_mainRenderTargetView) { g_mainRenderTargetView->Release(); g_mainRenderTargetView = nullptr; }
294 }
295
296 #ifndef WM_DPICHANGED
297 #define WM_DPICHANGED 0x02E0 // From Windows SDK 8.1+ headers
298 #endif
299
300 // 从imgui_impl_win32.cpp转发声明消息处理程序
301 extern IMGUI_IMPL_API LRESULT ImGui_ImplWin32_WndProcHandler(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam);
302
303 //Win32消息处理程序
304 //你可以阅读io.WantCaptureMouse，io.WantCaptureKeyboard标志来判断imgui是否想使用你的输入。
305 //-当io.WantCaptureMouse为true时，不要将鼠标输入数据发送到主应用程序，也不要清除/覆盖鼠标数据的副本。
306 //-当io.WantCaptureKeyboard为true时，不要将键盘输入数据发送到主应用程序，也不要清除/覆盖键盘数据的副本。
307 //通常情况下，您可能总是将所有输入传递给imgui，并根据这两个标志对应用程序隐藏它们。
308 LRESULT WINAPI WndProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam)
309 {
310 if (ImGui_ImplWin32_WndProcHandler(hWnd, msg, wParam, lParam))
311 return true;
312
313 switch (msg)
314 {
315 case WM_SIZE:
316 if (wParam == SIZE_MINIMIZED)
317 return 0;
318 g_ResizeWidth = (UINT)LOWORD(lParam); // 调整队列大小
319 g_ResizeHeight = (UINT)HIWORD(lParam);
320 return 0;
321 case WM_SYSCOMMAND:
322 if ((wParam & 0xfff0) == SC_KEYMENU) // 禁用ALT应用程序菜单
323 return 0;
324 break;
325 case WM_DESTROY:
326 ::PostQuitMessage(0);
327 return 0;
328 case WM_DPICHANGED:
329 if (ImGui::GetIO().ConfigFlags & ImGuiConfigFlags_DpiEnableScaleViewports)
330 {
331 //const int dpi = HIWORD(wParam);
332 //printf("WM_DPICHANGED to %d (%.0f%%)\n", dpi, (float)dpi / 96.0f * 100.0f);
333 const RECT* suggested_rect = (RECT*)lParam;
334 ::SetWindowPos(hWnd, nullptr, suggested_rect->left, suggested_rect->top, suggested_rect->right - suggested_rect->left, suggested_rect->bottom - suggested_rect->top, SWP_NOZORDER | SWP_NOACTIVATE);
335 }
336 break;
337 }
338 return ::DefWindowProcW(hWnd, msg, wParam, lParam);
339 }

复制代码

② 补齐环境引用,VS右键项目属性：
(1.C++\常规\附加包含目录添加 .\Imgui;.\Directx;
(2.链接器\输入\依赖性添加 d3d11.lib;d3dcompiler.lib;dxgi.lib;
3.开发完跑跑试试

① 编译运行,附上效果图(自己改改文字即可实现.):

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

		自动登录	找回密码
密码			立即注册

基于DirectX11+ImGui的Win32桌面程序开发

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云