组态图

前言

最近产品有个需求，想要实现工业组态图的效果，最好是支持用户绘制的功能。领导让我们去调研实现方案，时间上也不充裕，那没办法，只能去找找有没有现成的组件库。最后我们在GitHub上找到了 meta2d.js 这个开源的库，所以在这里主要简单记录一下如何使用 meta2d.js。

附上仓库地址：github.com/le5le-com/m…

在 Vue3 中使用

安装对应的依赖

npm install @meta2d/core --save 

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

初始化画布

<template>
  <div id="meta2d"></div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import {
  Meta2d,
  Pen,
  register,
  registerAnchors,
  registerCanvasDraw,
} from '@meta2d/core';
import { flowPens, flowAnchors } from '@meta2d/flow-diagram';
import {
  activityDiagram,
  activityDiagramByCtx,
} from '@meta2d/activity-diagram';
import { classPens } from '@meta2d/class-diagram';
import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram';
import { register as registerEcharts } from '@meta2d/chart-diagram';
import { formPens } from '@meta2d/form-diagram';
import { chartsPens } from '@meta2d/le5le-charts';
import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram';

import { useSelection } from '@/services/selections';

const { select } = useSelection();

const meta2dOptions: any = {
  rule: true,
};

onMounted(() => {
  // 创建实例
  new Meta2d('meta2d', meta2dOptions);

  // 按需注册图形库
  // 以下为自带基础图形库

  // 注册其他自定义图形库

  // 读取本地存储
  let data: any = localStorage.getItem('meta2d');
  if (data) {
    data = JSON.parse(data);

    // 判断是否为运行查看，是-设置为预览模式
    if (location.pathname === '/preview') {
      data.locked = 1;
    } else {
      data.locked = 0;
    }
    meta2d.open(data);
  }

  meta2d.on('active', active);
  meta2d.on('inactive', inactive);
});

const active = (pens?: Pen[]) => {
  select(pens);
};

const inactive = () => {
  select();
};

onUnmounted(() => {
  meta2d.destroy();
});
</script>
<style lang="scss" scoped>
#meta2d {
  height: calc(100vh - 80px);
  z-index: 1;
}
</style>

结语

meta2d.js的GitHub里有个example目录，里面有对应vue3、es5、react的示例项目，研究明白后可以搭一个基础的框架，之后再根据自己的需求自定义开发。