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

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

news 文章来源：https://blog.csdn.net/le5le_iot/article/details/140093625 2025/5/22 17:58:10

提示

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

报错：RuntimeError_ cuDNN error_ CUDNN_STATUS_EXECUTION_FAILED

原因&#xff1a;pytorch与cuda版本不对 也有可能是内存空间不足&#xff0c;可以更改虚拟空间大小&#xff0c;参考&#xff1a;解决电脑内存不足问题&#xff1a;Win10虚拟内存设置指南...

编程日记 2024/7/3 3:21:24

黑马点评项目总结1-使用Session发送验证码和登录login和 使用Redis存储验证码和Redis的token登录

黑马先是总结了从session实现登录&#xff0c;然后是因为如果使用了集群方式的服务器的话&#xff0c;存在集群共享session互相拷贝效率低下的问题&#xff0c;接着引出了速度更快的内存型的kv数据库Redis&#xff0c; 使用Session发送验证码和登录login 举个例子&#xff1a…...

编程日记 2024/7/3 3:18:20

【大模型】Vllm基础学习

前言&#xff1a;vllm是一个大语言模型高速推理框架&#xff0c;旨在提高大模型的服务效率。优势是内存管理&#xff0c;实现的核心是pageattetion算法。仅在gpu上加速&#xff0c;不在cpu加速。 目录 1. PageAttention2. 实践2.1 安装2.2 离线推理2.3 适配OpenAI的api 1. Page…...

编程日记 2024/7/3 3:17:17

使用vue动态给同一个a标签添加内容 并给a标签设置hover，悬浮文字变色，结果鼠标悬浮有的字上面不变色

如果Vue的虚拟DOM更新机制导致样式更新不及时&#xff0c;你可以尝试以下几种方法来解决这个问题&#xff1a; 确保使用响应式数据&#xff1a; 确保你使用的数据是响应式的&#xff0c;并且任何对这些数据的更改都会触发视图的更新。在Vue中&#xff0c;你应该使用data对象中的…...

编程日记 2024/7/3 3:16:15

【ajax实战06】进行文章发布

本文章目标&#xff1a;收集文章内容&#xff0c;并提交服务器保存 一&#xff1a;基于form-serialize插件收集表单数据 form-serialize插件仅能收集到表单数据&#xff0c;除此之外的数据无法收集到 二&#xff1a;基于axios提交到服务器保存 三&#xff1a;调用alert警告…...

编程日记 2024/7/3 3:15:13

Codeforces Round 954 (Div. 3)（A~E）

目录 A. X Axis B. Matrix Stabilization C. Update Queries D. Mathematical Problem A. X Axis Problem - A - Codeforces 直接找到第二大的数&#xff0c;答案就是这个数与其他两个数的差值的和。 void solve() {vector<ll>a;for (int i 1; i < 3; i){int x;…...

编程日记 2024/7/3 3:14:12

基于Java微信小程序同城家政服务系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还…...

编程日记 2024/7/3 3:13:11

[21] Opencv_CUDA应用之使用Haar级联的对象检测

Opencv_CUDA应用之使用Haar级联的对象检测 Haar级联使用矩形特征来检测对象，它使用不同大小的矩形来计算不同的线和边缘特征。矩形包含一些黑色和白色区域，如下图所示，它们在图像的不同位置居中 类Haar特征检测算法的思想是计算矩形内白色像素和黑色像素之间的差异这个方法的…...

编程日记 2024/7/3 3:12:10

CXL：拯救NVMe SSD缓存不足设计难题-2

LMB提出了基于CXL协议的内存扩展框架和内核模块。该方案利用CXL内存扩展器作为物理DRAM源&#xff0c;旨在提供一个统一的内存分配接口&#xff0c;使PCIe和CXL设备都能方便地访问扩展的内存资源。通过这个接口&#xff0c;NVMe驱动和CUDA的统一内存内核驱动可以直接高效地访问…...

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

Opencv学习项目6——pyzbar

在之前我们学习了解码图片中的二维码&#xff0c;这次我们开启摄像头来解码视频中二维码 开启摄像头 # 打开摄像头 cap cv2.VideoCapture(0) cap.set(3, 640) # 设置摄像头画面宽度 cap.set(4, 480) # 设置摄像头画面高度 我使用的是笔记本上的摄像头来进行的&#xff0c;…...

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