不甘于平庸：如何巧用g6流程图锚点anchor？

导语

在使用g6绘制流程图时，锚点anchor作为节点的关键元素，在连接线绘制中发挥着重要的作用。但g6中锚点默认的逼近策略会导致两节点连线最近距离进行绘制。这种策略虽然合理，但有时会与我们的实际需求相悖，比如当我们想要让锚点固定住，以便实现自定义节点时。

锚点的固定

为了让锚点固定住，我们需要避开g6的默认逼近策略。我们可以通过重写锚点anchor的逼近策略来实现这一目的。具体做法如下：

1. 在g6的配置项中，找到锚点anchor的配置项。

2. 将锚点anchor的逼近策略设置为null。

3. 保存配置项，即可完成锚点的固定。

自定义节点的实现

当锚点固定住后，我们就可以实现自定义节点了。自定义节点是指根据自己的需求，创建出符合特定业务场景的节点。

1. 创建一个新的节点类，并继承自g6的节点基类。

2. 在新节点类的构造函数中，调用父类的构造函数，并传入必要的参数。

3. 在新节点类的draw方法中，重写节点的绘制逻辑，实现自定义节点的绘制。

4. 保存节点类，即可完成自定义节点的创建。

实例演示

下面是一个使用g6实现的自定义节点实例。这个自定义节点是一个圆形节点，其中包含一个文本标签。

class CustomNode extends g6.Node {
  constructor(cfg) {
    super(cfg);
    this.initShape();
    this.initLabel();
  }

  initShape() {
    this.shape = new g6.Shape.Circle({
      style: {
        x: this.attr('x'),
        y: this.attr('y'),
        r: 20,
        fill: '#ffffff',
        stroke: '#000000',
        lineWidth: 1
      }
    });
    this.addShape(this.shape);
  }

  initLabel() {
    this.label = new g6.Text({
      style: {
        x: this.attr('x'),
        y: this.attr('y'),
        text: this.attr('label'),
        fill: '#000000',
        fontSize: 12,
        textAlign: 'center',
        textBaseline: 'middle'
      }
    });
    this.addShape(this.label);
  }
}

// 使用自定义节点
const graph = new g6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});

graph.addNode(new CustomNode({
  id: 'node1',
  x: 100,
  y: 100,
  label: 'Node 1'
}));

graph.render();

结语

通过重写锚点anchor的逼近策略，我们可以实现锚点的固定。当锚点固定住后，我们就可以实现自定义节点了。自定义节点可以根据自己的需求，创建出符合特定业务场景的节点。这极大地提高了g6流程图的可定制性和灵活性，使其能够满足更多用户的需求。