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

悠扬随风 · 2024-11-18 23:16:34

提示
初始化引擎后，会天生一个 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

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

		自动登录	找回密码
密码			立即注册

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

0 个回复

快速回复

楼主热帖

标签云