使用jsPlumb无法获取端点的UUID或标签，求技术解决方法

嘿，我之前用jsPlumb做流程图的时候也碰到过一模一样的困扰，给你分享几个实用的方法来拿到端点的标签和UUID：

方法一：通过节点获取所有端点后筛选 #

先拿到目标节点的所有端点，再遍历找到对应的Label类型Overlay，就能直接取出UUID和标签了：

// 获取指定节点的所有端点
const nodeEndpoints = jsPlumb.getEndpoints("name of node");

// 遍历每个端点
nodeEndpoints.forEach(endpoint => {
  // 遍历端点上的所有Overlay
  endpoint.overlays.forEach(overlay => {
    // 只筛选Label类型的Overlay
    if (overlay.type === "Label") {
      console.log("端点UUID:", overlay.options.uuid);
      console.log("端点标签:", overlay.options.label);
    }
  });
});

方法二：通过锚点精准定位端点 #

如果你记得端点设置的锚点参数，可以直接通过锚点匹配找到目标端点，再获取对应的Overlay：

const nodeEndpoints = jsPlumb.getEndpoints("name of node");

// 根据锚点参数找到目标端点
const targetEndpoint = nodeEndpoints.find(ep => {
  const anchorConfig = ep.getAnchor();
  // 匹配你设置的锚点[0,0.75,-1,0]
  return anchorConfig[0] === 0 && anchorConfig[1] === 0.75 && anchorConfig[2] === -1 && anchorConfig[3] === 0;
});

if (targetEndpoint) {
  // 找到该端点的Label Overlay
  const labelOverlay = targetEndpoint.overlays.find(ov => ov.type === "Label");
  if (labelOverlay) {
    console.log("目标端点UUID:", labelOverlay.options.uuid);
    console.log("目标端点标签:", labelOverlay.options.label);
  }
}

方法三：在连接事件中获取端点信息 #

如果是在创建连接时需要获取端点的标签/UUID，可以监听jsPlumb的connection事件，通过连接对象拿到源和目标端点：

jsPlumb.bind("connection", function(connectionInfo) {
  // 获取源端点的Label Overlay
  const sourceLabelOverlay = connectionInfo.sourceEndpoint.overlays.find(ov => ov.type === "Label");
  // 获取目标端点的Label Overlay
  const targetLabelOverlay = connectionInfo.targetEndpoint.overlays.find(ov => ov.type === "Label");

  if (sourceLabelOverlay) {
    console.log("源端点标签:", sourceLabelOverlay.options.label);
    console.log("源端点UUID:", sourceLabelOverlay.options.uuid);
  }
  if (targetLabelOverlay) {
    console.log("目标端点标签:", targetLabelOverlay.options.label);
    console.log("目标端点UUID:", targetLabelOverlay.options.uuid);
  }
});

这些方法应该能帮你顺利拿到想要的端点属性啦，要是还有特殊场景没覆盖到，可以再补充细节哦~

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