javascript - jsPlumb anchor 位置

Question

我正在尝试自定义 jsPlumb 来绘制图形，所有箭头都向下，连接源从容器的底部，连接目标到页面下方某处容器的顶部。我使用:

instance.connect({ source:"sourceDiv", target:"targetDiv" , anchors:["Bottom", "Top"] });

除了一个小问题之外，工作正常......

所有箭头都将从底部的中间开始，并在顶部的中间终止。

当有许多箭头进出同一个容器时，我更希望 anchor 沿顶部和底部均匀分布。

根据文档，我尝试了以下操作:

instance.makeSource("sourceDiv", { anchor: "Continuous" });
instance.makeTarget("targetDiv", { anchor: "Continuous" });

或(使用 jQuery):

instance.makeSource($("#sourceDiv"), { anchor: "Continuous" });
instance.makeTarget($("#targetDiv"), { anchor: "Continuous" });

但显然语法不正确...出现如下错误:

jsPlumb: fire failed for event connection : TypeError: info.connection.getOverlay(...) is null

需要帮助来解决这个问题。

Answer 1

anchor 与端点相关联。连接元素时，会自动创建端点，但创建元素源和目标时，除非创建连接，否则不会创建端点，因此代码失败。

https://jsplumbtoolkit.com/doc/anchors.html

不是将元素source和target，而是addEndpoint添加到该元素，如下所示:

jsPlumb.addEndpoint("someDiv", {
    endpoint:"Dot",
    isSource:true,
    isTarget:false,
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }]
});