jsplumb库笔记

1. 初始化

jsPlumb 提供 getInstance 方法来创建一个新的实例。可以在实例化时配置一些全局选项。

jsPlumb.ready(function() {
    var instance = jsPlumb.getInstance({
        PaintStyle: {//连接线样式
            stroke: "#5c96bc",
            strokeWidth: 2
        },
        HoverPaintStyle: {//连接线选中样式
            stroke: "#1e8151",
            strokeWidth: 2
        },
        EndpointStyle: {//端点样式
            width: 10,
            height: 10,
            stroke: "#7AB02C"
        },
        Endpoint: "Dot",//端点类型
        Anchors: ["TopCenter", "BottomCenter"]
    });
});

2. 创建连接

可以通过 connect 方法创建连接。

instance.connect({
    source: "element1",//开始元素
    target: "element2",//结束元素
    connector: ["Bezier", { curviness: 50 }],//连接线的配置
    paintStyle: { stroke: "#5c96bc", strokeWidth: 2 },
    hoverPaintStyle: { stroke: "#1e8151", strokeWidth: 2 },
    overlays: [//覆盖物
        ["Arrow", { width: 10, length: 10, location: 1 }],//箭头
        ["Label", { label: "Label text", id: "label", cssClass: "labelClass" }]
    ]
});

---

实战

需求要流动的箭头动画效果

overlays: [["Arrow", { width: 10, length: 10, location: this.m }]]
/*
location是遮盖物在线上我位置的占比最大为1

所以不断修改location的值就能达到流动的动画效果
*/

         const animate = () => {
            this.m += 0.004;
            if (this.m > 0.98) {
              this.m = 0.012;
            }
            this.instance.deleteEveryConnection();

            const common = {
              connector: "StateMachine",
              cssClass: "animated-flow",
              endpoint: "Blank",
              anchor: ["Left", "Right"],
              overlays: [["Arrow", { width: 10, length: 10, location: this.m }]],
            };


              this.instance.connect({ source: common.source, target: common.target }, {
                ...common
              });

            this.animationFrameId = requestAnimationFrame(animate);
         }
         this.animationFrameId = requestAnimationFrame(animate);