litegraph.js
JavaScript中的一个库在浏览器中创建图形，类似于虚幻蓝图。节点可以轻松编程，其中包括一个编辑器来构建和测试图形。
它可以轻松地集成到任何现有的Web应用程序中，并且可以在无需编辑器的情况下运行图形。
在演示网站上尝试。
特征
- 在canvas2d上的渲染（缩放进出和平移，易于渲染复杂的接口，可以在WebGlTexture中使用）
- 易于使用的编辑器（搜索框，键盘快捷键，多个选择，上下文菜单，…）
- 优化以支持每个图的数百个节点（在编辑器上也是执行）
- 可自定义的主题（颜色，形状，背景）
- 为个性化每个动作/绘图/节点事件的回调
- 子图（包含图本身的节点）
- 实时模式系统（隐藏图形，但调用节点以渲染他们想要的任何东西，可用于创建UIS）
- 可以在nodejs中执行图形
- 高度可自定义的节点（颜色，形状，槽垂直或水平，小部件，自定义渲染）
- 易于集成在任何JS应用程序中（一个单个文件，无依赖关系）
- 打字稿支持
提供节点
尽管很容易创建新的节点类型，但LiteGraph带有一些默认节点，这些节点在许多情况下可能很有用：
- 接口（小部件）
- 数学（三角学，数学操作）
- 音频（Audioapi和Midi）
- 3D图形（WebGL中的处理）
- 输入（读取游戏板）
安装
您可以使用NPM安装它
npm install litegraph.js
或从此存储库下载build/ litegraph.js和css/ litegraph.css版本。
第一个项目
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>\”>
< 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 >
如何编码新节点类型
这是如何构建一个总和两个输入的节点的示例：
//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\" ) ;
服务器端
尽管某些节点在服务器（音频，图形，输入等）中不起作用，但它还使用nodejs工作服务器端。
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()\”>
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 ( )
使用它的项目
comfyui
webglstudio.org
莫伊大象
mynodes
UTILS
它在UTILS文件夹中包含几个命令，以生成DOC，检查错误并构建缩小版本。
演示
该演示包括一些图形示例。为了尝试它们，您可以访问演示站点或在本地计算机上安装它，以便您需要Git，Node和NPM。考虑到这些依赖项已安装，请运行以下命令以尝试：
litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80!\”>
$ git clone https://gith*u*b.*com/jagenjo/litegraph\\.js.git $ cd litegraph.js $ npm install $ node utils/server.js Example app listening on port 80 !
打开浏览器，并将其指向http：// localhost：8000/。您可以从页面顶部的下拉列表中选择一个演示。
反馈
您可以将任何反馈写给javi.agenjo@gmail.com
贡献者
- 阿特拉桑
- 克里夫
- Rappestad
- Inventivetalentdev
- Natescarlet
- CodeRofSalvation
- 伊利布斯克
- 高斯
