如何自己实现一个丝滑的流程图绘制工具（一）vue如何使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何自己实现一个丝滑的流程图绘制工具（一）vue如何使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景

项目需求突然叫我实现一个类似processOn一样的在线流程图绘制工具。
这可难倒我了，立马去做调研，在github上找了很多个开源的流程图绘制工具，
对比下来我还是选择了 bpmn-js

原因：
1、他的流程图是涉及到业务的，比如开始事件、结束事件等
2、扩展性很强（这个扩展性也太强了，很多api都是看源码找到,😭）
3、可以实现一个完整的流程事件，并进行模拟
如何自己实现一个丝滑的流程图绘制工具（一）vue如何使用,流程图,vue.js,前端
接下来看看在vue项目中我们如何使用bpmn-js

第一步

引入npm 相关的包

npm install bpmn-js
npm install diagram-js

第二步

项目中使用

<template>
  <div class="containers" tabindex="0">
    <div
      id="canvas"
      ref="canvas"  
      tabindex="0"      
      @contextmenu.prevent
    ></div>
    <a ref="downloadLink" hidden></a>
  </div>
</template>
<script>
import CustomModeler from './config'
export default {
	methods:{
		init() {
		this.bpmnModeler = new CustomModeler({
          container: this.$refs.canvas,
          keyboard: {
            bindTo: this.$el
          },
          // 添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel'
          },
          // 添加控制板
          overlays: {
            defaults: {
              show: { minZoom: 0.1 },
              scale: true
            }
          },
         additionalModules
        })
        this.createNewDiagram()
		},
		 /**
     * bpmn绘制操作
     */
    createNewDiagram() {
       // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(this.xmlData).then(() => {
          this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
        })
       },
	}
}
</script>

config/index.js文章来源地址https://www.toymoban.com/news/detail-669020.html

import Modeler from 'bpmn-js/lib/Modeler'

import inherits from 'inherits'

import CustomModule from './custom'
import DisableModeling from './custom/disable-modeling'

export default function CustomModeler(options) {
  Modeler.call(this, options)

  this._customElements = []
}

inherits(CustomModeler, Modeler)

CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules,
 [CustomModule, DisableModeling])