【国产开源可视化引擎Meta2d.js】快速上手

提示

初始化引擎后，会生成一个 meta2d 全局对象，可直接使用。

调用meta2d前，需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css（特别是css动画）没有初始化完成，可能会报错（宽度为0）或影响显示。

划重点

所有js 语法均可打开 2D可视化编辑器，在浏览器控制台直接运行查看效果

如何学习

跟着“快速上手”文档做一遍，先有个总体认知
看一遍我们的视频教程，有个全面认识
多学习示例教程等

官方示例：https://github.com/le5le-com/meta2d.js/tree/main/examples

meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。 - Gitee.com

多找网上示例。找不到？你也可以多写学习心得，和大家一起交流学习。

多查阅Meta2d.js API
加入乐吾乐可视化交流群：

微信号：le5le-service，备注进交流群

在浏览器中体验

打开乐吾乐2D可视化编辑器
F12打开浏览器控制台
在控制台输入

// 定义一个pen，矩形
const pen = {
  name: "rectangle",
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
};

meta2d.addPen(pen);

Copy

在 ES5 中使用

获取 meta2d.js

npm install meta2d.js --save

拷贝 node_modules/meta2d.js/meta2d.js 到静态资源目录。比例 index.html 所在目录
编写 index.html

<!DOCTYPE html> 
<html>   
  <head>
    <title i18n>乐吾乐 Meta2d</title>
    <meta charset="UTF-8" /> 
  </head>  
  <body>    
    <div id="meta2d" style="height:100vh;width:100vw;"></div> 
    <script src="meta2d.js"></script>
    <script src="index.js"></script>  
  </body>
</html>

Copy

编写 index.js 加载 meta2d.js

var meta2d = new Meta2d("meta2d"); 
registerCommonDiagram(); //注册图形库 
// Get the json data 
// ... 
// Open the json 
meta2d.open(json);

Copy

参考例子： https://github.com/le5le-com/meta2d.js/tree/master/examples/es5

在 Vue3 中使用

获取 @meta2d/core 等库

npm install @meta2d/core --save 
// Option 
npm install @meta2d/activity-diagram --save 
npm install @meta2d/chart-diagram --save 
npm install @meta2d/class-diagram --save 
npm install @meta2d/flow-diagram --save 
npm install @meta2d/fta-diagram --save 
npm install @meta2d/form-diagram --save 
npm install @meta2d/sequence-diagram --save 
npm install @meta2d/le5le-charts --save 
npm install @meta2d/svg --save

编写 Vue

<template>   
  <div class="main">     
    <div id="meta2d"></div>  
  </div> 
</template>

Copy

编写 js 加载 meta2d

import {         Options,         Meta2d     } from '@meta2d/core'; 
import {     flowPens } from '@meta2d/flow-diagram'; 
import {     activityDiagram } from '@meta2d/activity-diagram'; 
import {     classPens } from '@meta2d/class-diagram'; 
import {     sequencePens,     sequencePensbyCtx } from '@meta2d/sequence-diagram'; 
import {     defineComponent,     onMounted,     onUnmounted,     ref } from 'vue'; 
import { formPens } from '@meta2d/form-diagram'; 

declare const window: any; 
declare const meta2d: Meta2d; 
export default defineComponent({     
  name: 'Meta2dCanvas',     
  components: {},     
  setup() {         
    const meta2dOptions: Options = {};  
    onMounted(() => {        
      new Meta2d('meta2d', meta2dOptions);   
      meta2d.register(flowPens());    
      meta2d.register(activityDiagram());  
      meta2d.register(classPens());    
      meta2d.register(sequencePens()); 
      meta2d.registerCanvasDraw(sequencePensbyCtx());    
      meta2d.registerCanvasDraw(formPens());            
      // 监听消息事件       
      meta2d.on('contextmenu', contextmenu);      
      meta2d.on('click', click);            
      // 打开文件            
      meta2d.open(json);       
    });     
    onUnmounted(() => {    
      if (meta2d) {      
        meta2d.off('contextmenu', contextmenu);      
        meta2d.off('click', click);      
        meta2d.destroy();          
      }       
    });        
    const contextMenuVisible = ref(false);   
    function contextmenu() {    
      contextMenuVisible.value = true;       
    }        
    function click() {      
      contextMenuVisible.value = false;   
    }        
    return {        
      contextMenuVisible,    
    };    
  },
});

Copy

一个快速上手学习的示例

https://github.com/le5le-com/meta2d.js/tree/main/examples/diagram-editor-vue3

在 React 中使用

获取 @meta2d/core 等库

npm install @meta2d/core --save 
// Option 
npm install @meta2d/activity-diagram --save 
npm install @meta2d/chart-diagram --save 
npm install @meta2d/class-diagram --save 
npm install @meta2d/flow-diagram --save 
npm install @meta2d/fta-diagram --save 
npm install @meta2d/form-diagram --save 
npm install @meta2d/sequence-diagram --save 
npm install @meta2d/le5le-charts --save 
npm install @meta2d/svg --save

编写 React jsx

import React, { useEffect } from "react"; 
import { Options, Meta2d } from "@meta2d/core"; 
import { flowPens } from "@meta2d/flow-diagram"; 
import { activityDiagram } from "@meta2d/activity-diagram"; 
import { classPens } from "@meta2d/class-diagram"; 
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram"; 
import { formPens } from "@meta2d/form-diagram"; 
const Meta2dContainer = () => {  
  useEffect(() => {    
    window.meta2d = new Meta2d("meta2d");   
    meta2d.register(flowPens());   
    meta2d.register(activityDiagram());   
    meta2d.register(classPens());  
    meta2d.register(sequencePens());     
    meta2d.registerCanvasDraw(sequencePensbyCtx()); 
    meta2d.registerCanvasDraw(formPens());    
    // 打开文件     
    meta2d.open(json);  
  }, []);   
  return (    
    <div className="main">    
    <div className="meta2d" id="meta2d"></div>    
    </div>  
 ); 
}; 
export default Meta2dContainer;

Copy

参考例子： https://github.com/le5le-com/meta2d.js/tree/master/examples/react