logicflow.js实现流程图设计绘制工具效果代码-html代码-BFW代码库

logicflow.js实现流程图设计绘制工具效果代码

代码语言：html

所属分类：图表

代码描述：logicflow.js实现流程图设计绘制工具效果代码，包括自定义菜单栏、编辑栏、流程图样式、保存Bpmn数据等示例代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
   <!--LogicFlow core包css-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/logicflow-core-index.css">
<!--LogicFlow extension包css-->
<link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/style/index.css"/>
<!--LogicFlow core包js-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/logic-flow.js"></script>
<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Menu.js"></script>
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Control.js"></script>   

<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/DndPanel.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/SelectionSelect.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/MiniMap.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Snapshot.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/BpmnAdapter.js"></script> 
     <style>
      </style>
</head>
<body>
<div id="container"></div>;
 <script type="text/javascript">
 
 // 注册插件

 LogicFlow.use(Menu);
 LogicFlow.use(Control);
 LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
LogicFlow.use(MiniMap);
LogicFlow.use(Snapshot);

// 数据
const data = {
  // 节点
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: '矩形节点',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: '圆形节点',
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};


// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});
lf.setTheme({
   rect: {
      width: 100,
      height: 50,
      radius: 6,
      fill: '#34415b',
      strokeWidth: 0
     
    },
    circle: {
      r: 40,
      fill: '#34415b',
      strokeWidth: 0
     
    },
    diamond: {
    
      fill: '#34415b',
      strokeWidth: 0
     
    },
    
    nodeText: {
      fontSize: 16,
      color: '#ffffff'
    },
    edgeText: {
      fontSize: 16,
      color: '#34415b'
    },
    anchor: {
      fill: "#6edd97"
    }

})
lf.setPatternItems([
      {
    label: '保存',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
    callback: () => {
        LogicFlow.use(Bpm.........完整代码请登录后点击上方下载按钮下载查看