Node Editor in ImGui 技术文档-优快云博客

Node Editor in ImGui 技术文档

【免费下载链接】imgui-node-editor Node Editor built using Dear ImGui 项目地址: https://gitcode.com/gh_mirrors/im/imgui-node-editor

安装指南

基础环境需求

Vanilla ImGui 1.72+
C++14编译器

依赖项

对于示例代码的构建，需要确保以下额外依赖项：

使用位于feature/layout分支下的ImGui布局（仅限蓝图示例）。
如需扩展功能，可以合并来自feature/extra-keys分支的代码以支持额外的快捷键。

构建与安装步骤

获取源码: 将本项目的源代码复制到您的项目中，与ImGui库一同使用。
集成ImGui: 确保您的项目已经正确集成了ImGui 1.72以上版本。
添加Node Editor: 直接将imgui_node_editor.h等头文件以及相关源文件复制至您的工程路径下。

示例项目的构建（可选）

对于Windows, 使用CMake命令行：

cmake -S examples -B build -G "Visual Studio 15 2017 Win64"
或
cmake -S examples -B build -G "Visual Studio 16 2019" -A x64

在macOS上:
```
cmake -S examples -B build -G "Xcode"
```
Linux系统:
```
cmake -S examples -B build -G "Unix Makefiles"
```
构建后，执行文件会位于build/bin目录下。

项目的使用说明

快速入门

基础的节点编辑器工作流程始于导入必要的头文件，并创建编辑器上下文。下面是一个最小化的工作示例：

#include <imgui.h>
#include <imgui_node_editor.h>
#include <application.h> // 假定这是您定义应用启动逻辑的类库

namespace ed = ax::NodeEditor;

class Example : public Application {
public:
    explicit Example(const std::string& name, int argc, char** argv)
        : Application(name, argc, argv) {}

    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 {
        ImGui::Text("FPS: %.2f", ImGui::GetIO().Framerate);
        ImGui::Separator();

        ed::SetCurrentEditor(m_Context);
        ed::Begin("My Editor", ImVec2(0, 0));
        static 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);
    }

private:
    ed::EditorContext* m_Context = nullptr;
};

// 在主函数中启动Example应用实例
int main(int argc, char** argv) {
    Example app("Simple Example", argc, argv);
    if (app.Create()) {
        app.Run();
        return 0;
    }
    return 1;
}

这个示例展示了一个基本的节点，包含输入和输出引脚，以及如何在每一帧更新时绘制编辑器。

自定义节点与API使用

编辑器设计为高度可定制，允许用户自定义节点的外观和交互逻辑。通过继承和调用ed::命名空间内的API，开发者可以控制节点的内容显示、链接的样式、以及响应各种编辑事件（如创建、删除节点）。

项目API使用文档简述

Node Editor的API强大而灵活，主要包括但不限于：

节点和引脚管理：使用ed::BeginNode, ed::EndNode, ed::BeginPin, 和 ed::EndPin等函数来定义节点及其连接点。
上下文操作：通过ed::CreateEditor, ed::DestroyEditor, ed::SetCurrentEditor来管理编辑器状态。
编辑交互：监听并处理节点选择、拖动、链接创建等事件，通常涉及注册回调。
保存与加载布局：利用配置文件(config.SettingsFile)来持久化编辑的节点布局。

详细API使用方法和高级特性请参考项目中的示例代码和官方文档。

结论

Node Editor for ImGui提供了一套直观且强大的工具包，适合开发复杂的图形界面，如蓝图编辑器。其简洁的API和与ImGui的高度兼容性，使得集成与扩展变得非常便捷。遵循上述指导，您应能快速地在项目中引入并利用该编辑器的强大功能。记得深入了解各API细节，以充分利用它的全部潜力。

【免费下载链接】imgui-node-editor Node Editor built using Dear ImGui 项目地址: https://gitcode.com/gh_mirrors/im/imgui-node-editor

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考