请问下g6-editor中这个demo的折线是如何实现的，求教，谢谢

[frontHu]

[baizn]

https://www.yuque.com/antv/g6/self-edge

[frontHu]

https://www.yuque.com/antv/g6/self-edge

写不粗来呀，求个实现思路，哈哈@baizn

[baizn]

有两种方式来处理： 1、基于line来自定义边，不需要重新draw方法：

G6.registerEdge('line-arrow', {
      getPath(points) {
        const startPoint = points[0]
        const endPoint = points[1]
        return [
            ['M', startPoint.x, startPoint.y],
            ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y],
            ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y],
            ['L', endPoint.x, endPoint.y]
        ]
      },
      getShapeStyle(cfg) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;
        const controlPoints = this.getControlPoints(cfg);
        let points = [ startPoint ]; // 添加起始点
        // 添加控制点
        if (controlPoints) {
          points = points.concat(controlPoints);
        }
        // 添加结束点
        points.push(endPoint);
        const path = this.getPath(points);
        const style = G6.Util.mix({}, G6.Global.defaultEdge.style, {
          stroke: '#BBB',
          lineWidth: 1,
          path,
          startArrow: {
              path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
              d: 6
          },
          endArrow: {
              path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
              d: 6
          },
        }, cfg.style);
        return style;
      },
    }, 'line');

2、重新draw方法，不需要继承line：

G6.registerEdge('line-arrow', {
      draw(cfg, group) {
        const { startPoint, endPoint } = cfg
        const keyShape = group.addShape('path', {
          attrs: {
              path: [
                  ['M', startPoint.x, startPoint.y],
                  ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , startPoint.y],
                  ['L', endPoint.x / 3 + 2 / 3 * startPoint.x , endPoint.y],
                  ['L', endPoint.x, endPoint.y]
              ],
              stroke: '#BBB',
              lineWidth: 1,
              startArrow: {
                  path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
                  d: 6
              },
              endArrow: {
                  path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
                  d: 6
              },
              className: 'edge-shape'
          }
        });
        return keyShape
      }
    });

在线demo可参考 #814 .