Question

我目前正在制作一个网络应用程序图形编辑器。期望用户在JsPlumb中为每个连接输入一个字符串。使用自定义叠加层，我可以让用户键入其字符串。我能够检索字符串，但我不知道如何将它与每个边缘相关联。这个例子可以在JsFiddle中看到。

https://jsfiddle.net/biocalc/t7uskkvm/1/

代码：

jsPlumb.ready(function() {    
var a = $("#a");
var b = $("#b");

var stateMachineConnector = {
    connector:"Bezier",
    paintStyle:{lineWidth:3,strokeStyle:"#056"},
    endpoint:"Blank",
    anchor:"Continuous",
    overlays:[[ "Arrow", { location: 0.7 } ], [ "Custom", { create:function(component) {
                return $("<input class='edgeInput' type='text' placeholder='input' style='color:black;background:none;text-align:center;border:none'>1</input>");}, location: 0.4}]]
};

   jsPlumb.connect({
        source:"a",
        target:"b"
    }, stateMachineConnector);


jsPlumb.draggable($(".window"));
jsPlumb.animate($("#b"), {"left": 50,"top": 300},{duration:"slow"});
jsPlumb.animate($("#a"), {"left": 250,"top": 100},{duration:"slow"});
});

我的程序允许用户创建多个边，每个边都有自己的输入框。我不确定如何动态组织数据，以便每个边缘对应于它的输入框。

Answer 1

传递到自定义叠加层中component函数的create参数是对底层连接的引用。您可以使用它来执行将边与输入框关联所需的操作，例如将对存储在数组中，如下所示：

var connectionsToInputs = [];

var stateMachineConnector = {
connector:"Bezier",
paintStyle:{lineWidth:3,strokeStyle:"#056"},
endpoint:"Blank",
anchor:"Continuous",
overlays:[[ "Arrow", { location: 0.7 } ], [ "Custom", {  
    create:function(component) {
        var el = $("<input class='edgeInput' type='text' placeholder='input' style='color:black;background:none;text-align:center;border:none'>1</input>");
        connectionsToInputs.push([component, el]);
        return el;
    }, 
location: 0.4}]]
};

如何将JSPlumb overlay与其连接相关联？

1 个答案: