ImGui节点编辑器使用指南

最新推荐文章于 2025-04-16 16:16:47 发布

卢颜娜

最新推荐文章于 2025-04-16 16:16:47 发布

阅读量548

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00010/article/details/141078883

ImGui节点编辑器使用指南

imgui-node-editorNode Editor built using Dear ImGui项目地址:https://gitcode.com/gh_mirrors/im/imgui-node-editor

一、项目简介

ImGui节点编辑器是基于Dear ImGui图形库构建的一个高级工具包，专为游戏开发和其他复杂UI解决方案而设计。此编辑器的核心理念是“绘制你的内容，我们处理剩下的”，这意味着它负责交互处理（如节点放置、拖动、缩放和平移），而由用户来管理内容渲染。

关键功能包括：

内置的节点移动和选择支持。
可完全定制的节点和引脚内容。
一个灵活且风格统一的主题，模仿UE4蓝图样式。
链接自定义，基于贝塞尔曲线实现平滑过渡。
自动突出显示节点、引脚和连接线。
流畅的导航和平滑的缩放效果。
支持保存节点状态至用户上下文以保持布局完整。
提供选区矩形、群组拖动以及上下文菜单等高级操作。
基本快捷键支持，包括复制、粘贴、剪切和删除等功能。

该项目已成功应用于Spark CE引擎中的蓝图编辑器中，并正逐渐从原型阶段转向稳定版本。

二、项目快速启动

为了便于开发者上手并快速体验ImGui节点编辑器的功能，以下提供了一个简单的代码示例，展示如何在你的应用程序中集成并运行基本的节点编辑器。

首先确保你已经安装了ImGui及所需的C++14环境。然后参考如下步骤配置和运行编辑器：

#include <imgui.h>
#include <imgui_node_editor.h>
#include <application.h>

namespace ed = ax::NodeEditor;

struct Example: public Application {
    using Application::Application;
    
    void OnStart() override {
        ed::Config config;
        config.SettingsFile = "Simple.json";
        m_Context = ed::CreateEditor(&config);
    }
    
    void OnStop() override {
        ed::DestroyEditor(m_Context);
    }
    
    void OnFrame(float deltaTime) override {
        auto& io = ImGui::GetIO();
        ImGui::Text("FPS: %.2f (%.2gms)", io.Framerate, 1000.0f / io.Framerate);
        ImGui::Separator();

        ed::SetCurrentEditor(m_Context);

        ed::Begin("My Editor", ImVec2(0, 0));
        
        // 开始绘图节点
        int uniqueId = 1;
        ed::BeginNode(uniqueId++);
        ImGui::Text("Node A");
        ed::BeginPin(uniqueId++, ed::PinKind::Input);
        ImGui::Text("-> Input");
        ed::EndPin();
        ImGui::SameLine();
        ed::BeginPin(uniqueId++, ed::PinKind::Output);
        ImGui::Text("Output ->");
        ed::EndPin();
        ed::EndNode();
        
        ed::End();
        ed::SetCurrentEditor(nullptr);
        
        //Optional: 显示性能窗口
        //ImGui::ShowMetricsWindow();
    }
    
private:
    ed::EditorContext* m_Context = nullptr;
};

int main(int argc, char** argv)
{
    Example app(argc, argv);
    if(app.Create())
        return app.Run();
    return 0;
}

确保在适当的位置调用了OnStart() 和 OnStop() 方法进行初始化和清理工作。上述代码将创建一个带有单个节点的基本编辑器实例。