jsPlumb - 如何获取锚点的位置

Posted 2023-05-07

【中文标题】jsPlumb - 如何获取锚点的位置

【英文标题】：jsPlumb - How to get anchor's position

【发布时间】：2014-03-11 17:31:20

【问题描述】：

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

我见过this 主题和this 一个，使用endpoint.anchor.x 和endpoint.anchor.y 或connectionInfo.sourceEndpoint.anchor.x 或connectionInfo.sourceEndpoint.anchor.y 简单不起作用。如果我用 console.log 打印它，它会显示 undefined 。我不知道这是否与版本有关，但看起来“锚”没有“x”和“y”。我正在使用 jsPlumb 1.5.5

【参考方案1】：

我用console.log 打印了我的connection 以查看它的属性，然后我解决了我的问题 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 坐标

更新 详细信息现在包含在endpoint 的anchor 对象中：

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

【讨论】：

如何重绘与锚点 x 和 y 的连接？你能分享一些代码吗！

@coding_idiot 首先我重新创建连接：connection = instance.connect( source: sourceId, target: targetId );然后我设置它：connection.endpoints[0].endpoint.x = xSource; connection.endpoints[0].endpoint.y = ySource； connection.endpoints[1].endpoint.x = xTarget； connection.endpoints[1].endpoint.y = yTarget;如果您想让我更清楚，请不要问我很乐意为您提供帮助

我也能做到。目前，我正面临这个问题 - 我们有一个流程图，每个组件中有 2 个端点，我们当然不会同时使用这两个端点。但是当我们恢复图表时，我们应该显示那些未使用的空端点。我快速浏览了jsplumbtoolkit.com/doc/connect-examples，但没有找到任何帮助。

我没弄明白。 “显示那些未使用的空端点”是什么意思？我也使用 FlowChart，但只有 1 个端点，如果使用超过 1 个端点，我看不到问题。我正在使用 instance.makeSource(...) 和 instance.makeTarget(...) 重新创建我的组件，所以我将拥有一个带有 1 个端点的组件（如果有更多端点就不会有问题），然后我使用上面编写的代码设置连接

makeSource 和 makeTarget 工作正常，但是我们不能适当地拖动。无论如何，我能够找出解决方案，谢谢！

【参考方案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]
        ]];

  )
    );
);