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

哈哈阅读：804 2021-03-31 23:04:45 评论：0

效果展示：

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

标签:java 编程语言

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。