简介

<!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>
    <!-- 有阴影的线条 -->
</head>
<body>
    <h3>基本图形和属性</h3>
    <div id="container">

    </div>
    <script>
        const graph=new X6.Graph({
            container:document.getElementById('container'),
            width:800,
            height:600,
            grid:true,  
        })
        
        graph.addEdge({
            shape:'shadow-edge',
            //这竟然是一个特殊的类型
            source: { x: 240, y: 40 },
            target: { x: 280, y: 180 },
            vertices:[
                {
                    x: 240, y: 140 
                }
            ],
            //定义他的阴影
            attrs:{
                shadow:{
                    refX:-5,
                    //影子和本体x方向的偏移,
                    refY:60,
                    //影子和本体y方向的偏移
                    strokeWidth:1,
                },
                line:{
                    stroke:"#52c41a",
                    strokeWidth:1,
                    //本体的线宽度变了,影子也不会变化,还没有做限制.包括箭头啥的,也就是说可以把他看成是完全不同的两条线,或者说其实可以不用这个shape类型,我可以自己弄两条线,我擦,那这个可以不用看了.并没有什么高端操作
                    targetMarker:{
                        tagName:"path",
                        stroke:'none',
                        d:'M 0 -6 -6 0 0 6 z',
                    },
                    sourceMarker:{
                        tagName:"path",
                        stroke:'none',
                        d:'M 0 -6 -6 0 0 6 z'
                    }
                }
            }
        })

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