当前位置：首页 > news >正文

Milton与ImGui集成：现代UI设计在绘画软件中的应用

news 2026/5/22 10:03:50

Milton与ImGui集成：现代UI设计在绘画软件中的应用

【免费下载链接】miltonAn infinite-canvas paint program项目地址: https://gitcode.com/gh_mirrors/mi/milton

Milton作为一款无限画布绘画程序（An infinite-canvas paint program），其流畅的用户体验很大程度上归功于与ImGui的深度集成。ImGui作为一款强大的即时模式GUI库，为Milton提供了直观、高效的用户界面，让绘画创作过程更加流畅自然。

ImGui在Milton中的核心应用场景 🎨

ImGui在Milton中扮演着至关重要的角色，主要体现在以下几个关键模块：

1. 图层管理系统

Milton的图层管理窗口通过ImGui实现了直观的图层操作界面。用户可以轻松创建、删除、重命名图层，调整图层顺序和透明度，以及添加特效如模糊效果。

// 图层管理窗口实现 void gui_layer_window(MiltonInput* input, PlatformState* platform, Milton* milton, f32 brush_window_height, PlatformSettings* prefs, b32 reset_gui) { // 窗口定位与大小设置 // ... if (ImGui::Begin(loc(TXT_layers))) { // 图层列表渲染 // ... while (layer) { bool v = layer->flags & LayerFlags_VISIBLE; ImGui::PushID(layer->id); if (ImGui::Checkbox("##select", &v)) { layer::layer_toggle_visibility(layer); input->flags |= (i32)MiltonInputFlags_FULL_REFRESH; } // ... layer = layer->prev; } // ... } ImGui::End(); }

2. 画笔设置面板

画笔设置面板是Milton的核心功能之一，通过ImGui的滑块、按钮等控件，用户可以方便地调整画笔大小、不透明度、硬度等参数，并在不同绘画模式间快速切换。

// 画笔窗口实现 i32 gui_brush_window(MiltonInput* input, PlatformState* platform, Milton* milton, PlatformSettings* prefs, b32 reset_gui) { // ... if (ImGui::Begin(loc(TXT_brushes), NULL, imgui_window_flags)) { // 不透明度控制 float mut_alpha = pen_alpha*100; ImGui::SliderFloat(loc(TXT_opacity), &mut_alpha, 1, 100, "%.0f%%"); // 画笔大小控制 ImGui::SliderInt(loc(TXT_brush_size), &mut_size, 1, MILTON_MAX_BRUSH_SIZE); // 绘画模式切换按钮 if (ImGui::Button(loc(TXT_switch_to_primitive_line))) { input->mode_to_set = MiltonMode::PRIMITIVE_LINE; } // ... } ImGui::End(); // ... }

3. 菜单系统与快捷键设置

Milton的主菜单系统完全基于ImGui构建，包括文件操作、编辑功能、画布设置、工具选择和帮助等模块。用户还可以通过设置窗口自定义快捷键，提升操作效率。

// 菜单系统实现 void gui_menu(MiltonInput* input, PlatformState* platform, Milton* milton, b32& show_settings, b32* reset_gui) { if (ImGui::BeginMainMenuBar()) { if (ImGui::BeginMenu(loc(TXT_file))) { if (ImGui::MenuItem(loc(TXT_new_milton_canvas))) { // 新建画布逻辑 // ... } // ... ImGui::EndMenu(); } // 其他菜单项 // ... ImGui::EndMainMenuBar(); } }

ImGui集成的技术细节 🔧

Milton通过third_party/imgui/目录下的文件实现了与ImGui的集成，主要包括以下几个方面：

1. 渲染后端集成

Milton使用imgui_impl_opengl3.cpp和imgui_impl_sdl.cpp实现了ImGui与OpenGL和SDL的集成，确保UI能够高效渲染并响应用户输入。

2. 自定义样式

Milton对ImGui的默认样式进行了自定义，以匹配软件的整体视觉风格。通过调整颜色、字体大小等参数，使UI更加美观且符合绘画软件的使用场景。

// ImGui样式自定义 void milton_imgui_tick(...) { // 颜色样式设置 static auto color_window_background = ImVec4{.929f, .949f, .957f, 1}; static auto color_buttons = ImVec4{.686f, .796f, 1.0f, 1}; // ... // 应用样式 ImGui::PushStyleColor(ImGuiCol_WindowBg, color_window_background); ImGui::PushStyleColor(ImGuiCol_Button, color_buttons); // ... }