Javascript jsPlumb-使用源和目标的单个端点绘制多个连接
我正在尝试仅使用一个端点创建从源到目标的多个连接 基本上,当用户试图从源重新绘制到同一节点的第二条路径时,连接源和目标的路径应该在单个端点处拆分和重新连接。此外,每个连接都会贴上标签 因此,该图看起来像是一条直线,分成多条路径,从同一个端点到另一个端点 类似于图像中附加的内容 我只是想知道这是否可以通过使用社区版实现,或者我们应该使用付费版的JSPlumb 提前感谢,,Javascript jsPlumb-使用源和目标的单个端点绘制多个连接,javascript,svg,jsplumb,Javascript,Svg,Jsplumb,我正在尝试仅使用一个端点创建从源到目标的多个连接 基本上,当用户试图从源重新绘制到同一节点的第二条路径时,连接源和目标的路径应该在单个端点处拆分和重新连接。此外,每个连接都会贴上标签 因此,该图看起来像是一条直线,分成多条路径,从同一个端点到另一个端点 类似于图像中附加的内容 我只是想知道这是否可以通过使用社区版实现,或者我们应该使用付费版的JSPlumb 提前感谢,, Balaji对端点(连接的一端)建模。端点有一个基础锚点,它决定端点的位置。每个端点可以有1到maxConnections连接
Balaji对端点(连接的一端)建模。端点有一个基础锚点,它决定端点的位置。每个端点可以有1到maxConnections连接(将maxConnections设置为-1以允许无限连接;默认值为1) HTML 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"
});
});
.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;
}
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"
});
});