ImGui Node Editor 使用教程

ImGui Node Editor 使用教程

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

1. 项目的目录结构及介绍

ImGui Node Editor 是一个基于 ImGui 的节点编辑器实现，其项目结构如下：

imgui-node-editor/
├── examples/
│   ├── simple-example.cpp
│   ├── blueprints-example.cpp
│   └── ...
├── imgui_node_editor.h
├── imgui_node_editor.cpp
├── README.md
├── LICENSE
└── ...

主要目录和文件介绍：

• examples/: 包含多个示例文件，如 simple-example.cpp 和 blueprints-example.cpp，展示了如何使用节点编辑器。
• imgui_node_editor.h: 节点编辑器的主要头文件。
• imgui_node_editor.cpp: 节点编辑器的实现文件。
• README.md: 项目说明文档。
• LICENSE: 项目许可证文件。

2. 项目的启动文件介绍

项目的启动文件通常位于 examples/ 目录下，例如 simple-example.cpp。以下是 simple-example.cpp 的简要介绍：

#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, io.Framerate / 1000.0f);
        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("-> In");
        ed::EndPin();
        ImGui::SameLine();
        ed::BeginPin(uniqueId++, ed::PinKind::Output);
        ImGui::Text("Out ->");
        ed::EndPin();
        ed::EndNode();
        ed::End();

        ed::SetCurrentEditor(nullptr);
    }

    ed::EditorContext* m_Context = nullptr;
};

int Main(int argc, char** argv) {
    Example example("Simple", argc, argv);
    if (example.Create())
        return example.Run();
    return 0;
}

主要功能：

• OnStart(): 初始化节点编辑器。
• OnStop(): 销毁节点编辑器。
• OnFrame(): 每一帧的渲染逻辑，包括节点的绘制和交互。

3. 项目的配置文件介绍

节点编辑器的配置文件通常在 OnStart() 方法中设置，例如：

void OnStart() override {
    ed::Config config;
    config.SettingsFile = "Simple.json";
    m_Context = ed::CreateEditor(&config);
}

配置项：

• SettingsFile: 配置文件的路径，用于保存和加载节点编辑器的状态。

通过这些配置，可以自定义节点编辑器的行为和外观。

---

以上是 ImGui Node Editor 的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用该项目。

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