在前端开发中，我们常常需要实现流程图、拓扑图等业务，这时候就需要用到 jsPlumb 这个流程图绘制库。不过jsplumb本身并不好用，需要很多自己实现的方法。这时候，npm 上的 jsplumb_utils 包就可以帮助我们节省很多时间。
本文将介绍如何使用 npm 包 jsplumb_utils，帮助你更快更好地实现复杂的流程图。
安装和导入
首先，我们需要安装 jsplumb_utils 包。在终端输入以下命令即可安装：
npm install jsplumb_utils --save
安装完成后，我们需要在代码中导入这个包：
import jsplumbUtils from 'jsplumb_utils'
绘制基本流程图
我们先来看一个基本的流程图，包括两个矩形和一个箭头。
<div id="container">
<div class="block" id="block1">Block 1</div>
<div class="block" id="block2">Block 2</div>
</div>-- -------------------- ---- -------
------------------------ -
-------------------
---------- ------------
---------- ------------- -------------
------- -
----- -----------
--------- -
-
---
------------------------------ ----------
---这段代码的作用是通过 jsplumb_utils 这个包实现了基本的流程图绘制。其中：
jsplumbUtils.init初始化 jsPlumb，并设置画布的容器为 id 为 container 的 div；endpoints指定每个图块可接受的链接端点类型，此处都是矩形型的；arrows指定箭头的样式类型和数量；jsplumbUtils.connect连接两个图块。
绘制多个流程图
在实际开发中，我们可能需要绘制多个不同的流程图。此时，只需要在每个流程图的 div 中加入不同的 id 标识，然后在 js 中使用 jsplumbUtils.init 方法分别初始化每个流程图即可。
<div id="container1">
<div class="block" id="block11">Block 1-1</div>
<div class="block" id="block12">Block 1-2</div>
</div>
<div id="container2">
<div class="block" id="block21">Block 2-1</div>
<div class="block" id="block22">Block 2-2</div>
</div>-- -------------------- ---- -------
------------------------ -
-------------------
---------- -------------
---------- ------------- -------------
------- -
----- -----------
--------- -
-
---
------------------------------- -----------
-------------------
---------- -------------
---------- ------------- -------------
------- -
----- -----------
--------- -
-
---
------------------------------- -----------
---定义链接端点
jsplumb_utils 提供了多个链接端点类型，用于实现不同的需求。下面是一些常用的链接端点：
- Dot：圆形点状端点；
- Rectangle：矩形端点；
- Image：图片端点，可以根据需要自定义图片链接；
- Blank：不显示端点。
-- -------------------- ---- -------
------------------------ -
-------------------
---------- ------------
---------- ------------- ---------
------- -
----- -----------
--------- -
-
---
------------------------------ ----------
---设置箭头样式
在 jsplumbUtils 中，可以设置箭头的样式、颜色以及数量等属性。以下是一些常见的箭头样式：
- Bezier：贝塞尔曲线箭头；
- Straight：直线箭头；
- Diamond：菱形箭头。
-- -------------------- ---- -------
------------------------ -
-------------------
---------- ------------
---------- ------------- -------------
------- -
----- ---------
------ -------
------------
--------- -
-
---
------------------------------ ----------
---其中，color 参数指定箭头的颜色。其他参数根据需要进行设置。
自定义箭头样式
在 jsplumbUtils 中，也可以进行箭头样式的自定义，比如为箭头添加自定义的图片样式。
-- -------------------- ---- -------
------------------------ -
-------------------
---------- ------------
---------- ------------- -------------
------- -
----- --------
----- -
------------ -------
--------------- -
--
------- -
------- ----------------
------- ---
------ ---
-------- ---- --- -- ----
----- ---
----- --
---------- ------
-
-
---
------------------------------ ----------
---在这段代码中，我们将箭头的类型设置为 Blank，表示不显示箭头，而使用 path 和 marker 属性设置了自定义的箭头样式。
实现流程图的拖拽和连线
在实际的业务需求中，我们不仅需要绘制流程图，还需要实现流程图的拖拽和连线。jsplumb_utils 中同样提供了相应的 API 实现这些功能。
-- -------------------- ---- -------
------------------------ -
-------------------
---------- ------------
---------- ----- -- ----
---------- ------------- -------------
------- -
----- -----------
--------- -
-
---
------------------------------ ----------
-- ------
---------------------------------------- -------------- -------------- -
------------------
---
---在这段代码中，我们将 draggable 参数设置成 true，表示允许容器中的图块可以被拖拽。在连线部分，我们监听了 connection 事件，可以在事件回调中获得连线的信息以便于其他操作。
使用 jsplumb_utils 包的好处
使用 jsplumb_utils 包，可以省去很多重复的代码，快速实现复杂流程图的绘制。同时，它提供的拖拽和连线功能方便直观，联合箭头样式设置，可以大大简化流程图的制作和展示。
总结
本文介绍了如何使用 npm 包 jsplumb_utils 实现流程图的绘制，并详细介绍了多种绘制方法、端点类型、箭头样式以及拖拽连线功能设置。希望能对开发者快速实现流程图产生帮助，同时提供更加便捷的前端开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607781e8991b448de9e6