jsPlumb - 如何获得锚的位置

Question

我试图保存并加载jsPlumb流程图，但我在重新创建连接时遇到问题。当我尝试加载它们时它们相互重叠。图1显示了我如何保存流程图，图2显示了它是如何加载的。

我已经看过this主题和this一个并使用endpoint.anchor.x和endpoint.anchor.y或connectionInfo.sourceEndpoint.anchor.x或connectionInfo.sourceEndpoint.anchor.y简单不会＆＃ 39;工作。如果我使用console.log进行打印，则会显示undefined。我不知道它是关于版本还是其他什么东西，但它看起来像是锚定＆＃39;没有＆＃39; x＆＃39;和＆＃39;。我使用的是jsPlumb 1.5.5

Answer 1

我使用connection打印了console.log以查看其属性，并使用了解决了我的问题 connection.endpoints[0].endpoint.x connection.endpoints[0].endpoint.y connection.endpoints[1].endpoint.x connection.endpoints[1].endpoint.y

其中：0是源端点; 1是目标端点; x和y分别是X和Y坐标

<强>更新 详细信息现在包含在anchor的{​​{1}}对象中：

endpoint connection.endpoints[0].anchor.x connection.endpoints[0].anchor.y connection.endpoints[1].anchor.x

Answer 2

在这里查看我的jsplumb： http://jsfiddle.net/m7nercLh/2/

您可以创建流程图，然后保存json。重新加载页面，粘贴已保存的json，然后单击“加载”，它将重新创建流程图，从而保存所有对象和连接的坐标。

获取锚点位置的代码在这里：

    $.each(jsPlumb.getConnections(), function (idx, connection) {
    connections.push({
        connectionId: connection.id,
        pageSourceId: connection.sourceId,
        pageTargetId: connection.targetId,
        anchors: $.map(connection.endpoints, function(endpoint) {

            return [[endpoint.anchor.x, 
            endpoint.anchor.y, 
            endpoint.anchor.getOrientation()[0], 
            endpoint.anchor.getOrientation()[1],
            endpoint.anchor.offsets[0],
            endpoint.anchor.offsets[1]
        ]];

  })
    });
});