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

提示

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

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

划重点

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

如何学习

  1. 跟着"快速上手"文档做一遍,先有个总体认知
  2. 看一遍我们的视频教程,有个全面认识
  3. 多学习示例教程等

官方示例: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

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

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

微信号:le5le-service,备注进交流群

在浏览器中体验

  1. 打开乐吾乐2D可视化编辑器

  2. F12打开浏览器控制台

  3. 在控制台输入

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

    meta2d.addPen(pen);

Copy

在 ES5 中使用

  1. 获取 meta2d.js

    npm install meta2d.js --save

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

  3. 编写 index.html

    <!DOCTYPE html> <html> <head> <title i18n>乐吾乐 Meta2d</title> <meta charset="UTF-8" /> </head> <body>
    <script src="meta2d.js"></script> <script src="index.js"></script> </body> </html>

Copy

  1. 编写 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 中使用

  1. 获取 @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

  2. 编写 Vue

    <template>
    </template>

Copy

  1. 编写 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 中使用

  1. 获取 @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

  2. 编写 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 (




    );
    };
    export default Meta2dContainer;

Copy

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

相关推荐
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----5 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024065 小时前
SQL SELECT 语句:基础与进阶应用
开发语言