jsPlumb 流程图连接器布局方向更改为 5 倍答案

【问题标题】：jsPlumb flowchart connector layout direction change in 5xjsPlumb 流程图连接器布局方向更改为 5 倍
【发布时间】：2021-09-08 08:41:19
【问题描述】：

我将 jsPlumb 5x 用于流程图应用程序。使用的包是@jsplumb/connector-flowchart 和@jsplumb/browser-ui。我决定使用流程图连接器。我找不到更改连接器布局的方法。

有什么办法可以改变样式，让新的布局看起来像上面那样？

当前连接器布局：

目前，我在instance.connect 方法as described here 中定义连接器：

connector: {
          type: FlowchartConnector.type,
          options: {
            stub: [10, 20],
            gap: 1,
            cornerRadius: 2,
            alwaysRespectStubs: true
          }
        },

布局在 jsPlumb 2x 上按预期工作，代码如下：

connector: ["Flowchart", {
          stub: [10, 20],
          gap: 1,
          cornerRadius: 2,
          alwaysRespectStubs: true
        }],

有没有办法改变 5x 上的流程图连接器布局？

【问题讨论】：

标签： jsplumb

【解决方案1】：

我认为这里的问题可能是您正在使用的锚点 - 看起来您的边缘不会从 Bottom 边缘变为 Top 边缘。

您可以在此页面上阅读锚点：https://docs.jsplumbtoolkit.com/community/lib/anchors

要指定 Top 和 Bottom，您可以在默认值中提供这些值：

https://docs.jsplumbtoolkit.com/community/lib/defaults

或在connect 电话中。

在从 2.x 迁移到 5.x 的过程中，您可能在某处获得了 Anchor 或 Anchors 默认值，但请注意，现在 5.x 中的所有默认值都是小写：anchor /anchors等

【讨论】：