当前位置： 首页 > news >正文

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

news 2025/12/23 19:52:21

提示

初始化引擎后，会生成一个 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
  1. 拷贝 node_modules/meta2d.js/meta2d.js 到静态资源目录。比例 index.html 所在目录
  2. 编写 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

  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
  1. 编写 Vue
<template>   <div class="main">     <div id="meta2d"></div>  </div> 
</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
  1. 编写 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

相关文章：

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

提示 初始化引擎后&#xff0c;会生成一个 meta2d 全局对象&#xff0c;可直接使用。 调用meta2d前&#xff0c;需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css&#xff08;特别是css动画&#xff09;没有初始化完成&#xff0c;可能会报错&…...

编程日记 2024/7/3 3:56:09

c#与倍福Plc通信

bcdedit /set hypervisorlaunchtype off...

编程日记 2024/7/3 3:54:07

【OceanBase诊断调优】—— 如何通过trace_id找到对应的执行节点IP

1. 前言 OceanBase作为分布式数据库&#xff0c;查问题找对节点很关键。好在OceanBase执行的每一条SQL都能通过trace_id来关联起来&#xff0c;知道trace_id怎么知道是在哪个节点发起的呢&#xff0c;请看本文。 2. trace_id生成规则 ob内部trace_id的生成函数如下&#xff0…...

编程日记 2024/7/3 3:53:06

鸿蒙开发Ability Kit（程序访问控制）：【使用粘贴控件】

使用粘贴控件 粘贴控件是一种特殊的系统安全控件&#xff0c;它允许应用在用户的授权下无提示地读取剪贴板数据。 在应用集成粘贴控件后&#xff0c;用户点击该控件&#xff0c;应用读取剪贴板数据时不会弹窗提示。可以用于任何应用需要读取剪贴板的场景&#xff0c;避免弹窗…...

编程日记 2024/7/3 3:52:05

PL/SQL入门到实践

一、什么是PL/SQL PL/SQL是Procedural Language/Structured Query Language的缩写。PL/SQL是一种过程化编程语言&#xff0c;运行于服务器端的编程语言。PL/SQL是对SQL语言的扩展。PL/SQL结合了SQL语句和过程性编程语言的特性&#xff0c;可以用于编写存储过程、触发器、函数等…...

编程日记 2024/7/3 3:51:04

双非本 985 硕，我马上要入职上海AI实验室大模型算法岗

暑期实习基本结束了&#xff0c;校招即将开启。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些球友解惑答疑&…...

编程日记 2024/7/3 3:50:03

C盘清理和管理

本篇是C盘一些常用的管理方法&#xff0c;以及定期清理C盘的方法&#xff0c;大部分情况下都能避免C盘爆红。 C盘清理和管理 C盘存储管理查看存储情况清理存储存储感知清理临时文件清理不需要的 迁移存储 磁盘清理桌面存储管理应用存储管理浏览器微信 工具清理 C盘存储管理 查…...

编程日记 2024/7/3 3:48:01

晚上睡觉要不要关路由器？一语中的

前言 前几天小白去了一个朋友家&#xff0c;有朋友说&#xff1a;路由器不关机的话会影响睡眠吗&#xff1f; 这个影响睡眠嘛&#xff0c;确实是会的。毕竟一时冲浪一时爽&#xff0c;一直冲浪一直爽……刷剧刷抖音刷到根本停不下来&#xff0c;肯定影响睡眠。 所以晚上睡觉要…...

编程日记 2024/7/3 3:44:55

ardupilot开发 --- 坐标变换 篇

Good Morning, and in case I dont see you, good afternoon, good evening, and good night! 0. 一些概念1. 坐标系的旋转1.1 轴角法1.2 四元素1.3 基于欧拉角的旋转矩阵1.3.1 单轴旋转矩阵1.3.2 多轴旋转矩阵1.3.3 其他 2. 齐次变换矩阵3. visp实践 0. 一些概念 相关概念&am…...

编程日记 2024/7/3 3:42:53

git clone 别人项目后正确的修改和同步操作

简介 git clone主要是克隆别人的开源项目。但更高端的操作是实现本地修改的同时&#xff0c;能同步别人的在线修改&#xff0c;并且不相互干扰&#xff1a; 克隆原始项目&#xff1a;从远程仓库克隆项目到本地。添加上游仓库&#xff1a;将原始项目的远程仓库添加为上游仓库。…...

