Litegraph.js节点图引擎

Litegraph.js是一个 Javascript 节点图引擎库，可以实现类似虚幻引擎的蓝图编程，包括一个编辑器来构建和测试节点图，支持浏览器和Node.js，可以轻松集成到任何现有的 Web 应用程序中，并且无需编辑器即可运行节点图。

1、Litegraph.js演示

演示包括一些litegraph.js节点图示例。为了尝试它们，可以访问演示站点或将其安装在本地计算机上，为此需要先安装git、node 和 npm，然后运行以下命令进行尝试：

$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80!

打开浏览器并将其指向 http://localhost:8000/ ，就可以从页面顶部的下拉列表中选择一个演示。

2、Litegraph.js主要特性

在Canvas2D上渲染。放大/缩小和平移，易于渲染复杂界面，可在WebGLTexture内部使用
易于使用的编辑器。搜索框、键盘快捷键、多项选择、上下文菜单...
优化以支持每个节点图数百个节点。在编辑器上以及在执行时
可定制的主题。颜色、形状、背景
用于个性化节点的每个动作/绘图/事件的回调
支持子图，包含图本身的节点
实时模式系统。隐藏节点图，但调用节点来渲染它们想要的任何内容，对于创建 UI 很有用
节点图可以在 NodeJS 中执行
高度可定制的节点。颜色、形状、垂直或水平插槽、小部件、自定义渲染
易于集成到任何 JS 应用程序中。单个文件，无依赖项
支持TypeScript

3、Litegraph.js提供的节点

尽管创建新的节点类型很容易，但 LiteGraph 附带了一些在许多情况下可能有用的默认节点：

界面（小部件）
数学（三角学、数学运算）
音频（AudioAPI 和 MIDI）
3D 图形（WebGL 中的后处理）
输入（读取游戏手柄）

4、Litegraph.js快速上手

可以使用 npm 安装：

npm install litegraph.js

或者从此存储库下载 build/litegraph.js 和 css/litegraph.css 版本。

下面的代码就是litegraph.js版的hello world：

<html>
<head>
	<link rel="stylesheet" type="text/css" href="litegraph.css">
	<script type="text/javascript" src="litegraph.js"></script>
</head>
<body style='width:100%; height:100%'>
<canvas id='mycanvas' width='1024' height='720' style='border: 1px solid'></canvas>
<script>
var graph = new LGraph();

var canvas = new LGraphCanvas("#mycanvas", graph);

var node_const = LiteGraph.createNode("basic/const");
node_const.pos = [200,200];
graph.add(node_const);
node_const.setValue(4.5);

var node_watch = LiteGraph.createNode("basic/watch");
node_watch.pos = [700,200];
graph.add(node_watch);

node_const.connect(0, node_watch, 0 );

graph.start()
</script>
</body>
</html>

5、创建自定义litegraph.js节点

非常简单！定义一个类，实现约定的接口，然后用 registerNodeType 方法注册节点即可！

以下是如何构建对两个输入求和的节点的示例：

//node constructor class
function MyAddNode()
{
  this.addInput("A","number");
  this.addInput("B","number");
  this.addOutput("A+B","number");
  this.properties = { precision: 1 };
}

//name to show
MyAddNode.title = "Sum";

//function to call when the node is executed
MyAddNode.prototype.onExecute = function()
{
  var A = this.getInputData(0);
  if( A === undefined )
    A = 0;
  var B = this.getInputData(1);
  if( B === undefined )
    B = 0;
  this.setOutputData( 0, A + B );
}

//register in the system
LiteGraph.registerNodeType("basic/sum", MyAddNode );

或者你也可以使用 wrapFunctionAsNode包装已有的函数：

function sum(a,b)
{
   return a+b;
}

LiteGraph.wrapFunctionAsNode("math/sum",sum, ["Number","Number"],"Number");

6、在服务端使用litegraph.js

Litegraph.js也可以使用 NodeJS 在服务器端工作，尽管某些节点不能在服务器中工作（音频、图形、输入等）。

var LiteGraph = require("./litegraph.js").LiteGraph;

var graph = new LiteGraph.LGraph();

var node_time = LiteGraph.createNode("basic/time");
graph.add(node_time);

var node_console = LiteGraph.createNode("basic/console");
node_console.mode = LiteGraph.ALWAYS;
graph.add(node_console);

node_time.connect( 0, node_console, 1 );

graph.start()

原文链接：A graph node engine and editor in JavaScript

BimAnt翻译整理，转载请标明出处