vue2使用 antv x6 连线样式

圆滑曲线

• 将注册连接器的代码写在mounted()中
• 配置graph的连线方式为mindmap
• 注意前后顺序；先注册，后初始化graph;

// 注册连接器的代码
Graph.registerConnector(
  'mindmap',
  (sourcePoint, targetPoint, routerPoints, options) => {
    const midX = sourcePoint.x + 10
    const midY = sourcePoint.y
    const ctrX = (targetPoint.x - midX) / 5 + midX
    const ctrY = targetPoint.y
    const pathData = `
     M ${sourcePoint.x} ${sourcePoint.y}
     L ${midX} ${midY}
     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
    `
    return options.raw ? Path.parse(pathData) : pathData
  },
  true,
)

// 初始化graph的代码
 const graph = new Graph({
        container: document.getElementById('myDiagramDiv'),
        connecting: {
          // 边渲染到画布后的样式
          connector: 'mindmap'
        },
      })

      this.graph = graph

内置连线样式

// 初始化graph的代码
 const graph = new Graph({
        container: document.getElementById('myDiagramDiv'),
        connecting: {
          // 边渲染到画布后的样式
          connector: 'smooth'
        },
      })

      this.graph = graph