vue+jsplumb 实现连线绘图

vue+jsplumb 实现连线绘图
jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的浏览器，则使用VML技术。

效果图

1. 安装

npm install jsplumb --save

2. main.js 引入

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3. 示例代码

<template>
  <div>
    <div id="container">
      <div class="left">
        <ul>
          <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">
            {
    
    {
    
    item.name}}
          </li>
        </ul>
      </div>

      <div class="right">
        <ul>
          <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">
            {
    
    {
    
    item.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    
    
    name: "linkElementModal",
    data() {
    
    
      return {
    
    
        jsPlumb: null, // 缓存实例化的jsplumb对象
        leftList:[
          {
    
    name: 'xxx_left_1', nodeId: 'left_1'},
          {
    
    name: 'xxx_left_2', nodeId: 'left_2'},
          {
    
    name: 'xxx_left_3', nodeId: 'left_3'},
          {
    
    name: 'xxx_left_4', nodeId: 'left_4'}
        ],
        rightList:[
          {
    
    name: 'xxx_right_1', nodeId: 'right_1'},
          {
    
    name: 'xxx_right_2', nodeId: 'right_2'},
          {
    
    name: 'xxx_right_3', nodeId: 'right_3'},
          {
    
    name: 'xxx_right_4', nodeId: 'right_4'}
        ]
      }
    },
    mounted(){
    
    
      this.showPlumb();
    },
    methods:{
    
    
      showPlumb() {
    
    
        this.jsPlumb = this.$jsPlumb.getInstance({
    
    
          Container: 'container', // 选择器id
          EndpointStyle: {
    
    radius: 0.11, fill: '#999'}, // 端点样式
          PaintStyle: {
    
    stroke: '#999', strokeWidth: 2}, // 绘画样式，默认8px线宽  #456
          HoverPaintStyle: {
    
    stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式  默认为null
          ConnectionOverlays: [ // 此处可以设置所有箭头的样式
            ['Arrow', {
    
     // 设置参数可以参考中文文档
              location: 1,
              length: 12,
              paintStyle: {
    
    
                stroke: '#999',
                fill: '#999'
              }
            }]
          ],
          Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
          DrapOptions: {
    
    cursor: 'crosshair', zIndex: 2000}
        });

        this.jsPlumb.batch(() => {
    
    
          for(let i = 0; i < this.leftList.length; i++){
    
    
            this.initLeaf(this.leftList[i].nodeId, 'source');
          }
          for(let j = 0; j < this.rightList.length; j++){
    
    
            this.initLeaf(this.rightList[j].nodeId , 'target')
          }
        })

        this.setjsPlumb(true,true);

        //点击连线
        this.jsPlumb.bind('click',  (conn, originalEvent) => {
    
    
         console.log(conn, originalEvent)
        })

        //连线时触发
        this.jsPlumb.bind('connection',  (conn, originalEvent) => {
    
    
          console.log(conn.sourceId)
          console.log(conn.targetId)
        })

        //右键触发
        this.jsPlumb.bind('contextmenu',  (conn, originalEvent) => {
    
    
          console.log(conn, originalEvent)
        })
      },
      //  初始化规则使其可以连线、拖拽
      initLeaf(id, type) {
    
    
        const ins = this.jsPlumb;
        const elem = document.getElementById(id);
        if (type === 'source') {
    
    
          ins.makeSource(elem, {
    
    
            anchor: [1, 0.5, 0, 0], // 左 上 右 下
            allowLoopback: false, //允许回连
            maxConnections: -1 //最大连接数（-1表示不限制）
          })
        } else {
    
    
          ins.makeTarget(elem, {
    
    
            anchor: [0, 0.5, 0, 0],
            allowLoopback: false,
            maxConnections: -1
          })
        }
      },
      setjsPlumb(sourceFlag, targetFlag){
    
    
        const source = document.getElementsByName('source')
        const target = document.getElementsByName('target')

        this.jsPlumb.setSourceEnabled(source, sourceFlag)
        this.jsPlumb.setTargetEnabled(target, targetFlag)
        this.jsPlumb.setDraggable(source, false) // 是否支持拖拽
        this.jsPlumb.setDraggable(target, false) // 是否支持拖拽
      },
    }
  }
</script>

<style>
  #container{
    
    
    width: 500px;
    height: 500px;
    padding: 20px;
    position: relative; /*一定加上这句，否则连线位置发生错乱*/
  }

  .left{
    
    
    float: left;
    width: 150px;
  }
  .right{
    
    
    float: right;
    width: 150px;
  }

  .left li,.right li{
    
    
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #efefef;
    margin-bottom: 20px;
    padding: 8px 5px;
  }
</style>