简介

1 .老实说,现在的效果有点蠢,有点类似于手写html的效果,线段长的时候,怎么做到自动适配填充图形,现在定死了是3个,想要多做只能多写
2 .不过,这种的,2个图形可以做箭头函数,如果targetMarker不认识的话,可以这样操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script> -->
    <!-- 实在调试不出来,那就换最新的版本试试 -->
    <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
    <!-- 线条过渡样式 -->
    <!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
    <h3>基本图形和属性</h3>
    <div id="container">

    </div>
    <script>
        const graph=new X6.Graph({
            container:document.getElementById('container'),
            width:800,
            height:600,
            grid:true,  
        })
        
       //自定义带箭头的线条类型,线条是无限长的,随着线条变成,箭头也会不停延展变多的情况,好吧,我把它想的太聪明了,这个也是很蠢的,那就不行了,还是要js判断线段的长度,然后动态加
       X6.Graph.registerEdge(
           'arrow',
           {
            markup:[
                {
                    tagName:'path',
                    selector:"wrap",
                    attrs:{
                        fill:'none',
                        cursor:'pointer',
                        stroke:'transport'
                    }
                },
                {
                    tagName:'path',
                    selector:'line',
                    attrs:{
                        fill:"none",
                        'pointer-events':'none'
                    }
                },
                {
                    tagName:'path',
                    selector:"arrow1",
                    groupSelector:'arrow'
                },{
                    tagName:'path',
                    selector:'arrow2',
                    groupSelector:"arrow"
                }
            ],
            attrs:{
                wrap:{
                    connection:true,
                    strokeWidth:10,
                    strokeLinejoin:'round',
                },
                line:{
                    connection:true,
                    stroke:"#333",
                    strokeWidth:2,
                    strokeLinejoin:'round',
                    targetMarker:'classic'
                },
                arrow:{
                    d:'M 0 -10 10 0 0 10 z',
                    fill:"#fff",
                    stroke:'#333',
                    pointerEvents:'none'
                },
                arrow1:{
                    atConnectionRatio:0.25,
                    //将边中的指定元素移动到指定比例 [0, 1] 位置处，并自动旋转元素.这个箭头会在总线段长度1/4的位置
                },
                arrow2:{
                    atConnectionRatio:0.75
                }
            }
           },
           true
       )
    
       graph.addEdge({
           source:{x:320,y:100},
           target:{x:300,y:260},
           vertices:[{x:320,y:200}],
           shape:'arrow',
           attrs:{
                line:{
                    stroke:'#73d13d',
                    strokeWidth:3,
                },
                arrow:{
                    fill:"#ED8A19",
                    stroke:"#eee"
                }
           }

       })


        
    </script>
</body>
</html>