jsPlumb 锚点位置

Posted 2023-05-07

【中文标题】jsPlumb 锚点位置

【英文标题】：jsPlumb anchors positions

【发布时间】：2014-10-14 22:48:59

【问题描述】：

我正在尝试自定义 jsPlumb 以绘制图形，所有箭头都向下，连接源来自容器底部，连接目标位于页面下方某个位置的容器顶部。 我用：

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

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

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

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

从文档中，我尝试了以下操作：

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

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

【参考方案1】：

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

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

而不是将元素 source & target, addEndpoint 设置为该元素，如下所示：

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

【讨论】：

嗯...那么我应该按什么顺序做事呢？现在，我用 html-divs 创建了元素，然后尝试修改它们的锚点位置，然后 .connect() 它们。正确的顺序是什么？我还应该使用 .connect() 吗？还是其他方式？ （不容易掌握这个框架的概念......我想文档中的一些图片插图会有所帮助......）

jsPlumb 非常灵活，允许直接在元素和外部端点之间创建连接。我个人更喜欢这个example，这里是[代码](jsplumbtoolkit.com/demo/flowchart/demo.js)。