【国产开源可视化引擎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 
  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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/38565.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vatee万腾平台:科技驱动,智慧生活

随着科技的飞速发展&#xff0c;我们生活的方方面面正在经历前所未有的变革。Vatee万腾平台&#xff0c;作为这一变革的推动者之一&#xff0c;以其科技驱动的理念&#xff0c;正引领我们迈向更加智慧、便捷的生活。 Vatee万腾平台&#xff0c;是一个集科技研发、应用创新、服务…

Unity热更方案HybridCLR+YooAsset,纯c#开发热更,保姆级教程,从零开始

文章目录&#xff1a; 一、前言二、创建空工程三、接入HybridCLR四、接入YooAsset五、搭建本地资源服务器Nginx六、实战七、最后 一、前言 unity热更有很多方案&#xff0c;各种lua热更&#xff0c;ILRuntime等&#xff0c;这里介绍的是YooAssetHybridCLR的热更方案&#xff0…

jvm性能监控常用工具

在java的/bin目录下有许多java自带的工具。 我们常用的有 基础工具 jar:创建和管理jar文件 java&#xff1a;java运行工具&#xff0c;用于运行class文件或jar文件 javac&#xff1a;java的编译器 javadoc&#xff1a;java的API文档生成工具 性能监控和故障处理 jps jstat…

鸿蒙应用更新跳转到应用市场

鸿蒙没有应用下载安装&#xff0c;只支持跳转到应用市场更新 gotoMarket(){try {const request: Want {parameters: {// 此处填入要加载的应用包名&#xff0c;例如&#xff1a; bundleName: "com.huawei.hmsapp.appgallery"bundleName: com.huawei.hmos.maps.app}}…

浅谈定时器之常数吞吐量定时器

浅谈定时器之常数吞吐量定时器 常数吞吐量定时器的主要目的是在JMeter测试中维持一个恒定的吞吐量&#xff08;通常是每分钟的请求数或事务数&#xff09;&#xff0c;从而确保测试能够以预期的负载水平运行。这对于模拟特定的用户访问模式、进行稳定性测试、负载测试以及压力…

171. Excel 表列序号

给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: columnTitle “A” 输出: 1 示例 2: 输入: columnTitle “…

量化交易 - 策略回测

策略回测 1、什么是策略回测&#xff1f;2、策略回测的作用3、策略回测系统概述3.1策略回测中相关的指标介绍3.2量化交易策略的资金容量3.3 完整的策略回测系统包含哪些内容 1、什么是策略回测&#xff1f; 策略回测&#xff0c;也称之为策略回溯测试&#xff0c;是指利用交易…

北京酒店订房小程序开发的优势与主要功能

随着我国经济与交通的飞速发展&#xff0c;人们出行的次数越来越多&#xff0c;频率也越来越快。无论是出差还是出游&#xff0c;人家对外出酒店的舒适度与便捷度的要求也越来越高。为了满足人们对于酒店的新需求&#xff0c;北京酒店订房小程序与互联网技术相结合&#xff0c;…

Vue监听localstorage变化的方法详解(待更新)

我现在用token做登录身份验证&#xff0c;使用到localStorage&#xff0c;在computed中编写“函数”&#xff0c;根据localStorage的值&#xff0c;在导航栏显示不同的链接&#xff0c;我发现computed中编写的“函数”不会监控localStorage取值的变化 Vue 仅可以对其管理的数据…

pbootcms后台获取前端表单留言页面url

pbootcms在线留言表单&#xff0c;用户在网页前端提交表单成功后&#xff0c;在网站后台如何获取表单留言页面的url这个参数呢&#xff1f;下面举例说明&#xff1a;首先&#xff0c;我们在PBootcms后台对应的表单&#xff0c;添加需要记录的表单字段&#xff0c;例如 添加liuy…

Java面试题:对比HTTP的GET和POST方法,并讨论它们的使用场景

HTTP的GET和POST方法是用于在客户端和服务器之间交换数据的两种基本请求方法。它们有不同的特性和使用场景。 GET方法 特性 数据在URL中传输&#xff1a;GET请求的数据附加在URL的末尾&#xff0c;通过查询字符串传输。数据长度限制&#xff1a;由于浏览器和服务器对URL长度…

算法刷题笔记 双链表(C++实现)

文章目录 题目描述基本思路实现代码 题目描述 实现一个双链表&#xff0c;双链表初始为空&#xff0c;支持5种操作&#xff1a; 在最左侧插入一个数&#xff1b;在最右侧插入一个数&#xff1b;将第k个插入的数删除&#xff1b;在第k个插入的数左侧插入一个数&#xff1b;在第k…

免费开源AI生产力工具:内置专属ChatGPT、一键智能处理图片和视频(擦除水印、卡通漫画、无损放大、插值补帧、智能修复、3D转制、上色修复、合成整理)

AI 生产力工具 免费开源&#xff0c;提升用户生产力&#xff0c;保障隐私和数据安全。提供高效便捷的AI解决方案&#xff0c;包括但不限于&#xff1a;内置专属ChatGPT、一键批量智能处理图片和视频等。 主要特点 免费开源&#xff1a;免费使用&#xff0c;源代码开放&#…

odoo 安装/升级/卸载调用方法

原生升级/卸载 调用的方法记录 安装模块 button_immediate_install()升级模块 button_immediate_upgrade()卸载模块 button_immediate_uninstall()shell语句 安装/升级/卸载

大数据面试题之Spark(3)

目录 Spark的哪些算子会有shuffle过程? Spark有了RDD&#xff0c;为什么还要有Dataform和DataSet? Spark的RDD、DataFrame、DataSet、DataStream区别? Spark的Job、Stage、Task分别介绍下&#xff0c;如何划分? Application、job、Stage、task之间的关系 Stage内部逻辑…

性价比高真无线蓝牙耳机有哪些?性价比真无线蓝牙耳机推荐

目前真无线蓝牙耳机的音质和性能已经越来越接近甚至超越传统有线耳机。然而&#xff0c;市面上的TWS耳机品牌和型号繁多&#xff0c;价格也从几十元到几千元不等&#xff0c;性价比自然成了消费者选择时的重要考量因素&#xff0c;究竟哪些真无线蓝牙耳机既能够提供满意的音质和…

【408考点之数据结构】顺序查找和折半查找

顺序查找和折半查找 在数据处理中&#xff0c;查找操作是非常重要的一部分。顺序查找和折半查找是两种常见的查找方法&#xff0c;它们各有优缺点和适用场景。以下是对这两种查找方法的详细介绍。 1. 顺序查找 定义&#xff1a;顺序查找&#xff08;Sequential Search&#…

前沿重器[52] | 聊聊搜索系统5:召回:检索、粗排、多路召回

前沿重器 栏目主要给大家分享各种大厂、顶会的论文和分享&#xff0c;从中抽取关键精华的部分和大家分享&#xff0c;和大家一起把握前沿技术。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。&#xff08;算起来&#xff0c;专项启动已经…

大数据的魔方:Kylin Cube构建全解析

&#x1f4d8; 大数据的魔方&#xff1a;Kylin Cube构建全解析 在大数据的浩瀚海洋中&#xff0c;Apache Kylin以其卓越的分析能力&#xff0c;为企业提供了一个强大的数据立方体&#xff08;Cube&#xff09;解决方案。Cube作为Kylin的核心概念之一&#xff0c;它的构建过程直…

C++Primer Plus 第十四章代码重用:总结

CPrimer Plus 第十四章代码重用&#xff1a;总结 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;CPrimer Plus 第十四章代码重用&#xff1a;总结 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff…