litegraph.js

其他资源 • 2025-08-05

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"> ">
 < 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
  • 伊利布斯克
  • 高斯
下载源码

通过命令行克隆项目:

git clone https://github.com/jagenjo/litegraph.js.git

相关文章

jspaint

2025-08-05

winmerge

2025-08-05

oni2

2025-08-05

dillinger

2025-08-05

推荐阅读

向上：银河游戏免安装正式版

2026-01-23

风暴驭使正式中文版

2026-01-23

冥河：贪婪之刃中文试玩版

2026-01-23

超级键盘侠免安装绿色中文版

2026-01-23