在项目业务上有一个能源流向图的需求需要实现,我选择的是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、属性字段参数:
- source:连接节点的起始位置。
- target:连接节点的结束位置。
- anchor:连接的位置(Right ,Left,Bottom,Top)。
- orerlays:给连接的线上添加小箭头。
- 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>
);
};
以上代码就可以实现图例中的流向图了,有什么其他的好方法欢迎评论交流。