litegraph.js - 轻量级图形编辑库

最新推荐文章于 2024-08-09 07:20:52 发布

蒋素萍Marilyn

最新推荐文章于 2024-08-09 07:20:52 发布

阅读量740

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00072/article/details/138650679

版权

litegraph.js - 轻量级图形编辑库

litegraph.jsA graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently.项目地址:https://gitcode.com/gh_mirrors/li/litegraph.js

在浏览器中构建类似Unreal Blueprints的图形界面从未如此简单。litegraph.js是一个JavaScript库，允许您轻松编程节点并提供一个用于构造和测试图的编辑器。无论是集成到现有Web应用还是单独运行图形，它都能胜任。

尝试在线演示

功能概述

在Canvas2D上渲染（支持缩放和平移，可绘制复杂接口，可用于WebGL纹理）
用户友好的编辑器（搜索框、键盘快捷键、多选、右键菜单等）
优化以支持每个图表数百个节点（在编辑器和执行时）
可自定义的主题（颜色、形状、背景）
回调以个性化每个节点的动作、绘图和事件
子图表（包含自身图表的节点）
实时模式系统（隐藏图表但调用节点进行渲染，适用于创建UI）
图表可以在NodeJS中执行
高度定制的节点（颜色、形状、垂直或水平槽口、小部件、自定义渲染）
易于整合到任何JS应用（单文件，无依赖）
TypeScript支持

内置节点类型

尽管创建新节点类型很容易，但litegraph.js自带一些默认节点，可用于多种场景：

接口（Widgets）
数学（三角函数、数学运算）
音频（AudioAPI和MIDI）
3D图形（WebGL后处理）
输入（读取游戏手柄）

安装与第一个项目

通过npm安装：

npm install litegraph.js

或者直接从仓库下载build/litegraph.js和css/litegraph.css。

以下是一个简单的HTML示例，展示如何创建并运行一个litegraph.js图表：

<!DOCTYPE html>
<html lang="zh">
<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);
  // ...
  graph.start()
</script>
</body>
</html>

创建自己的节点类型

下面是如何创建一个可以相加两个输入值的新节点的例子：

function MyAddNode() {
  this.addInput("A","number");
  this.addInput("B","number");
  this.addOutput("A+B","number");
  this.properties = { precision: 1 };
}

MyAddNode.title = "Sum";

MyAddNode.prototype.onExecute = function() {
  var A = this.getInputData(0);
  var B = this.getInputData(1);
  this.setOutputData(0, A + B);
}

LiteGraph.registerNodeType("basic/sum", MyAddNode );

或包裹现有的函数：

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

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

服务器端使用

litegraph.js同样可以在NodeJS服务器端运行，不过某些与音频、图形、输入相关的节点在服务器端可能无法工作：

var LiteGraph = require("./litegraph.js").LiteGraph;

var graph = new LiteGraph.LGraph();

// ...

应用案例

工具和示例

包括用于生成文档、检查错误以及构建压缩版本的实用工具。要尝试示例，请按照以下步骤操作：

$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js

然后在浏览器中访问http://localhost:8000/。

反馈与贡献者

有任何反馈，欢迎发送邮件至javi.agenjo@gmail.com。

感谢以下贡献者：

atlasan
kriffe
rappestad
InventivetalentDev
NateScarlet
coderofsalvation
ilyabesk
gausszhou

加入这个强大的社区，一起构建更优秀的可视化解决方案！

蒋素萍Marilyn

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