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

爱被打了一巴掌 2023-10-16 20:16 11阅读 0赞

效果展示：

![Center][]

相关源代码：

代码说明：相关注释已编写在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 开源框架文档资料正在整理之中

[Center]: https://img-blog.csdn.net/20140605102306562?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center