JTopo 框架教程之二：节点连线

迷南。 2023-10-16 20:14 10阅读 0赞

效果展示：

![Center][]

JTopo 框架学习案列之二：节点连线

相关说明：相关注释已经标注在代码中。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JTopo 教程之连线</title>
        <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
        <script src="js/jtopo-0.4.2-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //画布对象：canvas
                var canvas = document.getElementById('canvas');
                //抽象的舞台对象对应一个Canvas对象，所有图形展示的地方
                var stage = new JTopo.Stage(canvas);
                //场景对象
                var scene = new JTopo.Scene(stage);
                //背景颜色设置
                scene.background='#CDC5BF';
                //节点之间------------连线
                var vm= new JTopo.Node('vm');  //节点1：vm
                vm.setLocation(100,180);//节点1：vm位置设置
                scene.add(vm);//场景对象添加节点1：vm
    
                var physical=new JTopo.Node('physical');//节点2：physical
                physical.setLocation(100,20);//节点2:physical 位置设置
                scene.add(physical);//场景对象添加节点2：physical
    
                var link=new JTopo.Link(vm,physical);//连线对象
                link.lineWidth = 3;//连线大小
                link.lineJoin  = 'round';
                link.name='Link';//连线名称
                scene.add(link);//场景对象添加连线对象：link.
            });
        </script>
    </head>
    <body>
    <canvas id="canvas" width="300" height="200"></canvas>
    </body>
    </html>

补充说明：JTopo 开源框架的API文档，作者正在更新，先阶段无法解析相关对象方法。

[Center]: https://img-blog.csdn.net/20140604163805671?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center