如何根据不同节点展示不同的连线样式？

[LuoYuChenZhou]

我自定义了几个节点，有不同的shape。
有没有办法，通过shape，来控制用连接桩连出来的连线的样式？

目前，我是在 new Graph 创建图表对象是，通过 createEdge 属性控制线的样式的

  createEdge() {
    // 设定连接线的样式
    return this.createEdge({
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1.5,
        },
      },
    });
  },

但是，我不知道如何动态设置这个 stroke

[LuoYuChenZhou]

原来createEdge这个方法，可以拿到起点元素的样式呀。
代码我改成这样了，是可以做到想要的效果了

        createEdge(args) {
          console.log('args', args);

          // 设定连接线的样式
          return this.createEdge({
            attrs: {
              line: {
                stroke: args.sourceCell.shape === 'fieldDeclare' ? 'red' : '#8f8f8f',
                strokeWidth: 1.5,
              },
            },
          });
        },

不过，还有个小问题，这样的话，只能拿到起点的shape，终点的有办法拿到吗？

[LuoYuChenZhou]

找到另外个方法了，上面说的createEdge中，不设置特殊逻辑了，改成在连线的时候加监听实现了

    _graph.on('edge:connected', ({ edge, isNew }) => {
      // 判断连线的两个节点，是否都是主流程节点，如果是的话，就加上特定效果
      const sourceShape = edge.getSourceNode()?.shape || '';
      const targetShape = edge.getTargetNode()?.shape || '';

      if (flowNodeTypes.indexOf(sourceShape) > -1 && flowNodeTypes.indexOf(targetShape) > -1) {
        edge.attr('line/stroke', '#8f8f8f');
        edge.attr('line/strokeWidth', 2);
        edge.attr('line/style', {
          animation: 'ant-line 30s infinite linear',
        });
        edge.attr('line/strokeDasharray', 5);
      }
    });
  };