欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

antv g6自定义边

程序员文章站 2022-04-21 22:18:02
...

需求:基于antv g6 3.6.0 开发流程图的编辑器 需要自定义边
具体自定义边的代码 大家可以去官网看 这里主要说一下 二次贝赛尔曲线画折线
参数:M 是从哪开始画 L 画到具体的某个点

    //直角的折线
    let path = [
        ['M', startPoint.x, startPoint.y],
        ['L', startPoint.x, endPoint.y],
        ['L', endPoint.x, endPoint.y],
      ];
    let 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],
      ];
   //曲线 
   let hgap = Math.abs(end.x - start.x)
   let path = [
      ['M', start.x, start.y],
       [
         'C',
         start.x,
         start.y + hgap / (hgap / 50),
         end.x,
         end.y - hgap / (hgap / 50),
         end.x,
         end.y - 4
       ],
       [
         'L',
         end.x,
         end.y
       ]
     ]
相关标签: antv g6