JTopo 框架教程之三：节点容器

阿里阅读：564 2021-03-31 23:04:35 评论：0

效果展示：

相关源代码：

代码说明：相关注释已编写在js代码之中。

<!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 container = new JTopo.Container(); 
            // 流式布局（水平、垂直间隔均为10) 
           var flowLayout = JTopo.Layout.FlowLayout(20, 35); 
            //容器布局样式----流式布局 
            container.layout = flowLayout; 
            container.width=400; 
            container.height=130; 
            //容器范围设置 
           container.setBound(10, 10, 300,120); 
            for(var i=0; i<12; i++){ 
                var node = new JTopo.Node("Port" + i); 
                scene.add(node); 
                container.add(node); 
            } 
            scene.add(container); 
        }); 
    </script> 
</head> 
<body> 
<canvas id="canvas" width="600" height="400"></canvas> 
</body> 
</html>

补充说明：JTopo 开源框架文档资料正在整理之中