我正在使用 jsPlumb 来允许用户构建图表。我允许用户拖动这些元素,因此我为每个端点使用锚点集合,让 jsPlumb 在建立连接时从该集合中为我选择“最佳”锚点。我遇到的问题是,我可能有来自任何给定端点的多达十几个连接,因此当许多人最终选择相同的“最佳”锚点时,这些连接将在视觉上分散注意力 - 在图表中创建拥塞的外观。为了解决这个问题,我想告诉 jsPlumb 限制任何两个连接在端点上共享相同的锚点。
可视化我希望实现的目标的最简单方法是在这个演示中:https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html
开箱即用,此演示中的任何连接都不会重叠。
如果您阅读源代码,您可以看到这是通过拥有一组“源”锚点和一组“目标”锚点来完成的,并且仅从第一组锚点到第二组锚点建立连接。但是,正如我上面所说,我可以有多达十几种类型的连接可以从我的端点连接或连接到我的端点,因此我不想为每个端点指定一组唯一的锚点。这将限制我可以在端点边缘的每个潜在锚点之间留下的间距量,因为每组锚点不能与任何其他锚点集相交。
有没有办法告诉 jsPlumb 我不希望连接共享相同的锚点?
jsPlumb.bind('connection',function(info){
var con=info.connection;
var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
if(arr.length>1){
jsPlumb.detach(con);
}
});
一个简洁的版本,带有更新的 jsPlumb API。
查看是否存在具有相同源和目标的另一个连接,如果存在,则分离新创建的连接。 (jsPlumb 版本 1.5.5 - 1.6.1)
Update:
2.4以后的版本使用jsPlumb.deleteConnection代替jsPlumb.detach
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)