JTopo 框架教程之二:节点连线分析

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

声明

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

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号