Litegraph.js 使用教程
项目介绍
Litegraph.js 是一个用于在网页上创建模块化图形的库,类似于 PureData。这些图形可以用于创建工作流、图像处理、音频处理或任何类型的模块交互网络。主要特性包括:
- 自动根据基本规则对模块进行排序
- 动态数量的输入/输出端口
- 图形的持久化,可以序列化为 JSON
- 在 HTML5 Canvas 上的优化渲染(支持屏幕上显示数百个模块)
- 允许在没有 Canvas 的情况下运行图形(独立模式)
- 简单的 API,易于创建新模块
- 编辑和实时模式(在实时模式下,只有带有小部件的模块被渲染)
- 编辑器中的上下文菜单
项目快速启动
要快速启动 Litegraph.js,首先需要安装库。可以通过 npm 安装,或者直接下载构建版本。
安装
npm install litegraph.js
基本示例
以下是一个简单的 HTML 示例,展示如何创建和运行一个基本的图形。
<!DOCTYPE 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>
应用案例和最佳实践
Litegraph.js 可以用于多种场景,包括但不限于:
- 界面设计:使用小部件创建交互式界面
- 数学运算:进行各种数学操作,如三角函数
- 音频处理:利用 AudioAPI 和 MIDI 进行音频处理
- 3D 图形:在 WebGL 中进行后期处理
- 输入处理:读取游戏手柄输入
最佳实践
- 在创建复杂图形时,使用模块化和可重用的节点
- 利用图形的持久化功能,保存和加载图形状态
- 在实时模式下,只渲染必要的小部件,以提高性能
典型生态项目
Litegraph.js 可以与其他项目结合使用,扩展其功能。以下是一些典型的生态项目:
- ComfyUI:一个使用 Litegraph.js 构建的用户界面框架
- WebGLStudio.org:一个在线的 3D 图形编辑器,使用 Litegraph.js 进行后期处理
- MOI Elephant:一个基于 Litegraph.js 的节点编辑器,用于创建复杂的图形和流程
通过这些项目,Litegraph.js 展示了其在不同领域的强大功能和灵活性。