如何在jsPlumb中固定Connector的连接位置？

初始状态下，Connector位于节点的BOTTOM位置；将节点向左移动后，Connector的位置自动变为LEFT。希望实现Connector始终固定在节点的BOTTOM位置。

初始连接位置示意图：

移动节点后的连接位置示意图：

根据你使用的图形/流程图库，可通过以下方式固定连接点位置：

核心思路 #

强制指定Connector的锚点为节点的底部位置，关闭自动锚点计算逻辑，让连接点始终绑定到节点的BOTTOM位置，不受节点移动或布局变化影响。

主流库的具体实现 #

（1）React Flow #

定义节点的连接点时，固定位置为底部，并在创建连接时指定该锚点：

const node = {
  id: '1',
  data: { label: 'My Node' },
  position: { x: 100, y: 100 },
  handles: [
    {
      type: 'target',
      position: 'bottom',
      id: 'bottom-handle'
    }
  ]
};

// 创建连接时指定目标锚点
const edge = {
  id: 'edge1',
  source: 'other-node-id',
  target: '1',
  targetHandle: 'bottom-handle'
};

（2）JointJS #

为节点设置固定底部锚点，禁用自动定位：

const rect = new joint.shapes.standard.Rectangle();
rect.position(100, 100);
rect.size(100, 50);
rect.attr('label/text', 'My Node');

// 绑定底部固定锚点
rect.portProp('port-bottom', {
  position: { name: 'bottom' },
  args: { y: 1 }
});

// 连接时指定该锚点
const link = new joint.shapes.standard.Link();
link.source(rect, { port: 'port-bottom' });
link.target(otherNode);

（3）mxGraph #

设置连接的锚点样式为固定底部：

const edge = graph.getEdgesBetween(targetNode, sourceNode)[0];
// 固定源节点锚点为底部
graph.setCellStyles(mxConstants.STYLE_SOURCE_ANCHOR, mxConstants.ANCHOR_BOTTOM, [edge]);
// 固定目标节点锚点为底部（如需）
graph.setCellStyles(mxConstants.STYLE_TARGET_ANCHOR, mxConstants.ANCHOR_BOTTOM, [edge]);

自定义图形场景 #

如果是自研图形系统，需在计算连接点坐标时，始终基于节点底部边界计算：

// 获取节点底部中点坐标
function getBottomAnchor(node) {
  return {
    x: node.x + node.width / 2,
    y: node.y + node.height
  };
}

// 更新连接位置时始终使用该坐标
function updateConnector(connector, node) {
  const anchor = getBottomAnchor(node);
  connector.startX = anchor.x;
  connector.startY = anchor.y;
}

内容的提问来源于stack exchange，提问作者Yorn Qiu