jsPlumb-如何获得锚的位置

Question

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

我已经看过这个主题和这个主题，并且使用endpoint.anchor.x和endpoint.anchor.y或connectionInfo.sourceEndpoint.anchor.x或connectionInfo.sourceEndpoint.anchor.y简单不起作用。如果我用console.log打印它，它会显示undefined。我不知道这是关于版本还是其他什么的，但看起来“anchor”没有“x”和“y”。我使用的是jsPlumb 1.5.5

Answer 1

在这里看到我的jplumb：http://jsfiddle.net/m7nercLh/2/

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

获取锚位置的代码如下：

    $.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]
        ]];

  })
    });
});

Answer 2

我打印了我的连接与console.log查看其属性，我解决了我的问题使用connection.endpoints[0]. endpoint. xconnection.endpoints[0]. endpoint. yconnection.endpoints[1]. endpoint. xconnection.endpoints[1]. endpoint. y

其中：0是源endpoint；1是目标endpoint；x和y是它们各自的X和Y坐标

更新详细信息现在包含在endpoint的anchor对象中，如下所示：

connection.endpoints[0]. anchor. xconnection.endpoints[0]. anchor. yconnection.endpoints[1]. anchor. xconnection.endpoints[1]. anchor. y