在react中通过jsplumb实现动态的流向图

在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：

 想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。

一、安装使用jsplumb

npm install jsplumb //安装jsplumb库

import {jsPlumb} from "jsplumb"; //引入jsplumb库

二、API与属性

1、getInstance() 方法用于返回一个已创建的jsPlumbInstance对象。jsPlumbInstance 是 jsPlumb 库中重要的对象之一，它代表了一个 jsPlumb 实例，并包含了一系列 API 和配置选项，用于管理连接器和元素。

2、repaintEverything()方法用于重新渲染整个页面上的连接器，以适应元素位置或大小的变化。当元素被移动或缩放时，它们的位置、大小、旋转等属性都会发生变化。如果这些元素与其他元素之间存在连接器，则连接器的位置和样式也需要相应地进行更新，以保证页面上的连接显示正确。

3、deleteEveryConnection()方法用于删除页面上的所有连接器。当你需要一次性删除页面上所有的连接器时，可以调用 deleteEveryConnection() 方法。这个方法会遍历整个页面上的连接器，并将它们全部删除。

4、connect()方法用于创建一个连接器，并将其连接到页面上的两个元素之间.

5、属性字段参数：

1. source：连接节点的起始位置。
2. target：连接节点的结束位置。
3. anchor：连接的位置(Right ，Left，Bottom，Top)。
4. orerlays：给连接的线上添加小箭头。
5. connector：连接的线的类型（Bezier:贝塞尔曲线；Flowchart：流程线；StateMachine：状态机；Straight：直线）。

具体的参考文档可以看这个：jsplumb 中文基础教程 (wdd.js.org)

三、完整代码

export default function Test(props:any) {
    let timer: any;
    const instance = jsPlumb.getInstance();//创建一个jsplumb对象
    const resize = () => {
        instance.repaintEverything();
    };
    const clear = () => {
        if (timer) {
            clearInterval(timer);
        }
        instance.deleteEveryConnection();
    };

    const init = () => {
        let m = 0.01;
        timer = setInterval(() => {
            m += 0.002;
            if (m > 0.98) {
                m = 0.012;
            }
            instance.deleteEveryConnection();

            //连接图一和图二
            instance.connect({
                source: "flowChart1",//图一的id
                target: "flowChart2",//图二的id
                endpoint: "Blank", //端点的形状设置为空
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],//连接端点的位置，起始节点的右侧和结束节点的左侧
                paintStyle: { stroke: "#457DA5", strokeWidth: 2 },//线的样式
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],//小箭头样式及位置
                ],
            });
            //连接图二和图三
            instance.connect({
                source: "flowChart2",
                target: "flowChart3",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],
                paintStyle: { stroke: "#474554", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
                ],
            });
            //连接图四和图三
            instance.connect({
                source: "flowChart4",
                target: "flowChart3",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Right", "Left"],
                paintStyle: { stroke: "#27951D", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
                ],
            });
            //连接图四和图二
            instance.connect({
                source: "flowChart4",
                target: "flowChart2",
                endpoint: "Blank",
                connector: ["Flowchart", { cornerRadius: 2 }],
                anchor: ["Bottom", "Bottom"],
                paintStyle: { stroke: "#27951D", strokeWidth: 2 },
                overlays: [
                    ["Arrow", { width: 12, length: 12, location: m }],
                ],
            });

        }, 20);
    };
    useEffect(() => {
        init();
        window.addEventListener("resize", resize);
        return () => {
            clear();
            window.removeEventListener("resize", resize);
        };
    }, []);

    return (
          <div style={{width:'100%',display:"flex",justifyContent:"space-between"}}>
              <div id={'flowChart1'} style={{border: "5px solid #457DA5"}}>FlowChart1</div>
              <div id={'flowChart2'} style={{border: "5px solid #474554"}}>FlowChart2</div>
              <div id={'flowChart3'} style={{border: "5px solid #9C8D41"}}>FlowChart3</div>
              <div id={'flowChart4'} style={{border: "5px solid #27951D"}}>FlowChart4</div>
          </div>
      );
};

以上代码就可以实现图例中的流向图了，有什么其他的好方法欢迎评论交流。