antv x6，可以拖动开始节点或结束节点，来改变edge边的长度

Question

antv x6，针对在画布上已渲染好的边，怎么设置，可以拖动开始节点或结束节点，来改变edge边的长度

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

在 antv X6 中，可以使用边（edge）的终止装饰符（targetMarker）和源装饰符（sourceMarker）以及箭头（arrowhead）的选项来实现拖动开始节点或结束节点来改变边的长度。你可以通过以下步骤来设置：

1. 定义并渲染边：

const graph = new G6.Graph({
  container: 'container',
  ... // 其他配置项
});

const edge = graph.addItem('edge', {
  shape: 'cubic',
  source: 'node1',
  target: 'node2',
  // 其他边的属性
});

1. 设置边的终止装饰符（targetMarker）和源装饰符（sourceMarker）以及箭头（arrowhead）的选项，其中 controlPoints 属性用于控制边的长度：

edge.setEdgeState('selected', true); // 选中边，方便拖动节点来改变长度
edge.attr('sourceMarker', {
  ... // 源装饰符的选项
});
edge.attr('targetMarker', {
  ... // 终止装饰符的选项
});
edge.attr('arrowhead', {
  ... // 箭头的选项
});

在上述代码中，你需要通过设置源装饰符（sourceMarker）和终止装饰符（targetMarker）的选项来定义边的起点和终点，并通过 arrowhead 属性来设置箭头的样式。

1. 监听节点的拖动事件，通过更新边的源节点和目标节点的位置来改变边的长度：

graph.on('node:dragstart', (e) => {
  // 记录开始节点和结束节点的位置
  const { item } = e;
  const { source, target, model } = edge.getModel();
  if (item.getID() === source) {
    // 拖动开始节点
    edge.update({
      source: item.get('id'),
      sourceAnchor: model.targetAnchor,
      controlPoints: [], // 清空控制点，保持边的形状不变
    });
  } else if (item.getID() === target) {
    // 拖动结束节点
    edge.update({
      target: item.get('id'),
      targetAnchor: model.sourceAnchor,
      controlPoints: [],
    });
  }
});

graph.on('node:drag', (e) => {
  // 更新边的源节点和目标节点的位置
  const { item } = e;
  const { source, target, model } = edge.getModel();
  if (item.getID() === source) {
    edge.update({
      sourceAnchor: model.targetAnchor,
    });
  } else if (item.getID() === target) {
    edge.update({
      targetAnchor: model.sourceAnchor,
    });
  }
});

通过上述步骤，你可以通过拖动开始节点或结束节点来改变边的长度。请替换代码中的相关参数和选项以满足你的需求。