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

代码语言:html

所属分类:图表

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

代码标签: logicflow.js 流程图 设计 绘制 工具

下面为部分代码预览,完整代码请点击下载或在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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0