Vue + litegraph.js 实现蓝图功能

Vue3 + litegraph.js 实现蓝图功能

litegraph.js

1.         [github](https://github.com/jagenjo/litegraph.js)  
2.         [demo](https://tamats.com/projects/litegraph/editor/)

复制代码

vue - html

1.     <canvas id="mycanvas" width="1524" height="720" style="border: 1px solid" ></canvas>

复制代码

vue - ts

1. import {LGraph, LGraphCanvas, LiteGraph} from "litegraph.js";
2. import "litegraph.js/css/litegraph.css"
4. onMounted(()=>{
5.         initGraph();
6. })
8. const initGraph = ()=>{
9.         graph = new LGraph();
10.         var canvas = new LGraphCanvas('#mycanvas', graph)
11. }
13. //导入json文件
14. //graph.load(文件地址）；
16. //导入json数据
17. graph.configure(json)

复制代码

获取画布数据

1. graph.serialize()

复制代码

json分析

1. {
2.         "last_node_id": 2, //必填，最后一个节点的id
3.         "last_link_id": 4, //必填，最后一根连线的id
4.         "nodes": [
5.             {
6.                 "id": 2,
7.                 "type": "event/explode",
8.                 "pos": [
9.                     847,
10.                     479
11.                 ],
12.                 "size": {
13.                     "0": 200,
14.                     "1": 150
15.                 },
16.                 "flags": {
17.                     "horizontal": true
18.                 },
19.                 "order": 1,
20.                 "mode": 2,
21.                 "inputs": [
22.                     {
23.                         "name": "ABB结构",
24.                         "links": null,
25.                         "link": 4
26.                     }
27.                 ],
28.                 "outputs": [],
29.                 "title": "事件-爆炸图",
30.                 "properties": {}
31.             },
32.             {
33.                 "id": 1,
34.                 "type": "button",
35.                 "pos": [
36.                     100,
37.                     100
38.                 ],
39.                 "size": {
40.                     "0": 130,
41.                     "1": 60
42.                 },
43.                 "flags": {
44.                     "horizontal": true
45.                 },
46.                 "order": 0,
47.                 "mode": 0,
48.                 "inputs": [],
49.                 "outputs": [
50.                     {
51.                         "name": "点击",
52.                         "type": "number",
53.                         "links": [
54.                             2,
55.                             3,
56.                             4
57.                         ],
58.                         "slot_index": 0
59.                     },
60.                     {
61.                         "name": "双击",
62.                         "type": "number",
63.                         "links": null
64.                     }
65.                 ],
66.                 "title": "按钮",
67.                 "properties": {}
68.             }
69.         ],
70.         "links": [
71.             [
72.                 4, //连线id
73.                 1, //origin_id                 源头节点id
74.                 0, //origin_slot         源头-出口序号
75.                 2, //target-id                 目标节点id
76.                 0, //target_slot         目标-入口序号
77.                 "number" //type
78.             ]
79.         ],
80.         "groups": [],
81.         "config": {},
82.         "extra": {},
83.         "version": 0.4
84.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。