编程日记 2024/7/3 3:41:52

JAVA连接FastGPT实现流式请求SSE效果

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; 一、先看效果 真正实流式请求&#xff0c;SSE效果&#xff0c;SSE解释&am…...

编程日记 2024/7/3 3:40:48

二分查找1

1. 二分查找&#xff08;704&#xff09; 题目描述&#xff1a; 算法原理&#xff1a; 暴力解法就是遍历数组来找到相应的元素&#xff0c;使用二分查找的解法就是每次在数组中选定一个元素来将数组划分为两部分&#xff0c;然后因为数组有序&#xff0c;所以通过大小关系舍弃…...

编程日记 2024/7/3 3:39:47

什么美业门店管理系统好用？2024美业收银系统软件排名分享

美业SAAS系统在美容、美发、美甲等行业中十分重要&#xff0c;这种系统为美业提供了一种数字化解决方案&#xff0c;帮助企业更高效地管理业务和客户关系。 美业门店管理系统通常提供预约管理、客户管理、库存管理、报表生成等一系列功能&#xff0c;以满足美容院、美发沙龙等…...

编程日记 2024/7/3 3:38:45

【文件上传】

文件上传漏洞 FileUpload 0x01 定义 服务端未对客户端上传文件进行严格的 验证和过滤造成可上传任意文件情况&#xff1b;0x02 攻击满足条件&#xff1a; 1. 上传文件能够被Web容器解释执行   2. 找到文件位置   3.上传文件未被改变内容。&#xff08;躲避安全检查&#…...

编程日记 2024/7/3 3:34:38

Golang 单引号、双引号和反引号的概念、用法以及区别

在 Golang&#xff08;Go 语言&#xff09;中&#xff0c;单引号 ()、双引号 (") 和反引号 () 用于不同类型的字符串和字符表示。以下是它们的概念、用法和区别&#xff1a; 1. 单引号 () 概念 单引号用于表示 字符&#xff08;rune 类型&#xff09;。一个字符表示一个…...

编程日记 2024/7/3 3:33:37

linux和mysql基础指令

Linux中nano和vim读可以打开记事文件。 ifdown ens33 ifup ens33 关闭&#xff0c;开启网络 rm -r lesson1 gcc -o code1 code1.c 编译c语言代码 ./code1 执行c语言代码 rm -r dir 删除文件夹 mysql> show databases-> ^C mysql> show databases; -------…...

编程日记 2024/7/3 3:30:35

JDK 为什么需要配置环境变量

前言 首先&#xff0c;我们要知道 Java 程序的执行过程。首先将 xxx.java 文件&#xff08;使用 javac 编译指令&#xff09;编译成 xxx.class 文件&#xff08;字节码文件&#xff09;&#xff0c;再将字节码文件&#xff08;使用 java 执行指令&#xff09;解释成电脑所能认识…...

编程日记 2024/7/3 3:29:33

ViewBinding的使用(因为kotlin-android-extensions插件的淘汰)

书籍&#xff1a; 《第一行代码 Android》第三版 开发环境&#xff1a; Android Studio Jellyfish | 2023.3.1 问题&#xff1a; 3.2.4在Activity中使用Toast章节中使用到了kotlin-android-extensions插件,但是该插件已经淘汰,根据网上了解,目前使用了新的技术VewBinding替…...

编程日记 2024/7/3 3:25:28

IOS Swift 从入门到精通：ios 连接数据库 安装 Firebase 和 Firestore

创建 Firebase 项目 导航到Firebase 控制台并创建一个新项目。为项目指定任意名称。 在这里插入图片描述 下一步，启用 Google Analytics，因为我们稍后会用到它来发送推送通知。 在这里插入图片描述 在下一个屏幕上，选择您的 Google Analytics 帐户（如果已创建）。如果没…...

编程日记 2024/7/3 3:23:26

QT4-QT5（6）-const char* QString 乱码转换

我简单粗暴的给出个结论&#xff1a; QString GBK编码正常&#xff0c;可以转UTF-8编码&#xff0c;但会有少量乱码。 const char* 编码就不要转编码&#xff0c;转哪个都是乱码。 UTF-8.cpp 下 1.QString GBK->UTF-8 2.const char * GBK->UTF-8 const char *…...

编程日记 2024/7/3 3:22:25

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/22 18:02:20

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/12/22 11:23:55

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/22 9:57:58

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/12/12 20:29:11

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24