5.4 有边框的线条,线条过渡颜色,多种颜色填充线条

有边框的线条

<!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: double-edge ,
            //双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条

            //svg没有边框属性么???
            source: { x: 240, y: 40 },
            target: { x: 280, y: 180 },
            vertices:[
                {
                    x: 240, y: 140 
                }
            ],
            attrs:{
                line:{
                    stroke:"#52c41a",
                    strokeWidth:10,
                },
                outline:{
                    stroke:"#237804",
                    strokeWidth:12
                }
            }
        })

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

线条有过渡颜色

<!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: double-edge ,
            //双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条

            //svg没有边框属性么???
            source: { x: 240, y: 40 },
            target: { x: 280, y: 180 },
            vertices:[
                {
                    x: 240, y: 140 
                }
            ],
            attrs:{
                line:{
                    stroke:"#52c41a",
                    strokeWidth:10,
                },
                outline:{
                    stroke:"#237804",
                    strokeWidth:12
                }
            }
        })

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

多种颜色填充线条

<!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,  
        })
        
        graph.addEdge({
            //双边线也是同样的操作,并不是真的给一个线条加了边框,而是下面有一条

            //svg没有边框属性么???
            source: { x: 240, y: 40 },
            target: { x: 280, y: 180 },
            vertices:[
                {
                    x: 240, y: 140 
                }
            ],
            //开始新建线条,用上面的数据
            markup:[
                {
                    tagName: path ,
                    selector: wrap ,
                    groupSelector: lines ,
                },{
                    tagName: path ,
                    selector: line1 ,
                    groupSelector: lines 
                },{
                    tagName: path ,
                    selector: line2 ,
                    groupSelector: lines 
                }
            ],
            attrs:{
                lines:{
                    strokeDasharray: 10,20 ,
                    //strokeDashArray:这里为啥是小写了.我操
                    fill:"none",
                    connection:true,
                    strokeLinejoin: round 
                },
                //总的全部线条的属性.
                line1: {
                    stroke:  #fe854f ,
                    strokeWidth: 10,
                },
                line2:{
                    stroke: #eee ,
                    strokeWidth:10,
                    strokeDashoffset:10,
                }
            }
        })


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

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END