litegraph.js是一款图形节点引擎和工作流编辑器插件

litegraph.js是一款图形节点引擎和工作流编辑器插件

litegraph.js一个Javascript库,用于在浏览器中创建类似于虚幻蓝图的图形。节点可以很容易地编程,它包括一个编辑器来构造和测试图形。

它可以很容易地集成到任何现有的web应用程序中,并且可以在不需要编辑器的情况下运行图形。
特点:
在Canvas2D上渲染(放大/缩小和平移,易于渲染复杂的界面,可在WebGLTexture中使用)
易于使用的编辑器(搜索框、键盘快捷键、多选、上下文菜单…)
优化为支持每个图形数百个节点(在编辑器上,也在执行时)
可自定义主题(颜色、形状、背景)
回调以个性化节点的每个操作/绘图/事件
子图(包含图本身的节点)
实时模式系统(隐藏图形,但调用节点渲染它们想要的任何内容,这对创建ui很有用)
图可以在NodeJS中执行
高度可定制的节点(颜色、形状、垂直或水平的插槽、小部件、自定义渲染)
易于集成在任何JS应用程序中(一个文件,无依赖关系)
Typescript support
Nodes provided
虽然创建新的节点类型很容易,但LiteGraph附带了一些默认节点,这些节点在许多情况下都很有用:

Interface (Widgets)

数学(三角学,数学运算)

音频(AudioAPI和MIDI)

三维图形(WebGL中的后处理)

输入(读取游戏板)

使用方式:

你可以用npm安装它

npm install litegraph.js

也可以通过cdn直接引入

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/litegraph.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/litegraph.js"></script>

实例代码

<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/litegraph.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/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);


        //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);

        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 = [200, 300];
        graph.add(node_watch);

        var node_add = LiteGraph.createNode("basic/sum");
        node_add.pos = [200, 400];
        graph.add(node_add);

        node_add.connect(0, node_watch, 0);
        node_const.connect(0, node_add, 0);
        node_const.connect(0, node_add, 1);
        // node_const.connect(0, node_watch, 0);

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


如何编码新的节点类型?

以下是如何构建两个输入相加的节点的示例:

//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 );


也可以包装现有函数:

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

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


Server side


它也可以使用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()

github地址https://github.com/jagenjo/litegraph.js
立即下载litegraph.js查看所有js插件

网友评论0

程序员在线工具箱