jsPlumb初体验

爆米花蘸粑粑
4,107 阅读4分钟

一、什么是jsPlumb

jsPlumb是一个功能强大，可以用来绘制DOM节点间连线的库，它提供了非常多的定制功能来设定DOM节点间的连线，你可以利用它来完成各种各样的流程图绘制。

二、安装

jsPlumb分为免费（Community Edition）和付费（Toolkit Edition）两个版本，付费版本会有更多工鞥呢，我们只需要用免费版就可以了，这里我们使用的版本号是v2.15.6。有以下两种方式来引入jsPlumb

yarn add jsplumb 
import { jsPlumb } from 'jsplumb'; // yarn安装

https://cdn.bootcss.com/jsPlumb/2.15.3/js/jsplumb.min.js // cdn地址

无论是哪种方式引入，最终我们都会得到一个JsPlumb对象。

三、名词解释

  • Source:连线的起始位置
  • Target:连线的结束位置
  • Endpoint:DOM节点上可以拖拽出连线的位置
  • Anchor:连线末端的位置
  • Connector：DOM节点间的连线
  • Overlay：连线相关的样式、信息等

四、初始化&配置

jsPlumb本身有自己的一套认配置，但是官方建议我们不要去修改，如果我们需要修改配置，可以先获取一个实例，再去做更改。后边我们所有的代码，也都基于这实例instance去做演示。这里注意：jsPlumb必须等到DOM初始化后才可以使用，所以我们调用ready方法来进行初始化。

const instance = jsPlumb.getInstance(); // jsplumb实例
instance.ready(()=> {
    //some code
});//

使用importDefaults方法来更改默认配置，这里只列出了一部分。

instance.importDefaults({
    Container: 'editArea', // 容器id
    PaintStyle: {
        stroke: '#E0E3E7', // 线的颜色
        strokeWidth: 1, // 线的粗细，值越大线越粗
        outlineStroke: 'transparent', // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击
        outlineWidth: 10 // 线外边的宽，值越大，线的点击范围越大
    },
    DeleteEndpointsOnDetach: true, //删除连线同时是否删除端点
    HoverPaintStyle: {
        stroke: '#b0b2b5',
        strokeWidth: 1
    }, // 鼠标滑过线的样式
    Overlays: [
      [
        'Arrow', // 箭头样式
            {
                width: 10, // 箭头尾部的宽度
                length: 8, // 从箭头的尾部到头部的距离
                location: 1, // 位置，建议使用0～1之间
                direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
                foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
        }
      ],
      [
        'Label', //条件样式
            {
                label: '',
                location: 0.4,
                cssClass: 'aLabel'
        }
      ]
    ]
});

五、实战演练

接下来，我们通过一些例子，来了解jsPlumb相关的功能

连接接两个Div

<div id="item1" class="item1"></div>
<div id="item2" class="item2"></div>

instance.ready(() => {
  instance.connect({
    source: 'item1',
    target: 'item2',
    endpoint: 'Dot'
  });
});

效果如图，几行代码，我们便得到了相连的两个div

image.png

改变连线的样式

jsPlumb提供了三种连线的形状可供选择，分别是Bezier（默认贝塞尔曲线）、Straight（直线）、Flowchart（流程图）、StateMachine（状态机）。我们通过connector属性来配置连线样式：

instance.ready(() => {
  instance.connect({
    source: 'item1',
    target: 'item2',
    endpoint: 'Dot'
    connector: 'Flowchart'
  });
});

image.png

image.png

image.png

改变端点的样式

我们发现，上边的几张图里，连线的端点都是底部的圆点。jsPlumb提供了很多参数，可以让我们来修改端点的样式，这里列出一部分看下效果：

instance.ready(() => {
  instance.connect({
    source: 'item1',
    target: 'item2',
    endpoint: 'Rect',//端点的形状 Dot（默认圆点）、Rectangle（矩形）、Blank（空）
    connector: 'Straight',
    anchors: ['Right', 'Left'],//分别对应source和target的端点位置,可选值Left、Right、Top、Bottom
    endpointStyle: {
      fill: '#1879ff',//端点外圈颜色
      outlineStroke: '#ff4400'//端点填充颜色
    }
  });
});

image.png

给连线加上方向&条件

既然jsPlumb经常被用来绘制流程图，那么连线的方向和条件，当然是必不可少的了，下面我们通过overlay参数来给连线加上方向和条件：

instance.ready(() => {
  instance.connect({
    source: 'item1',
    target: 'item2',
    endpoint: 'Dot',
    connector: 'Straight',
    anchors: ['Right', 'Left'],
    overlays: [
      [
        'Arrow',
        {
          width: 10, // 箭头尾部的宽度
          length: 8, // 从箭头的尾部到头部的距离
          location: 0.6, // 箭头位置，建议使用0～1之间
          direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
          foldback: 0.623 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
        }
      ],
      [
        'Label',
        {
          label: '条件1',
          location: 0.4, // label在连线上的位置，取0-1之间
          cssClass: 'aLabel' // 连线的类名，可以用来自定义样式
        }
      ]
    ]
  });
});

image.png

设置节点可拖动

jsPlumb提供了draggable方法，让我们可以把页面上的dom节点变得可以拖拽（这里注意，可拖拽的元素定位必须是absolute）

instance.draggable('item2', {
    containment: 'parent',//拖拽元素的父级id
    stop(el) {//拖拽结束后的回调
      console.log('拖拽结束: ', el);
    }
});

image.png

从元素上拖出一条连线

上面我们描述了如何链接两个元素，接下来，我们来给已有的元素，增加一个端点，让它可以拖拽出一条连线 jsPlumb提供了两种方式来给元素增加端点，代码如下：

addEndpoint
instance.addEndpoint('item1', {
    anchor: 'Top',
    isSource: true,
    isTarget: false,
    maxConnections: -1 //最大的连线数量，-1为不限
});

image.png

makeSource makeTarget
instance.makeSource('item1', {
    anchor: 'Top',
    isSource: true,
    isTarget: false
});

image.png

总结

文章里提及的功能仅仅是jsPlumb的一小部分，关于端点的自定义，事件绑定等等，在这里就不一一介绍了，大家可以参照官方文档(docs.jsplumbtoolkit.com/toolkit/cur…) 去学习。

avatar
文章
阅读
粉丝