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

来源：互联网发布：win10系统优化设置编辑：程序博客网时间：2024/04/29 15:52

效果展示：

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文档，作者正在更新，先阶段无法解析相关对象方法。

0 0