**灵活用心，突破图示常规：手摸手使用G6打造轻盈图编辑应用（系列五）**

优化一：多线时箭头会重叠，还会交叉

问题当图中存在多条连接同一对节点的线时，箭头可能会重叠，甚至交叉，这会让图看起来杂乱无章，难以理解。

优化思路：我们将所有起点和终点都设置为圆心，并利用边的角度来确定箭头的方向。这样，无论有多少条线连接同一对节点，箭头都不会重叠或交叉。

具体实现：

// 获取边的角度
const getEdgeAngle = (edge) => {
  const sourceNode = edge.getSource();
  const targetNode = edge.getTarget();

  const sourceX = sourceNode.getX();
  const sourceY = sourceNode.getY();

  const targetX = targetNode.getX();
  const targetY = targetNode.getY();

  const angle = Math.atan2(targetY - sourceY, targetX - sourceX);

  return angle;
};

// 设置箭头的方向
const setArrowDirection = (edge) => {
  const angle = getEdgeAngle(edge);

  const arrowShape = edge.get('arrowShape');
  arrowShape.set('d', `M 0,0 L 10,5 L 10,-5 Z`);
  arrowShape.rotate(angle);
};

优化二：线条粗细不一致

问题：当图中存在多条连接同一对节点的线时，线的粗细可能会不一致，这也会让图看起来杂乱无章，难以理解。

优化思路：我们将所有连接同一对节点的线的粗细都设置为相同的值。这样，无论有多少条线连接同一对节点，线的粗细都会一致。

具体实现：

// 设置线的粗细
const setEdgeWidth = (edge) => {
  edge.set('style', {
    lineWidth: 2,
  });
};

优化三：线条颜色不一致

问题：当图中存在多条连接同一对节点的线时，线的颜色可能会不一致，这也会让图看起来杂乱无章，难以理解。

优化思路：我们将所有连接同一对节点的线的颜色都设置为相同的值。这样，无论有多少条线连接同一对节点，线的颜色都会一致。

具体实现：

// 设置线的颜色
const setEdgeColor = (edge) => {
  edge.set('style', {
    stroke: '#000',
  });
};

结语

通过以上三个优化，我们的轻量级图编辑应用现在看起来更加整洁有序，也更容易理解了。希望这些优化能对你有所帮助，也希望你能继续关注这个系列教程的后续文章，我们将继续探索更多有用的技术，使我们的应用更加强大且用户友好。