Cytoscape.js能否通过拖拽控制点交互修改unbundled-bezier曲线？

Cytoscape.js本身没有内置支持拖拽控制点修改unbundled-bezier曲线的功能，但你可以通过自定义交互逻辑实现仅调整单个控制点的distance和weight的需求，具体实现步骤如下：

• 添加可视化控制点：在unbundled-bezier曲线的对应控制点位置创建一个小节点作为可拖拽的交互载体，通过计算曲线控制点坐标来定位：

  // 假设edge为目标边，获取其unbundled-bezier参数
  const edgeStyle = edge.style();
  const distance = edgeStyle['curve-unbundled-bezier-distance'];
  const weight = edgeStyle['curve-unbundled-bezier-weight'];
  
  // 基于源节点和目标节点位置计算控制点坐标
  const sourcePos = edge.source().position();
  const targetPos = edge.target().position();
  const ctrlX = sourcePos.x + (targetPos.x - sourcePos.x) * weight + distance;
  const ctrlY = sourcePos.y + (targetPos.y - sourcePos.y) * weight;
  
  // 创建控制点节点
  cy.add({
    group: 'nodes',
    data: { id: `ctrl-${edge.id()}` },
    position: { x: ctrlX, y: ctrlY },
    style: {
      'width': 8,
      'height': 8,
      'background-color': '#ff4444',
      'z-index': 9999
    }
  });
  

• 绑定拖拽交互事件：给控制点节点绑定拖拽相关事件，在拖拽过程中实时更新对应边的distance和weight参数：

  const ctrlNode = cy.getElementById(`ctrl-${edge.id()}`);
  let initialDistance, initialWeight, initialSourcePos, initialTargetPos;
  
  ctrlNode.on('grab', () => {
    // 拖拽开始时记录初始参数与节点位置
    initialDistance = edge.style('curve-unbundled-bezier-distance');
    initialWeight = edge.style('curve-unbundled-bezier-weight');
    initialSourcePos = edge.source().position();
    initialTargetPos = edge.target().position();
  });
  
  ctrlNode.on('drag', (evt) => {
    const newPos = evt.target.position();
    const dx = initialTargetPos.x - initialSourcePos.x;
    const dy = initialTargetPos.y - initialSourcePos.y;
    const totalLength = Math.sqrt(dx*dx + dy*dy);
    
    // 计算新的weight和distance值
    const newWeight = ((newPos.x - initialSourcePos.x) * dx + (newPos.y - initialSourcePos.y) * dy) / (totalLength * totalLength);
    const newDistance = ((newPos.x - initialSourcePos.x) * dy - (newPos.y - initialSourcePos.y) * dx) / totalLength;
    
    // 更新边的曲线参数
    edge.style({
      'curve-unbundled-bezier-distance': newDistance,
      'curve-unbundled-bezier-weight': newWeight
    });
  });
  
  ctrlNode.on('free', () => {
    // 拖拽结束后可执行参数保存等收尾操作
  });
  

• 同步控制点位置：当边的源/目标节点移动时，同步更新控制点位置避免错位：

  cy.on('position', 'nodes', (evt) => {
    const node = evt.target;
    node.connectedEdges().forEach(edge => {
      const ctrlNode = cy.getElementById(`ctrl-${edge.id()}`);
      if(ctrlNode.length > 0){
        const distance = edge.style('curve-unbundled-bezier-distance');
        const weight = edge.style('curve-unbundled-bezier-weight');
        const sourcePos = edge.source().position();
        const targetPos = edge.target().position();
        const ctrlX = sourcePos.x + (targetPos.x - sourcePos.x) * weight + distance;
        const ctrlY = sourcePos.y + (targetPos.y - sourcePos.y) * weight;
        ctrlNode.position({x: ctrlX, y: ctrlY});
      }
    });
  });
  

• 优化交互体验：可给控制点添加hover高亮效果，或拖拽时临时调整边的样式，让交互更直观。

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