拓冰网站定制 
简介一份以 Visual C 与 DirectX 为基础、用于实现自定义 GUI 界面的完整工程源码面向希望掌握 Direct3D 非窗口化界面渲染、控件绘制与游戏 UI 开发流程的 C 学习者。整套代码使用 Direct3D 构建控件体系而非依赖传统 Win32 控件核心逻辑由 BattleTank 主程序与 engine 模块协同完成其中包含按钮、窗口、列表框、消息框、滑块、光标等十余种 CUI 控件的定义与实现并涉及 DirectX 初始化、视口设置、渲染循环、键盘输入处理等关键环节。压缩包共 79 个文件以 38 个头文件与 36 个 C 源文件为主另含图标、Visual Studio 解决方案与项目文件、资源脚本以及预编译头整体仅 121KB结构紧凑便于按 CUIControl、engine、Global 等目录分类研读。目前已有 328 人学习与下载。适合具备 C 基础、想了解 DirectX 图形界面开发流程的开发者参考也能为自制引擎 UI 模块的控件封装、消息分发与绘制机制提供实用思路。1. 直接用Visual C配合DirectX做GUI为什么这是一条值得走的路在Visual C工程里点开控件工具箱拖一个Button出来改一改属性这大概是大多数人对Windows GUI的第一印象。可一旦想让界面脱离标准控件的样子加上圆角、渐变、遮罩动画、实时数据纹理默认那套就撑不住了。用DirectX做GUI是把整个界面当作一张由GPU绘制的图像来处理控件不再是一个个HWND子窗口而是渲染树里的四边形节点点击命中则照样由Win32消息驱动。换来的自由是控件的长相完全自己说了算付出的代价是消息、文字、布局、DPI这些原本被框架隐藏的细节全部从黑匣子里暴露出来。这套方案适合需要高度自定义界面、同时希望渲染与界面同管线的桌面工程师。2. 技术方案拆解为什么选D3D11而不是继续用GDI或套用Qt2.1 三个候选方案的对比与选型理由GDI自绘在控件数量不多时很直观选个字体、画矩形、填文字代码短出效果也快。可一旦界面进入高刷新场景比如实时波形、地图缩放、列表快速滚动GDI的CPU绘制就会成为瓶颈。而且GDI的绘制轨迹依赖DC的状态机状态一多后期改样式等于重写一遍绘制逻辑。更关键的是GDI画出来的内容是位图没法跟D3D场景直接做alpha混合或参与shader处理两条绘制路径的同步本身就是一笔糊涂账。Qt是另一个常见选项。QWidget和QML都自带成熟的控件和布局体系但其渲染引擎和D3D属于两层东西想在自绘控件里直接操作D3D纹理、做后处理特效就要做类型桥接和上下文切换。对大多数应用这没问题可对需要“界面本身就是实时渲染画面一部分”的软件Qt的反而是负担。D3D11的好处是整个界面在每帧里就是一组顶点和纹理UI和可视化渲染共用同一套设备、同一份视口不用来回切。相比D3D12D3D11对GUI开发更友好。GUI不需要手动管理命令列表、资源屏障和显式同步D3D11的延迟上下文和绑定模型足够撑起几十个控件。老显卡、内置显卡、虚拟机里的WARP驱动都能兜底。如果你的目标平台是Windows 7到Windows 11的广泛桌面D3D11是目前自绘GUI最平衡的答案。2.2 最小设备初始化把D3D11的设备和交换链建起来第一步不是画控件而是把设备和交换链建好。这段代码是整套GUI的根基参数直接影响后续所有渲染行为。// gui_d3d_init.cpp #include d3d11.h #include dxgi.h #pragma comment(lib, d3d11.lib) #pragma comment(lib, dxgi.lib) ID3D11Device* g_pd3dDevice nullptr; ID3D11DeviceContext* g_pd3dContext nullptr; IDXGISwapChain* g_pSwapChain nullptr; ID3D11RenderTargetView* g_pRTV nullptr; bool InitD3D(HWND hWnd) { DXGI_SWAP_CHAIN_DESC scd{}; scd.BufferCount 2; // 双缓冲 scd.BufferDesc.Width 0; // 0 表示跟随窗口客户区 scd.BufferDesc.Height 0; scd.BufferDesc.Format DXGI_FORMAT_B8G8R8A8_UNORM; scd.BufferDesc.RefreshRate { 0, 0 }; // 让系统选择刷新率 scd.BufferUsage DXGI_USAGE_RENDER_TARGET_OUTPUT; scd.OutputWindow hWnd; scd.SampleDesc.Count 1; // 自绘GUI不需要MSAA scd.SampleDesc.Quality 0; scd.Windowed TRUE; scd.SwapEffect DXGI_SWAP_EFFECT_DISCARD; UINT flags D3D11_CREATE_DEVICE_BGRA_SUPPORT; #ifdef _DEBUG flags | D3D11_CREATE_DEVICE_DEBUG; #endif D3D_FEATURE_LEVEL levels[] { D3D_FEATURE_LEVEL_11_0, D3D_FEATURE_LEVEL_10_1, D3D_FEATURE_LEVEL_10_0 }; HRESULT hr D3D11CreateDeviceAndSwapChain( nullptr, D3D_DRIVER_TYPE_HARDWARE, nullptr, flags, levels, _countof(levels), D3D11_SDK_VERSION, scd, g_pSwapChain, g_pd3dDevice, nullptr, g_pd3dContext); if (FAILED(hr)) return false; return true; }几个参数值得单独说。BufferCount设为2就是传统双缓冲Present之后后备缓冲和前台缓冲交换不必等三缓冲增加延迟。Format选B8G8R8A8_UNORM是因为桌面窗口链对这个格式兼容性最好后面接Direct2D/DWrite也省一步转换。SampleDesc.Count保持1MSAA对GUI没有正向收益反而会在透明边界上产生奇奇怪怪的采样结果。D3D_DRIVER_TYPE_HARDWARE配合nullptr适配器让系统自动选择显卡。调试阶段如果想在无显卡的虚拟机上跑可以临时改成D3D_DRIVER_TYPE_WARP但正式发布不要带WARP它的CPU开销会让你误以为代码有性能问题。flags里加了D3D11_CREATE_DEVICE_BGRA_SUPPORT这是为后面DWrite做纹理互操作预留的不加会踩到资源格式不兼容的坑。2.3 从RTV到Present一条最小的渲染链路设备建好之后还要把后备缓冲包装成渲染目标视图才能往上画东西。ID3D11Texture2D* pBackBuffer nullptr; g_pSwapChain-GetBuffer(0, __uuidof(ID3D11Texture2D), reinterpret_castvoid**(pBackBuffer)); g_pd3dDevice-CreateRenderTargetView(pBackBuffer, nullptr, g_pRTV); pBackBuffer-Release(); D3D11_VIEWPORT vp{}; vp.TopLeftX 0; vp.TopLeftY 0; vp.Width (float)clientWidth; vp.Height (float)clientHeight; vp.MinDepth 0.0f; vp.MaxDepth 1.0f; g_pd3dContext-RSSetViewports(1, vp);每帧的渲染循环固定这么几步先ClearRenderTargetView把整个后台刷成背景色然后绘制当前控件树最后Present上屏。const float clearColor[4] { 0.08f, 0.09f, 0.10f, 1.0f }; g_pd3dContext-ClearRenderTargetView(g_pRTV, clearColor); // RenderFrame() 在这里提交控件顶点和纹理 g_pSwapChain-Present(1, 0);Present的第一个参数是SyncInterval。GUI我通常设为1开启垂直同步既避免屏幕撕裂也不用让显卡空转跑到几百帧。游戏可以关垂直同步追求帧率桌面软件没这个必要风扇声音和耗电得不偿失。窗口被最小化时Present会阻塞等待垂直同步建议在渲染循环里加一个IsIconic判断窗口不可见就睡10毫秒再继续。2.4 把像素坐标送进顶点着色器ViewportSize与NDC换算自绘GUI全部使用屏幕像素坐标但D3D的顶点位置是归一化设备坐标NDC范围-1到1。我习惯在常量缓冲里放一个ViewportSize然后在顶点着色器里做换算这样CPU侧所有控件坐标都保持“逻辑像素”不会因为DPI或者窗口尺寸变化而让整个控件树重新计算坐标。// ui_vertex.hlsl cbuffer UIConstants : register(b0) { float2 ViewportSize; float2 DpiScale; }; struct VS_IN { float2 Pos : POSITION; float2 UV : TEXCOORD0; float4 Color : COLOR0; }; struct VS_OUT { float4 Pos : SV_Position; float2 UV : TEXCOORD0; float4 Color : COLOR0; }; VS_OUT VSMain(VS_IN vin) { VS_OUT vout; float2 ndc (vin.Pos / ViewportSize) * 2.0f - 1.0f; ndc.y -ndc.y; // 屏幕原点在左上NDC的y轴向上 vout.Pos float4(ndc, 0.0f, 1.0f); vout.UV vin.UV; vout.Color vin.Color; return vout; }把所有控件坐标换算收拢到着色器之后CPU侧做命中测试、控件布局、动画计算都在逻辑坐标下进行。窗口尺寸变化时只需要更新ViewportSize这一个常量界面的所有元素会自动重新铺满。DpiScale这个字段留到第4章讲字体时再说它解决的是高DPI屏下文字和控件比例失配的问题。3. 从Win32消息到控件命中把Windows窗口变成D3D宿主3.1 消息分发器WndProc只做管家不做绘制很多自绘初学者的习惯是把绘制逻辑直接塞进WM_PAINT在D3D方案里这是错的。渲染应该交给独立的RenderFrameWM_PAINT只负责触发一次渲染然后立即ValidateRect。这样消息循环和渲染循环的边界清楚窗口拖动时时不会因为反复触发WM_PAINT而堆积绘制开销。Win32消息和渲染动作的对应关系我一般这样分Win32消息分发动作WM_SIZE释放RTV、ResizeBuffers、重建RTV和ViewportWM_DISPLAYCHANGE同WM_SIZE显示器分辨率变化也要重建后备缓冲WM_PAINT调用一次RenderFrame然后ValidateRectWM_MOUSEMOVE换算坐标后调用控件树的HitTestWM_LBUTTONDOWN命中后把控件置为Pressed状态WM_MOUSEWHEEL找到鼠标下的可滚动控件改其滚动偏移WM_IME_*转发给当前焦点控件用于中文输入分发器本身不复杂关键是养成“WndProc不绘制、只转发”的习惯。下面这个例子把鼠标消息翻译成UI坐标并交给控件树。// wndproc_router.cpp LRESULT CALLBACK WndProc(HWND hWnd, UINT msg, WPARAM wp, LPARAM lp) { switch (msg) { case WM_SIZE: OnResizeSwapChain(); return 0; case WM_PAINT: RenderFrame(); ValidateRect(hWnd, nullptr); return 0; case WM_MOUSEMOVE: { POINTS pt MAKEPOINTS(lp); float uiX pt.x * g_dpiScale; // 物理坐标转逻辑坐标 float uiY pt.y * g_dpiScale; g_uiRoot.HitTest(uiX, uiY); break; } case WM_LBUTTONDOWN: { POINTS pt MAKEPOINTS(lp); float uiX pt.x * g_dpiScale; float uiY pt.y * g_dpiScale; UIWidget* hit g_uiRoot.HitTest(uiX, uiY); if (hit) hit-SetPressed(true); break; } } return DefWindowProc(hWnd, msg, wp, lp); }注意这里用MAKEPOINTS取出的是窗口客户区坐标没有经过任何DPI转换。如果进程没有声明DPI Aware系统会帮你做虚拟化缩放拿到的坐标和你画的界面永远对不上。所以程序启动时第一件事就是调用SetProcessDpiAwarenessContext后面第5章会专门讲这个坑。3.2 控件树与命中测试一个矩形加一个回调控件本身就是一个带矩形、可见性、Z序和状态标记的节点。每个控件在渲染阶段绘制自己在命中阶段检查自己是否被点到。// ui_widget.h struct UIWidget { RectF bounds; UIWidget* parent; std::vectorUIWidget* children; int zOrder 0; bool visible true; bool disabled false; WidgetState state WidgetState::Normal; void (*onMouseDown)(UIWidget* self, const Vec2 local); void (*onMouseUp)(UIWidget* self, const Vec2 local); void Draw(GuiRenderer r) { if (!visible) return; r.PushClip(bounds); DrawSelf(r); // 按 zOrder 升序绘制后画的覆盖先画的 std::sort(children.begin(), children.end(), [](UIWidget* a, UIWidget* b) { return a-zOrder b-zOrder; }); for (UIWidget* child : children) child-Draw(r); r.PopClip(); } };命中测试正好反过来从父节点开始先检查自己再检查子节点子节点里从Z序最高的往下找。这样下拉列表才能盖住按钮、弹窗才能挡住后面所有控件。// hit_test.cpp UIWidget* HitTest(UIWidget* node, const Vec2 pos) { if (!node-visible || !node-disabled) return nullptr; if (!node-bounds.Contains(pos)) return nullptr; // 子节点从视觉最上层zOrder最大往下找 std::sort(node-children.begin(), node-children.end(), [](UIWidget* a, UIWidget* b) { return a-zOrder b-zOrder; }); for (auto it node-children.rbegin(); it ! node-children.rend(); it) { if (UIWidget* hit HitTest(*it, pos)) return hit; } return node; }这段逻辑里隐藏着一个最容易忽略的点裁剪。如果父节点被裁剪到某个矩形内子节点即使坐标越界也不应该被命中。渲染前把ClipRect压栈命中前先检查ClipRect这两个操作必须一致否则会在边缘出现“鼠标能点到看不见的区域”的神奇问题。3.3 IME与中文输入D3D自绘绕不过的坎自绘控件的最大麻烦是中文输入法。标准Edit控件天然处理IME候选窗和组字过程自绘控件没有这个待遇必须自己接Immediate Mode。当一个编辑框获得焦点时Windows会把IME上下文绑定到该窗口。用户敲拼音时系统发送WM_IME_STARTCOMPOSITION、WM_IME_COMPOSITION和WM_IME_ENDCOMPOSITION我们需要在WM_IME_COMPOSITION里把组字结果取出来更新到自绘编辑框的文本缓冲里然后触发文本纹理重建。// ime_handler.cpp case WM_IME_COMPOSITION: { HIMC hImc ImmGetContext(hWnd); if (hImc) { if (dwParam GCS_RESULTSTR) { DWORD len ImmGetCompositionStringW( hImc, GCS_RESULTSTR, nullptr, 0); std::wstring text(len / sizeof(wchar_t) 1, L\0); ImmGetCompositionStringW( hImc, GCS_RESULTSTR, text.data(), len); text.resize(len / sizeof(wchar_t)); editBox-SetText(text); editBox-RecreateTextTexture(); // 关键更新文字纹理 } ImmReleaseContext(hWnd, hImc); } return 0; }用ImmGetContext这套流程能快速把输入体验打通但注意它拿到的HIMC是每毫秒变化的用完必须ImmReleaseContext否则会句柄泄漏。更现代的做法是使用TSFText Services Framework功能更完整支持语音输入、手写扩展等但复杂度高不少我建议第一版先用IMM把中文搞定运行稳定了再考虑迁移TSF。4. 文字是GUI的良心DWrite离屏纹理与字体缓存4.1 为什么不用GDI直接把文字画进后备缓冲从Windows Vista开始GDI和D3D就是两条独立的绘制路径GDI的绘制命令不能直接写到D3D后备缓冲上。硬要混用常见的招数是GetDC拿到窗口DC再开D3D交换链这会导致闪烁和性能灾难因为GDI绘制和D3D Present之间没有同步机制。我尝试过在D3D项目里调用GDI的DrawText到内存DC再作为纹理上传D3D。小字号文字确实能看但带旋转、缩放、半透明混合时完全不行GDI的栅格化结果和GPU的采样逻辑是冲突的边缘会发虚。还有一个问题是多语言字体回退要自己做GDI的字体链路和DirectWrite差距明显。一套成熟的方案是用DirectWrite排版文字渲染到离屏位图再上传成ID3D11ShaderResourceView最后作为纹理贴到UI四边形上。这样既保住了D3D的渲染管线又能享受DirectWrite的字体回退和现代排版能力。对比一下三种文字处理路径方案抗锯齿质量旋转/缩放透明混合字体回退GDI DrawText中依赖DPI虚拟化差差弱Direct2DDWrite直接画好中好强DWrite→纹理→D3D好好后处理好强4.2 用DWrite把文字变成D3D纹理完整流程整体流程分六步创建DWrite工厂、创建TextLayout、测量文本尺寸、用WIC位图作为离屏画布、用Direct2D绘制文字、把位图像素拷贝到D3D纹理。// text_texture.cpp bool CreateTextTexture( ID3D11Device* device, ID3D11DeviceContext* context, const wchar_t* text, const FontSpec fs, ID3D11ShaderResourceView** outSRV, int* outWidth, int* outHeight) { // 1. DWrite 工厂与文本布局 IDWriteFactory* dwFactory nullptr; DWriteCreateFactory(DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_castIUnknown**(dwFactory)); IDWriteTextFormat* textFormat nullptr; dwFactory-CreateTextFormat( fs.fontName.c_str(), nullptr, fs.weight, DWRITE_FONT_STYLE_NORMAL, DWRITE_FONT_STRETCH_NORMAL, fs.fontSizePx, // 字号单位是DIP Lzh-CN, // 区域影响字体回退优先级 textFormat); IDWriteTextLayout* textLayout nullptr; dwFactory-CreateTextLayout( text, static_castUINT32(wcslen(text)), textFormat, 1024.0f, 512.0f, textLayout); // 2. 测量实际文本尺寸 DWRITE_TEXT_METRICS tm{}; textLayout-GetMetrics(tm); int width static_castint(ceil(tm.widthIncludingTrailingWhitespace)); int height static_castint(ceil(tm.height)); if (width 1 || height 1) { dwFactory-Release(); textFormat-Release(); textLayout-Release(); return false; } // 3. 创建 WIC 位图作为离屏画布 IWICImagingFactory* wicFactory nullptr; CoCreateInstance(CLSID_WICImagingFactory, nullptr, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(wicFactory)); IWICBitmap* bitmap nullptr; wicFactory-CreateBitmap(width, height, GUID_WICPixelFormat32bppBGR, WICBitmapCacheOnDemand, bitmap); // 4. 用 Direct2D 画到这个位图上 ID2D1Factory* d2dFactory nullptr; D2D1CreateFactory(D2D1_FACTORY_TYPE_SINGLE_THREADED, __uuidof(ID2D1Factory), reinterpret_castvoid**(d2dFactory)); ID2D1RenderTarget* rt nullptr; d2dFactory-CreateWicBitmapRenderTarget( bitmap, D2D1::RenderTargetProperties(), rt); rt-BeginDraw(); rt-Clear(D2D1::ColorF(0.0f, 0.0f, 0.0f, 1.0f)); // 不透明背景 ID2D1SolidColorBrush* brush nullptr; rt-CreateSolidColorBrush( D2D1::ColorF(D2D1::ColorF::White), brush); D2D1_POINT_2F origin{ 0.0f, 0.0f }; rt-DrawTextLayout(origin, textLayout, brush, D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT); rt-EndDraw(); // 5. 拷贝像素到 D3D 纹理 WICRect rc{ 0, 0, width, height }; UINT stride static_castUINT(width * 4); std::vectorBYTE pixels(stride * height); bitmap-CopyPixels(rc, stride, pixels.size(), pixels.data()); D3D11_TEXTURE2D_DESC td{}; td.Width width; td.Height height; td.MipLevels 1; td.ArraySize 1; td.Format DXGI_FORMAT_B8G8R8A8_UNORM; td.SampleDesc.Count 1; td.Usage D3D11_USAGE_IMMUTABLE; td.BindFlags D3D11_BIND_SHADER_RESOURCE; D3D11_SUBRESOURCE_DATA initData{}; initData.pSysMem pixels.data(); initData.SysMemPitch stride; ID3D11Texture2D* tex nullptr; device-CreateTexture2D(td, initData, tex); device-CreateShaderResourceView(tex, nullptr, outSRV); // 6. 释放临时对象 tex-Release(); brush-Release(); rt-Release(); d2dFactory-Release(); bitmap-Release(); wicFactory-Release(); textLayout-Release(); textFormat-Release(); dwFactory-Release(); *outWidth width; *outHeight height; return true; }流程长但每一步都是必要的。有几个点我写过注释Clear时用不透明的黑色而不是透明色这是为了避开ClearType与透明背景冲突的问题。纹理格式与交换链保持一致都是B8G8R8A8避免采样时格式转换。D2D的CreateWicBitmapRenderTarget是离屏渲染的关键不需要任何窗口纯粹在内存里画。4.3 小字号优化GDI自然测量模式与透明混合把这段文字相关代码单独讲一下。DirectWrite默认的测量模式是DWRITE_MEASURING_MODE_NATURAL字形轮廓按理想矢量处理小字号时容易显得发虚。GDI自然模式则针对小字号做了优化字形轮廓更贴屏幕像素网格中文宋体小四这种尺寸下观感明显更清楚。textLayout-SetMeasuringMode(DWRITE_MEASURING_MODE_GDI_NATURAL);但要注意GDI自然模式的抗锯齿依赖次像素形状渲染这种渲染结果不能放到透明背景上。如果文字纹理的背景是透明的边缘像素会带上红绿蓝的色偏叠在渐变背景上特别明显。所以我通常把文字和它所在的纯色面板画成同一张纹理整块上传让不透明背景把次像素问题消掉。如果一定要做透明浮层就把文字纹理的背景设置为接近最终背景色的不透明色而不是纯黑色。4.4 字体缓存与DPI缩放别让每帧都重建纹理CreateTextTexture的开销很大涉及COM对象创建、WIC位图分配和CPU像素拷贝绝对不能放在每帧渲染里。我一般用一个以文本内容、字号、字重为键的缓存字典。// font_cache.h struct FontKey { std::wstring text; float fontSize; DWRITE_FONT_WEIGHT weight; int dpiScale; // 96, 120, 144 等实际DPI值 bool operator(const FontKey o) const { if (text ! o.text) return text o.text; if (fontSize ! o.fontSize) return fontSize o.fontSize; if (weight ! o.weight) return weight o.weight; return dpiScale o.dpiScale; } }; std::mapFontKey, TextTextureItem g_fontCache;DPI缩放要特别留意同样的字号在96 DPI和144 DPI的屏幕上物理像素数不一样。如果直接用GetDeviceCaps拿到的像素尺寸生成文字会把文字画大。我保持FontSpec里的fontSize是逻辑尺寸生成纹理时乘上实际DPI比例再在控件渲染时用DpiScale常量统一缩放。这样切换显示器时只改一个全局参数界面整体等比变化不会出现某几个控件特别大、文字却不变的情况。缓存满了我建议做一次清理超过128条后按最近使用时间清掉旧项。GUI的文本变化通常集中在按钮、输入框、标签这几个地方128个条目足够日常使用每清一次释放的都是整块纹理内存。5. 避坑DirectX自绘GUI最容易翻车的5个真实场景5.1 窗口拖动缩小后界面整块糊掉或变形现象把窗口从1920宽拖到800宽界面被横向拉伸文字变扁按钮位置全错。或者更夸张直接黑屏只剩鼠标。原因交换链的后备缓冲尺寸还是旧的D3D把旧尺寸的画面拉伸填满了新的客户区。这跟GDI时代的客户区重绘完全是两码事。解决在WM_SIZE里做完整的三步重建——释放RTV、ResizeBuffers、重新创建RTV和Viewport。顺序不能反RTV还绑在渲染目标上时ResizeBuffers会返回失败。void OnResizeSwapChain() { if (!g_pSwapChain) return; RECT rc; GetClientRect(g_hWnd, rc); UINT w rc.right - rc.left; UINT h rc.bottom - rc.top; g_pd3dContext-OMSetRenderTargets(0, nullptr, nullptr); g_pRTV-Release(); g_pRTV nullptr; g_pSwapChain-ResizeBuffers(0, w, h, DXGI_FORMAT_UNKNOWN, 0); ID3D11Texture2D* pBack nullptr; g_pSwapChain-GetBuffer(0, __uuidof(ID3D11Texture2D), reinterpret_castvoid**(pBack)); g_pd3dDevice-CreateRenderTargetView(pBack, nullptr, g_pRTV); pBack-Release(); }ResizeBuffers的第一个参数传0表示保持原来的BufferCountFormat传UNKNOWN表示保持原格式。Resize成功后RTV必须重新创建旧的RTV虽然绑定了后备缓冲但尺寸信息已经失效。还有一个细节ResizeBuffers之前所有与后备缓冲相关的状态都要解除绑定否则会返回D3D11_ERROR_INVALID_CALL这个问题在Debug Layer下面会打印得很清楚。5.2 休眠唤醒或显示驱动重置后画面冻结现象笔记本电脑合盖再打开界面卡在最后一帧点击没有任何反应。查看Present的返回值拿到DXGI_ERROR_DEVICE_REMOVED或DXGI_ERROR_DEVICE_RESET。原因GPU在休眠或驱动升级时被系统重置D3D设备和所有资源全部失效。这种情况不是代码bug做自绘GUI必须把它当成正常运行时路径来处理。解决检测到Present返回上述错误后把设备、交换链、纹理、SRV全部释放然后重新走一遍InitD3D重建控件树里所有的纹理资源。注意不能靠ResizeBuffers自救设备没了交换链也没了唯一正解是整体重建。用户机器上如果装过DirectX修复工具那是用来补系统运行库的解决不了GPU设备重置。发布时把Microsoft Visual C Redistributablex64一并打包是基本操作否则用户连程序都起不来根本到不了渲染这一步。5.3 文字边缘白边和模糊现象文字纹理贴在半透明按钮上周围有一圈白边或者小字发灰像蒙了一层雾。原因ClearType次像素渲染的RGB像素在有透明背景上无法正确混合。纹理边缘像素的颜色不是纯粹的不透明白色而是红绿蓝三个子像素各有偏色放到半透明画布上就露馅了。解决第一层防线是把文字绘制到不透明背景上用纯色背景一次性解决。第二层防线在需要透明浮层时把D2D的抗锯齿模式从默认的CLEARTYPE改成GRAYSCALErenderTarget-SetTextAntialiasMode(D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE);灰度抗锯齿不依赖子像素透明边缘只带alpha信息混出来就是干净的自然过渡。代价是笔画边缘比ClearType略粗对小字号中文影响不大因为中文笔画多而密灰度的稳健性反而更重要。如果发现文字变虚优先检查纹理的背景alpha值是不是0而不是盲目换字体。5.4 高DPI下鼠标点不准控件现象系统缩放设成150%后鼠标点按钮上沿按钮高亮区域却在下沿或者hover特效永远对不准。原因GetMessagePos和MAKEPOINTS拿到的是物理像素坐标而UI布局用的是逻辑坐标。如果进程没有声明DPI Aware系统会先把窗口按逻辑尺寸布局再整体放大到物理尺寸你的命中测试却拿着物理坐标跟逻辑坐标比当然偏。解决进程启动时声明PerMonitorV2。在Win10以上系统这是自绘GUI最划算的一次调用。SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);声明之后系统不再帮你做虚拟化缩放GetClientRect返回的是物理像素UI坐标需要自己换算。我通常把所有控件坐标保存在逻辑坐标下渲染时乘以某个DPI比例系数命中测试时把鼠标物理坐标除以同样的系数。窗口跨屏拖动时要注意DPI变化消息WM_DPICHANGED收到后要更新系数并重新计算layout否则拖到副屏会瞬间点不准。5.5 资源释放顺序不对导致退出崩溃现象程序退出时在Debug模式下报出一堆live object警告或者release完交换链后崩溃。原因D3D资源有明确的依赖关系。RTV引用后备缓冲纹理SRV引用纹理这些对象必须在父对象销毁前释放。如果先Release交换链再Release RTVRTV引用的后备缓冲已经不存在Debug Layer直接报错Release版本则可能产生访问冲突。解决按“先建后灭”的顺序释放。先释放所有SRV和纹理然后释放RTV再释放SwapChain最后释放Context和Device。// 释放顺序参考 for (auto item : g_fontCache) item.second.srv-Release(); g_fontCache.clear(); g_pRTV-Release(); g_pRTV nullptr; g_pSwapChain-Release(); g_pSwapChain nullptr; g_pd3dContext-Release(); g_pd3dContext nullptr; g_pd3dDevice-Release(); g_pd3dDevice nullptr;在实际工程里我建议用wil::com_ptr或ATL的CComPtr来管理这些接口让析构顺序由成员变量的声明顺序自动保证。手动写Release数量一多迟早有一条路径漏掉。Debug模式下D3D11_CREATE_DEVICE_DEBUG开起来退出时Output窗口会列出所有未释放的COM对象对照着改就是最直接的血泪经验。6. 进阶把自绘GUI变成能长期维护的控件框架6.1 用一份布局JSON描述控件树当控件树写到十几个节点时硬编码布局就开始让人烦躁。我一般把布局抽成JSON运行时装帧时解析并构建控件树调UI位置不用重新编译。{ widget: Panel, name: MainPanel, bounds: [0, 0, 800, 600], children: [ { widget: Button, name: BtnStart, bounds: [300, 200, 140, 36], text: Start, zOrder: 1 }, { widget: ProgressBar, name: ProgressDownload, bounds: [300, 260, 140, 12], min: 0, max: 100, zOrder: 1 } ] }布局配置文件不是万能的但它把“控件长什么样”和“控件做什么”分开。绘制样式由代码里的Shader和纹理决定位置尺寸由JSON决定C侧拿到JSON建树后只负责绑定事件回调。这招对中后期项目的维护效率提升最明显。6.2 渲染自检用Debug Layer和帧捕获验证你的帧写满几千行自绘代码后最怕的不是功能bug而是帧结构坏了但不报错画面看起来就是不对劲。两个工具要常用第一个是D3D Debug Layer设备创建时加D3D11_CREATE_DEVICE_DEBUG输出窗口会打印资源泄漏、状态绑定错误和无效参数第二个是RenderDoc逐帧查看DrawCall、顶点输入和后备缓冲内容。我习惯在每个版本保留一个隐藏的“渲染自检模式”按F12输出当前帧的DrawCall数量和总顶点数。自绘GUI有几十个控件很正常DrawCall通常在10到20之间所有控件共享同一个纹理图集、同一个顶点缓冲数量异常增长时优先查是不是忘记合并批次、每个控件单独调了一次Draw。这种优化不追求极限性能纯粹是让每一帧保持可预测、可诊断。GUI是桌面软件里最容易被低估的部分Visual C加DirectX这条路弯道多但走通了就很顺手。做自绘最怕两只脚陷入框架坑里我希望这套从设备初始化到文字纹理的路径能让你少绕一次弯。保持控件的“外部事件由消息驱动、内部绘制由GPU完成、布局数据可配置”这个节奏界面工程就不会变成玄学。希望帮到你。本文还有配套的精品资源点击获取 Visual C++ + DirectX 11 自绘GUI实战：从设备初始化到文字渲染
简介一份以 Visual C 与 DirectX 为基础、用于实现自定义 GUI 界面的完整工程源码面向希望掌握 Direct3D 非窗口化界面渲染、控件绘制与游戏 UI 开发流程的 C 学习者。整套代码使用 Direct3D 构建控件体系而非依赖传统 Win32 控件核心逻辑由 BattleTank 主程序与 engine 模块协同完成其中包含按钮、窗口、列表框、消息框、滑块、光标等十余种 CUI 控件的定义与实现并涉及 DirectX 初始化、视口设置、渲染循环、键盘输入处理等关键环节。压缩包共 79 个文件以 38 个头文件与 36 个 C 源文件为主另含图标、Visual Studio 解决方案与项目文件、资源脚本以及预编译头整体仅 121KB结构紧凑便于按 CUIControl、engine、Global 等目录分类研读。目前已有 328 人学习与下载。适合具备 C 基础、想了解 DirectX 图形界面开发流程的开发者参考也能为自制引擎 UI 模块的控件封装、消息分发与绘制机制提供实用思路。1. 直接用Visual C配合DirectX做GUI为什么这是一条值得走的路在Visual C工程里点开控件工具箱拖一个Button出来改一改属性这大概是大多数人对Windows GUI的第一印象。可一旦想让界面脱离标准控件的样子加上圆角、渐变、遮罩动画、实时数据纹理默认那套就撑不住了。用DirectX做GUI是把整个界面当作一张由GPU绘制的图像来处理控件不再是一个个HWND子窗口而是渲染树里的四边形节点点击命中则照样由Win32消息驱动。换来的自由是控件的长相完全自己说了算付出的代价是消息、文字、布局、DPI这些原本被框架隐藏的细节全部从黑匣子里暴露出来。这套方案适合需要高度自定义界面、同时希望渲染与界面同管线的桌面工程师。2. 技术方案拆解为什么选D3D11而不是继续用GDI或套用Qt2.1 三个候选方案的对比与选型理由GDI自绘在控件数量不多时很直观选个字体、画矩形、填文字代码短出效果也快。可一旦界面进入高刷新场景比如实时波形、地图缩放、列表快速滚动GDI的CPU绘制就会成为瓶颈。而且GDI的绘制轨迹依赖DC的状态机状态一多后期改样式等于重写一遍绘制逻辑。更关键的是GDI画出来的内容是位图没法跟D3D场景直接做alpha混合或参与shader处理两条绘制路径的同步本身就是一笔糊涂账。Qt是另一个常见选项。QWidget和QML都自带成熟的控件和布局体系但其渲染引擎和D3D属于两层东西想在自绘控件里直接操作D3D纹理、做后处理特效就要做类型桥接和上下文切换。对大多数应用这没问题可对需要“界面本身就是实时渲染画面一部分”的软件Qt的反而是负担。D3D11的好处是整个界面在每帧里就是一组顶点和纹理UI和可视化渲染共用同一套设备、同一份视口不用来回切。相比D3D12D3D11对GUI开发更友好。GUI不需要手动管理命令列表、资源屏障和显式同步D3D11的延迟上下文和绑定模型足够撑起几十个控件。老显卡、内置显卡、虚拟机里的WARP驱动都能兜底。如果你的目标平台是Windows 7到Windows 11的广泛桌面D3D11是目前自绘GUI最平衡的答案。2.2 最小设备初始化把D3D11的设备和交换链建起来第一步不是画控件而是把设备和交换链建好。这段代码是整套GUI的根基参数直接影响后续所有渲染行为。// gui_d3d_init.cpp #include d3d11.h #include dxgi.h #pragma comment(lib, d3d11.lib) #pragma comment(lib, dxgi.lib) ID3D11Device* g_pd3dDevice nullptr; ID3D11DeviceContext* g_pd3dContext nullptr; IDXGISwapChain* g_pSwapChain nullptr; ID3D11RenderTargetView* g_pRTV nullptr; bool InitD3D(HWND hWnd) { DXGI_SWAP_CHAIN_DESC scd{}; scd.BufferCount 2; // 双缓冲 scd.BufferDesc.Width 0; // 0 表示跟随窗口客户区 scd.BufferDesc.Height 0; scd.BufferDesc.Format DXGI_FORMAT_B8G8R8A8_UNORM; scd.BufferDesc.RefreshRate { 0, 0 }; // 让系统选择刷新率 scd.BufferUsage DXGI_USAGE_RENDER_TARGET_OUTPUT; scd.OutputWindow hWnd; scd.SampleDesc.Count 1; // 自绘GUI不需要MSAA scd.SampleDesc.Quality 0; scd.Windowed TRUE; scd.SwapEffect DXGI_SWAP_EFFECT_DISCARD; UINT flags D3D11_CREATE_DEVICE_BGRA_SUPPORT; #ifdef _DEBUG flags | D3D11_CREATE_DEVICE_DEBUG; #endif D3D_FEATURE_LEVEL levels[] { D3D_FEATURE_LEVEL_11_0, D3D_FEATURE_LEVEL_10_1, D3D_FEATURE_LEVEL_10_0 }; HRESULT hr D3D11CreateDeviceAndSwapChain( nullptr, D3D_DRIVER_TYPE_HARDWARE, nullptr, flags, levels, _countof(levels), D3D11_SDK_VERSION, scd, g_pSwapChain, g_pd3dDevice, nullptr, g_pd3dContext); if (FAILED(hr)) return false; return true; }几个参数值得单独说。BufferCount设为2就是传统双缓冲Present之后后备缓冲和前台缓冲交换不必等三缓冲增加延迟。Format选B8G8R8A8_UNORM是因为桌面窗口链对这个格式兼容性最好后面接Direct2D/DWrite也省一步转换。SampleDesc.Count保持1MSAA对GUI没有正向收益反而会在透明边界上产生奇奇怪怪的采样结果。D3D_DRIVER_TYPE_HARDWARE配合nullptr适配器让系统自动选择显卡。调试阶段如果想在无显卡的虚拟机上跑可以临时改成D3D_DRIVER_TYPE_WARP但正式发布不要带WARP它的CPU开销会让你误以为代码有性能问题。flags里加了D3D11_CREATE_DEVICE_BGRA_SUPPORT这是为后面DWrite做纹理互操作预留的不加会踩到资源格式不兼容的坑。2.3 从RTV到Present一条最小的渲染链路设备建好之后还要把后备缓冲包装成渲染目标视图才能往上画东西。ID3D11Texture2D* pBackBuffer nullptr; g_pSwapChain-GetBuffer(0, __uuidof(ID3D11Texture2D), reinterpret_castvoid**(pBackBuffer)); g_pd3dDevice-CreateRenderTargetView(pBackBuffer, nullptr, g_pRTV); pBackBuffer-Release(); D3D11_VIEWPORT vp{}; vp.TopLeftX 0; vp.TopLeftY 0; vp.Width (float)clientWidth; vp.Height (float)clientHeight; vp.MinDepth 0.0f; vp.MaxDepth 1.0f; g_pd3dContext-RSSetViewports(1, vp);每帧的渲染循环固定这么几步先ClearRenderTargetView把整个后台刷成背景色然后绘制当前控件树最后Present上屏。const float clearColor[4] { 0.08f, 0.09f, 0.10f, 1.0f }; g_pd3dContext-ClearRenderTargetView(g_pRTV, clearColor); // RenderFrame() 在这里提交控件顶点和纹理 g_pSwapChain-Present(1, 0);Present的第一个参数是SyncInterval。GUI我通常设为1开启垂直同步既避免屏幕撕裂也不用让显卡空转跑到几百帧。游戏可以关垂直同步追求帧率桌面软件没这个必要风扇声音和耗电得不偿失。窗口被最小化时Present会阻塞等待垂直同步建议在渲染循环里加一个IsIconic判断窗口不可见就睡10毫秒再继续。2.4 把像素坐标送进顶点着色器ViewportSize与NDC换算自绘GUI全部使用屏幕像素坐标但D3D的顶点位置是归一化设备坐标NDC范围-1到1。我习惯在常量缓冲里放一个ViewportSize然后在顶点着色器里做换算这样CPU侧所有控件坐标都保持“逻辑像素”不会因为DPI或者窗口尺寸变化而让整个控件树重新计算坐标。// ui_vertex.hlsl cbuffer UIConstants : register(b0) { float2 ViewportSize; float2 DpiScale; }; struct VS_IN { float2 Pos : POSITION; float2 UV : TEXCOORD0; float4 Color : COLOR0; }; struct VS_OUT { float4 Pos : SV_Position; float2 UV : TEXCOORD0; float4 Color : COLOR0; }; VS_OUT VSMain(VS_IN vin) { VS_OUT vout; float2 ndc (vin.Pos / ViewportSize) * 2.0f - 1.0f; ndc.y -ndc.y; // 屏幕原点在左上NDC的y轴向上 vout.Pos float4(ndc, 0.0f, 1.0f); vout.UV vin.UV; vout.Color vin.Color; return vout; }把所有控件坐标换算收拢到着色器之后CPU侧做命中测试、控件布局、动画计算都在逻辑坐标下进行。窗口尺寸变化时只需要更新ViewportSize这一个常量界面的所有元素会自动重新铺满。DpiScale这个字段留到第4章讲字体时再说它解决的是高DPI屏下文字和控件比例失配的问题。3. 从Win32消息到控件命中把Windows窗口变成D3D宿主3.1 消息分发器WndProc只做管家不做绘制很多自绘初学者的习惯是把绘制逻辑直接塞进WM_PAINT在D3D方案里这是错的。渲染应该交给独立的RenderFrameWM_PAINT只负责触发一次渲染然后立即ValidateRect。这样消息循环和渲染循环的边界清楚窗口拖动时时不会因为反复触发WM_PAINT而堆积绘制开销。Win32消息和渲染动作的对应关系我一般这样分Win32消息分发动作WM_SIZE释放RTV、ResizeBuffers、重建RTV和ViewportWM_DISPLAYCHANGE同WM_SIZE显示器分辨率变化也要重建后备缓冲WM_PAINT调用一次RenderFrame然后ValidateRectWM_MOUSEMOVE换算坐标后调用控件树的HitTestWM_LBUTTONDOWN命中后把控件置为Pressed状态WM_MOUSEWHEEL找到鼠标下的可滚动控件改其滚动偏移WM_IME_*转发给当前焦点控件用于中文输入分发器本身不复杂关键是养成“WndProc不绘制、只转发”的习惯。下面这个例子把鼠标消息翻译成UI坐标并交给控件树。// wndproc_router.cpp LRESULT CALLBACK WndProc(HWND hWnd, UINT msg, WPARAM wp, LPARAM lp) { switch (msg) { case WM_SIZE: OnResizeSwapChain(); return 0; case WM_PAINT: RenderFrame(); ValidateRect(hWnd, nullptr); return 0; case WM_MOUSEMOVE: { POINTS pt MAKEPOINTS(lp); float uiX pt.x * g_dpiScale; // 物理坐标转逻辑坐标 float uiY pt.y * g_dpiScale; g_uiRoot.HitTest(uiX, uiY); break; } case WM_LBUTTONDOWN: { POINTS pt MAKEPOINTS(lp); float uiX pt.x * g_dpiScale; float uiY pt.y * g_dpiScale; UIWidget* hit g_uiRoot.HitTest(uiX, uiY); if (hit) hit-SetPressed(true); break; } } return DefWindowProc(hWnd, msg, wp, lp); }注意这里用MAKEPOINTS取出的是窗口客户区坐标没有经过任何DPI转换。如果进程没有声明DPI Aware系统会帮你做虚拟化缩放拿到的坐标和你画的界面永远对不上。所以程序启动时第一件事就是调用SetProcessDpiAwarenessContext后面第5章会专门讲这个坑。3.2 控件树与命中测试一个矩形加一个回调控件本身就是一个带矩形、可见性、Z序和状态标记的节点。每个控件在渲染阶段绘制自己在命中阶段检查自己是否被点到。// ui_widget.h struct UIWidget { RectF bounds; UIWidget* parent; std::vectorUIWidget* children; int zOrder 0; bool visible true; bool disabled false; WidgetState state WidgetState::Normal; void (*onMouseDown)(UIWidget* self, const Vec2 local); void (*onMouseUp)(UIWidget* self, const Vec2 local); void Draw(GuiRenderer r) { if (!visible) return; r.PushClip(bounds); DrawSelf(r); // 按 zOrder 升序绘制后画的覆盖先画的 std::sort(children.begin(), children.end(), [](UIWidget* a, UIWidget* b) { return a-zOrder b-zOrder; }); for (UIWidget* child : children) child-Draw(r); r.PopClip(); } };命中测试正好反过来从父节点开始先检查自己再检查子节点子节点里从Z序最高的往下找。这样下拉列表才能盖住按钮、弹窗才能挡住后面所有控件。// hit_test.cpp UIWidget* HitTest(UIWidget* node, const Vec2 pos) { if (!node-visible || !node-disabled) return nullptr; if (!node-bounds.Contains(pos)) return nullptr; // 子节点从视觉最上层zOrder最大往下找 std::sort(node-children.begin(), node-children.end(), [](UIWidget* a, UIWidget* b) { return a-zOrder b-zOrder; }); for (auto it node-children.rbegin(); it ! node-children.rend(); it) { if (UIWidget* hit HitTest(*it, pos)) return hit; } return node; }这段逻辑里隐藏着一个最容易忽略的点裁剪。如果父节点被裁剪到某个矩形内子节点即使坐标越界也不应该被命中。渲染前把ClipRect压栈命中前先检查ClipRect这两个操作必须一致否则会在边缘出现“鼠标能点到看不见的区域”的神奇问题。3.3 IME与中文输入D3D自绘绕不过的坎自绘控件的最大麻烦是中文输入法。标准Edit控件天然处理IME候选窗和组字过程自绘控件没有这个待遇必须自己接Immediate Mode。当一个编辑框获得焦点时Windows会把IME上下文绑定到该窗口。用户敲拼音时系统发送WM_IME_STARTCOMPOSITION、WM_IME_COMPOSITION和WM_IME_ENDCOMPOSITION我们需要在WM_IME_COMPOSITION里把组字结果取出来更新到自绘编辑框的文本缓冲里然后触发文本纹理重建。// ime_handler.cpp case WM_IME_COMPOSITION: { HIMC hImc ImmGetContext(hWnd); if (hImc) { if (dwParam GCS_RESULTSTR) { DWORD len ImmGetCompositionStringW( hImc, GCS_RESULTSTR, nullptr, 0); std::wstring text(len / sizeof(wchar_t) 1, L\0); ImmGetCompositionStringW( hImc, GCS_RESULTSTR, text.data(), len); text.resize(len / sizeof(wchar_t)); editBox-SetText(text); editBox-RecreateTextTexture(); // 关键更新文字纹理 } ImmReleaseContext(hWnd, hImc); } return 0; }用ImmGetContext这套流程能快速把输入体验打通但注意它拿到的HIMC是每毫秒变化的用完必须ImmReleaseContext否则会句柄泄漏。更现代的做法是使用TSFText Services Framework功能更完整支持语音输入、手写扩展等但复杂度高不少我建议第一版先用IMM把中文搞定运行稳定了再考虑迁移TSF。4. 文字是GUI的良心DWrite离屏纹理与字体缓存4.1 为什么不用GDI直接把文字画进后备缓冲从Windows Vista开始GDI和D3D就是两条独立的绘制路径GDI的绘制命令不能直接写到D3D后备缓冲上。硬要混用常见的招数是GetDC拿到窗口DC再开D3D交换链这会导致闪烁和性能灾难因为GDI绘制和D3D Present之间没有同步机制。我尝试过在D3D项目里调用GDI的DrawText到内存DC再作为纹理上传D3D。小字号文字确实能看但带旋转、缩放、半透明混合时完全不行GDI的栅格化结果和GPU的采样逻辑是冲突的边缘会发虚。还有一个问题是多语言字体回退要自己做GDI的字体链路和DirectWrite差距明显。一套成熟的方案是用DirectWrite排版文字渲染到离屏位图再上传成ID3D11ShaderResourceView最后作为纹理贴到UI四边形上。这样既保住了D3D的渲染管线又能享受DirectWrite的字体回退和现代排版能力。对比一下三种文字处理路径方案抗锯齿质量旋转/缩放透明混合字体回退GDI DrawText中依赖DPI虚拟化差差弱Direct2DDWrite直接画好中好强DWrite→纹理→D3D好好后处理好强4.2 用DWrite把文字变成D3D纹理完整流程整体流程分六步创建DWrite工厂、创建TextLayout、测量文本尺寸、用WIC位图作为离屏画布、用Direct2D绘制文字、把位图像素拷贝到D3D纹理。// text_texture.cpp bool CreateTextTexture( ID3D11Device* device, ID3D11DeviceContext* context, const wchar_t* text, const FontSpec fs, ID3D11ShaderResourceView** outSRV, int* outWidth, int* outHeight) { // 1. DWrite 工厂与文本布局 IDWriteFactory* dwFactory nullptr; DWriteCreateFactory(DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_castIUnknown**(dwFactory)); IDWriteTextFormat* textFormat nullptr; dwFactory-CreateTextFormat( fs.fontName.c_str(), nullptr, fs.weight, DWRITE_FONT_STYLE_NORMAL, DWRITE_FONT_STRETCH_NORMAL, fs.fontSizePx, // 字号单位是DIP Lzh-CN, // 区域影响字体回退优先级 textFormat); IDWriteTextLayout* textLayout nullptr; dwFactory-CreateTextLayout( text, static_castUINT32(wcslen(text)), textFormat, 1024.0f, 512.0f, textLayout); // 2. 测量实际文本尺寸 DWRITE_TEXT_METRICS tm{}; textLayout-GetMetrics(tm); int width static_castint(ceil(tm.widthIncludingTrailingWhitespace)); int height static_castint(ceil(tm.height)); if (width 1 || height 1) { dwFactory-Release(); textFormat-Release(); textLayout-Release(); return false; } // 3. 创建 WIC 位图作为离屏画布 IWICImagingFactory* wicFactory nullptr; CoCreateInstance(CLSID_WICImagingFactory, nullptr, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(wicFactory)); IWICBitmap* bitmap nullptr; wicFactory-CreateBitmap(width, height, GUID_WICPixelFormat32bppBGR, WICBitmapCacheOnDemand, bitmap); // 4. 用 Direct2D 画到这个位图上 ID2D1Factory* d2dFactory nullptr; D2D1CreateFactory(D2D1_FACTORY_TYPE_SINGLE_THREADED, __uuidof(ID2D1Factory), reinterpret_castvoid**(d2dFactory)); ID2D1RenderTarget* rt nullptr; d2dFactory-CreateWicBitmapRenderTarget( bitmap, D2D1::RenderTargetProperties(), rt); rt-BeginDraw(); rt-Clear(D2D1::ColorF(0.0f, 0.0f, 0.0f, 1.0f)); // 不透明背景 ID2D1SolidColorBrush* brush nullptr; rt-CreateSolidColorBrush( D2D1::ColorF(D2D1::ColorF::White), brush); D2D1_POINT_2F origin{ 0.0f, 0.0f }; rt-DrawTextLayout(origin, textLayout, brush, D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT); rt-EndDraw(); // 5. 拷贝像素到 D3D 纹理 WICRect rc{ 0, 0, width, height }; UINT stride static_castUINT(width * 4); std::vectorBYTE pixels(stride * height); bitmap-CopyPixels(rc, stride, pixels.size(), pixels.data()); D3D11_TEXTURE2D_DESC td{}; td.Width width; td.Height height; td.MipLevels 1; td.ArraySize 1; td.Format DXGI_FORMAT_B8G8R8A8_UNORM; td.SampleDesc.Count 1; td.Usage D3D11_USAGE_IMMUTABLE; td.BindFlags D3D11_BIND_SHADER_RESOURCE; D3D11_SUBRESOURCE_DATA initData{}; initData.pSysMem pixels.data(); initData.SysMemPitch stride; ID3D11Texture2D* tex nullptr; device-CreateTexture2D(td, initData, tex); device-CreateShaderResourceView(tex, nullptr, outSRV); // 6. 释放临时对象 tex-Release(); brush-Release(); rt-Release(); d2dFactory-Release(); bitmap-Release(); wicFactory-Release(); textLayout-Release(); textFormat-Release(); dwFactory-Release(); *outWidth width; *outHeight height; return true; }流程长但每一步都是必要的。有几个点我写过注释Clear时用不透明的黑色而不是透明色这是为了避开ClearType与透明背景冲突的问题。纹理格式与交换链保持一致都是B8G8R8A8避免采样时格式转换。D2D的CreateWicBitmapRenderTarget是离屏渲染的关键不需要任何窗口纯粹在内存里画。4.3 小字号优化GDI自然测量模式与透明混合把这段文字相关代码单独讲一下。DirectWrite默认的测量模式是DWRITE_MEASURING_MODE_NATURAL字形轮廓按理想矢量处理小字号时容易显得发虚。GDI自然模式则针对小字号做了优化字形轮廓更贴屏幕像素网格中文宋体小四这种尺寸下观感明显更清楚。textLayout-SetMeasuringMode(DWRITE_MEASURING_MODE_GDI_NATURAL);但要注意GDI自然模式的抗锯齿依赖次像素形状渲染这种渲染结果不能放到透明背景上。如果文字纹理的背景是透明的边缘像素会带上红绿蓝的色偏叠在渐变背景上特别明显。所以我通常把文字和它所在的纯色面板画成同一张纹理整块上传让不透明背景把次像素问题消掉。如果一定要做透明浮层就把文字纹理的背景设置为接近最终背景色的不透明色而不是纯黑色。4.4 字体缓存与DPI缩放别让每帧都重建纹理CreateTextTexture的开销很大涉及COM对象创建、WIC位图分配和CPU像素拷贝绝对不能放在每帧渲染里。我一般用一个以文本内容、字号、字重为键的缓存字典。// font_cache.h struct FontKey { std::wstring text; float fontSize; DWRITE_FONT_WEIGHT weight; int dpiScale; // 96, 120, 144 等实际DPI值 bool operator(const FontKey o) const { if (text ! o.text) return text o.text; if (fontSize ! o.fontSize) return fontSize o.fontSize; if (weight ! o.weight) return weight o.weight; return dpiScale o.dpiScale; } }; std::mapFontKey, TextTextureItem g_fontCache;DPI缩放要特别留意同样的字号在96 DPI和144 DPI的屏幕上物理像素数不一样。如果直接用GetDeviceCaps拿到的像素尺寸生成文字会把文字画大。我保持FontSpec里的fontSize是逻辑尺寸生成纹理时乘上实际DPI比例再在控件渲染时用DpiScale常量统一缩放。这样切换显示器时只改一个全局参数界面整体等比变化不会出现某几个控件特别大、文字却不变的情况。缓存满了我建议做一次清理超过128条后按最近使用时间清掉旧项。GUI的文本变化通常集中在按钮、输入框、标签这几个地方128个条目足够日常使用每清一次释放的都是整块纹理内存。5. 避坑DirectX自绘GUI最容易翻车的5个真实场景5.1 窗口拖动缩小后界面整块糊掉或变形现象把窗口从1920宽拖到800宽界面被横向拉伸文字变扁按钮位置全错。或者更夸张直接黑屏只剩鼠标。原因交换链的后备缓冲尺寸还是旧的D3D把旧尺寸的画面拉伸填满了新的客户区。这跟GDI时代的客户区重绘完全是两码事。解决在WM_SIZE里做完整的三步重建——释放RTV、ResizeBuffers、重新创建RTV和Viewport。顺序不能反RTV还绑在渲染目标上时ResizeBuffers会返回失败。void OnResizeSwapChain() { if (!g_pSwapChain) return; RECT rc; GetClientRect(g_hWnd, rc); UINT w rc.right - rc.left; UINT h rc.bottom - rc.top; g_pd3dContext-OMSetRenderTargets(0, nullptr, nullptr); g_pRTV-Release(); g_pRTV nullptr; g_pSwapChain-ResizeBuffers(0, w, h, DXGI_FORMAT_UNKNOWN, 0); ID3D11Texture2D* pBack nullptr; g_pSwapChain-GetBuffer(0, __uuidof(ID3D11Texture2D), reinterpret_castvoid**(pBack)); g_pd3dDevice-CreateRenderTargetView(pBack, nullptr, g_pRTV); pBack-Release(); }ResizeBuffers的第一个参数传0表示保持原来的BufferCountFormat传UNKNOWN表示保持原格式。Resize成功后RTV必须重新创建旧的RTV虽然绑定了后备缓冲但尺寸信息已经失效。还有一个细节ResizeBuffers之前所有与后备缓冲相关的状态都要解除绑定否则会返回D3D11_ERROR_INVALID_CALL这个问题在Debug Layer下面会打印得很清楚。5.2 休眠唤醒或显示驱动重置后画面冻结现象笔记本电脑合盖再打开界面卡在最后一帧点击没有任何反应。查看Present的返回值拿到DXGI_ERROR_DEVICE_REMOVED或DXGI_ERROR_DEVICE_RESET。原因GPU在休眠或驱动升级时被系统重置D3D设备和所有资源全部失效。这种情况不是代码bug做自绘GUI必须把它当成正常运行时路径来处理。解决检测到Present返回上述错误后把设备、交换链、纹理、SRV全部释放然后重新走一遍InitD3D重建控件树里所有的纹理资源。注意不能靠ResizeBuffers自救设备没了交换链也没了唯一正解是整体重建。用户机器上如果装过DirectX修复工具那是用来补系统运行库的解决不了GPU设备重置。发布时把Microsoft Visual C Redistributablex64一并打包是基本操作否则用户连程序都起不来根本到不了渲染这一步。5.3 文字边缘白边和模糊现象文字纹理贴在半透明按钮上周围有一圈白边或者小字发灰像蒙了一层雾。原因ClearType次像素渲染的RGB像素在有透明背景上无法正确混合。纹理边缘像素的颜色不是纯粹的不透明白色而是红绿蓝三个子像素各有偏色放到半透明画布上就露馅了。解决第一层防线是把文字绘制到不透明背景上用纯色背景一次性解决。第二层防线在需要透明浮层时把D2D的抗锯齿模式从默认的CLEARTYPE改成GRAYSCALErenderTarget-SetTextAntialiasMode(D2D1_TEXT_ANTIALIAS_MODE_GRAYSCALE);灰度抗锯齿不依赖子像素透明边缘只带alpha信息混出来就是干净的自然过渡。代价是笔画边缘比ClearType略粗对小字号中文影响不大因为中文笔画多而密灰度的稳健性反而更重要。如果发现文字变虚优先检查纹理的背景alpha值是不是0而不是盲目换字体。5.4 高DPI下鼠标点不准控件现象系统缩放设成150%后鼠标点按钮上沿按钮高亮区域却在下沿或者hover特效永远对不准。原因GetMessagePos和MAKEPOINTS拿到的是物理像素坐标而UI布局用的是逻辑坐标。如果进程没有声明DPI Aware系统会先把窗口按逻辑尺寸布局再整体放大到物理尺寸你的命中测试却拿着物理坐标跟逻辑坐标比当然偏。解决进程启动时声明PerMonitorV2。在Win10以上系统这是自绘GUI最划算的一次调用。SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);声明之后系统不再帮你做虚拟化缩放GetClientRect返回的是物理像素UI坐标需要自己换算。我通常把所有控件坐标保存在逻辑坐标下渲染时乘以某个DPI比例系数命中测试时把鼠标物理坐标除以同样的系数。窗口跨屏拖动时要注意DPI变化消息WM_DPICHANGED收到后要更新系数并重新计算layout否则拖到副屏会瞬间点不准。5.5 资源释放顺序不对导致退出崩溃现象程序退出时在Debug模式下报出一堆live object警告或者release完交换链后崩溃。原因D3D资源有明确的依赖关系。RTV引用后备缓冲纹理SRV引用纹理这些对象必须在父对象销毁前释放。如果先Release交换链再Release RTVRTV引用的后备缓冲已经不存在Debug Layer直接报错Release版本则可能产生访问冲突。解决按“先建后灭”的顺序释放。先释放所有SRV和纹理然后释放RTV再释放SwapChain最后释放Context和Device。// 释放顺序参考 for (auto item : g_fontCache) item.second.srv-Release(); g_fontCache.clear(); g_pRTV-Release(); g_pRTV nullptr; g_pSwapChain-Release(); g_pSwapChain nullptr; g_pd3dContext-Release(); g_pd3dContext nullptr; g_pd3dDevice-Release(); g_pd3dDevice nullptr;在实际工程里我建议用wil::com_ptr或ATL的CComPtr来管理这些接口让析构顺序由成员变量的声明顺序自动保证。手动写Release数量一多迟早有一条路径漏掉。Debug模式下D3D11_CREATE_DEVICE_DEBUG开起来退出时Output窗口会列出所有未释放的COM对象对照着改就是最直接的血泪经验。6. 进阶把自绘GUI变成能长期维护的控件框架6.1 用一份布局JSON描述控件树当控件树写到十几个节点时硬编码布局就开始让人烦躁。我一般把布局抽成JSON运行时装帧时解析并构建控件树调UI位置不用重新编译。{ widget: Panel, name: MainPanel, bounds: [0, 0, 800, 600], children: [ { widget: Button, name: BtnStart, bounds: [300, 200, 140, 36], text: Start, zOrder: 1 }, { widget: ProgressBar, name: ProgressDownload, bounds: [300, 260, 140, 12], min: 0, max: 100, zOrder: 1 } ] }布局配置文件不是万能的但它把“控件长什么样”和“控件做什么”分开。绘制样式由代码里的Shader和纹理决定位置尺寸由JSON决定C侧拿到JSON建树后只负责绑定事件回调。这招对中后期项目的维护效率提升最明显。6.2 渲染自检用Debug Layer和帧捕获验证你的帧写满几千行自绘代码后最怕的不是功能bug而是帧结构坏了但不报错画面看起来就是不对劲。两个工具要常用第一个是D3D Debug Layer设备创建时加D3D11_CREATE_DEVICE_DEBUG输出窗口会打印资源泄漏、状态绑定错误和无效参数第二个是RenderDoc逐帧查看DrawCall、顶点输入和后备缓冲内容。我习惯在每个版本保留一个隐藏的“渲染自检模式”按F12输出当前帧的DrawCall数量和总顶点数。自绘GUI有几十个控件很正常DrawCall通常在10到20之间所有控件共享同一个纹理图集、同一个顶点缓冲数量异常增长时优先查是不是忘记合并批次、每个控件单独调了一次Draw。这种优化不追求极限性能纯粹是让每一帧保持可预测、可诊断。GUI是桌面软件里最容易被低估的部分Visual C加DirectX这条路弯道多但走通了就很顺手。做自绘最怕两只脚陷入框架坑里我希望这套从设备初始化到文字纹理的路径能让你少绕一次弯。保持控件的“外部事件由消息驱动、内部绘制由GPU完成、布局数据可配置”这个节奏界面工程就不会变成玄学。希望帮到你。本文还有配套的精品资源点击获取