javascript - jsPlumb 连接没有相应地移动到元素位置

Question

我想做的是在两个元素之间建立联系。 这是我现在拥有的。

asp.net:

<asp:Button ID="centerCircle" runat="server" CssClass="dependencyCircle centerCircle core" Text="Core Apps" OnClientClick="test2()"></asp:Button>

<asp:Button ID="apiCircle" runat="server" CssClass="dependencyCircle rightCornersB support" Text="APIs" OnClientClick="test()"></asp:Button>

jsplumb:

jsPlumb.importDefaults({ 

ConnectionsDetachable:false

});
jsPlumb.bind("ready", function () {


var firstInstance = jsPlumb.getInstance({
    PaintStyle: {
        lineWidth: 10,
        strokeStyle: "#567567",
        outlineColor: "black",
        outlineWidth: 1
    },
    Connector: ["Bezier", { curviness: 30 }],
    Endpoint: ["Dot", { radius: 8 }],
});
firstInstance.connect({
    source: "apiCircle",
    target: "centerCircle",
    anchors: ["Left", "BottomRight"],

});
});

它在我运行应用程序时生成两个元素之间的连接，但是当我调整窗口大小并且两个元素的位置发生变化时，连接不会相应地移动到两个元素的位置。连接没有根据两个元素的位置重新调整其位置有什么原因吗？

Answer 1

每当调整窗口大小时，您需要告诉 jsPlumb 重新绘制所有连接，因为元素的位置已经改变。 代码:

$( window ).resize(function() {
    jsPlumb.repaintEverything(); //firstInstance.repaintEverything();
});