JTopo 框架教程之三:节点容器分析

阿里 阅读:160 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 开源框架文档资料正在整理之中

声明

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

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

一个IT知识分享的公众号