我正在尝试仅使用一个端点创建从源到目标的多个连接。
基本上,当用户尝试从源重新绘制到同一节点的第二条路径时,连接源和目标的路径应该分开并在单个端点处重新连接。此外,每个连接都会附有一个标签。
这样该图看起来就像一条线分成了往返同一端点的多条路径。
类似于图片中所附的内容。
我只是想知道这是否可以使用社区版来实现,或者我们应该使用 JSPlumb 的付费版本吗? Something like the one attached in the image
提前致谢, 巴拉吉
最佳答案
对端点建模 - 连接的一端。端点有一个底层 anchor ,它决定端点的位置。每个端点可以有 1 到 maxConnections 连接(将 maxConnections 设置为 -1 以允许无限连接;默认值为 1)。
HTML
<div id="item_input" class="itemin">PROJECT NAME</div>
<div class="down">
<div id="downstream_1" class="ds">Output 1</div>
<div id="downstream_2" class="ds">Output 2</div>
<div id="downstream_3" class="ds">Output 3</div>
</div>
CSS
.item {
height:80px;
width: 80px;
border: 1px solid blue;
float: left;
}
.ds {
width:100px;
height:100px;
border:1px solid brown;
float:left;
margin-left:50px;
}
.down{
width:100%;
height:auto;
float:left;
}
.itemin{
margin-top:150px;
margin-bottom:100px;
border:2px pink solid;
width:100px;
height:100px;
float:left;
}
Javascript
jsPlumb.ready(function () {
/*Second Instance*/
var instance = jsPlumb.getInstance();
instance.importDefaults({
Connector: ["Bezier", {
curviness: 150
}],
Anchors: ["BottomCenter", "TopCenter"]
});
instance.connect({
source: "item_input",
target: "downstream_1",
scope: "someScope"
});
instance.connect({
source: "item_input",
target: "downstream_2",
scope: "someScope"
});
instance.connect({
source: "item_input",
target: "downstream_3",
scope: "someScope"
});
});
关于javascript - jsPlumb - 使用源和目标的单个端点绘制多个连接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45325827/