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.jscss/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翻译整理,转载请标明出处