网站做百度推广为什么没人咨询,天元建设集团有限公司宋卫志,广州做网站需要多少钱,没有ftp wordpress提示
初始化引擎后#xff0c;会生成一个 meta2d 全局对象#xff0c;可直接使用。
调用meta2d前#xff0c;需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css#xff08;特别是css动画#xff09;没有初始化完成#xff0c;可能会报错…提示
初始化引擎后会生成一个 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 headtitle i18n乐吾乐 Meta2d/titlemeta charsetUTF-8 / /head body div idmeta2d styleheight:100vh;width:100vw;/div script srcmeta2d.js/scriptscript srcindex.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 classmain div idmeta2d/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 classNamemain div classNamemeta2d idmeta2d/div /div );
};
export default Meta2dContainer;
Copy
参考例子 https://github.com/le5le-com/meta2d.js/tree/master/examples/react
