zoukankan      html  css  js  c++  java
  • [转] js画图开发库--mxgraph--[graphlayout-图形布局.html]

    【From】 http://chwshuang.iteye.com/blog/1797740

    布局变化,下方还有动画效果选项:

    <!Doctype html>  
    <html xmlns=http://www.w3.org/1999/xhtml>  
        <head>  
        <meta http-equiv=Content-Type content="text/html;charset=utf-8">  
        <title>图形布局</title>  
      
        <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->  
        <script type="text/javascript">  
            mxBasePath = '../src';  
        </script>  
      
        <!-- 引入支持库文件 -->  
        <script type="text/javascript" src="../src/js/mxClient.js"></script>  
        <!-- 示例代码 -->  
        <script type="text/javascript">  
      
            // 程序在此启动  
            function main(container)  
            {  
                // 检测浏览器兼容性  
                if (!mxClient.isBrowserSupported())  
                {  
                    mxUtils.error('Browser is not supported!', 200, false);  
                }  
                else  
                {  
                    // 在容器中创建图形  
                    var graph = new mxGraph(container);  
                      
                    // 禁用选择和单元格处理  
                    graph.setEnabled(false);  
                      
                    // 更改点风格的样式  
                    var style = graph.getStylesheet().getDefaultVertexStyle();  
                    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;  
                    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;  
                    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';  
                    style[mxConstants.STYLE_FONTSIZE] = '10';  
                                      
                    // 设置容器随内容自适应  
                    //graph.setResizeContainer(true);  
                      
                    // 设置图大小  
                    graph.gridSize = 40;  
                      
                    // 创建默认窗体  
                    var parent = graph.getDefaultParent();  
      
                    // 创建新的布局算法  
                    var layout = new mxFastOrganicLayout(graph);  
      
                    // 移动距离  
                    layout.forceConstant = 80;  
      
                    // 动画效果选项  
                    var animate = document.getElementById('animate');  
                      
                    // 添加按钮来更新布局  
                    document.body.insertBefore(mxUtils.button('圆形布局Circle Layout',  
                        function(evt)  
                        {  
                            graph.getModel().beginUpdate();  
                            try  
                            {  
                                // 创建圆形布局算法  
                                var circleLayout = new mxCircleLayout(graph);  
                                circleLayout.execute(parent);  
                            }  
                            catch (e)  
                            {  
                                throw e;  
                            }  
                            finally  
                            {  
                                if (animate.checked)  
                                {  
                                    var morph = new mxMorphing(graph);  
                                    morph.addListener(mxEvent.DONE, function()  
                                    {  
                                        graph.getModel().endUpdate();  
                                    });  
                                      
                                    morph.startAnimation();  
                                }  
                                else  
                                {  
                                    graph.getModel().endUpdate();  
                                }  
                            }  
                        }  
                    ), document.body.firstChild);  
                                                      
                    //  添加按钮来更新布局  
                    document.body.insertBefore(mxUtils.button('随机布局Organic Layout',  
                        function(evt)  
                        {  
                            graph.getModel().beginUpdate();  
                            try  
                            {  
                                layout.execute(parent);  
                            }  
                            catch (e)  
                            {  
                                throw e;  
                            }  
                            finally  
                            {  
                                if (animate.checked)  
                                {  
                                    //默认值是 6, 1.5, 20  
                                    var morph = new mxMorphing(graph, 10, 1.7, 20);  
                                    morph.addListener(mxEvent.DONE, function()  
                                    {  
                                        graph.getModel().endUpdate();  
                                    });  
                                    morph.startAnimation();  
                                }  
                                else  
                                {  
                                    graph.getModel().endUpdate();  
                                }  
                            }  
                        }  
                    ), document.body.firstChild);  
      
                    // 开启更新事务  
                    graph.getModel().beginUpdate();  
                    var w = 30;  
                    var h = 30;  
                    try  
                    {  
                        var v1 = graph.insertVertex(parent, null, 'A', 0, 0, w, h);  
                        var v2 = graph.insertVertex(parent, null, 'B', 0, 0, w, h);  
                        var v3 = graph.insertVertex(parent, null, 'C', 0, 0, w, h);  
                        var v4 = graph.insertVertex(parent, null, 'D', 0, 0, w, h);  
                        var v5 = graph.insertVertex(parent, null, 'E', 0, 0, w, h);  
                        var v6 = graph.insertVertex(parent, null, 'F', 0, 0, w, h);  
                        var v7 = graph.insertVertex(parent, null, 'G', 0, 0, w, h);  
                        var v8 = graph.insertVertex(parent, null, 'H', 0, 0, w, h);  
                        var e1 = graph.insertEdge(parent, null, 'ab', v1, v2);  
                        var e2 = graph.insertEdge(parent, null, 'ac', v1, v3);  
                        var e3 = graph.insertEdge(parent, null, 'cd', v3, v4);  
                        var e4 = graph.insertEdge(parent, null, 'be', v2, v5);  
                        var e5 = graph.insertEdge(parent, null, 'cf', v3, v6);  
                        var e6 = graph.insertEdge(parent, null, 'ag', v1, v7);  
                        var e7 = graph.insertEdge(parent, null, 'gh', v7, v8);  
                        var e8 = graph.insertEdge(parent, null, 'gc', v7, v3);  
                        var e9 = graph.insertEdge(parent, null, 'gd', v7, v4);  
                        var e10 = graph.insertEdge(parent, null, 'eh', v5, v8);  
                          
                        // 执行更改  
                        layout.execute(parent);  
                    }  
                    finally  
                    {  
                        // 结束更新事务  
                        graph.getModel().endUpdate();  
                    }  
                }  
            };  
        </script>  
    </head>  
      
    <!-- 页面载入时启动程序 -->  
    <body onload="main(document.getElementById('graphContainer'))">  
      
        <!-- 创建带网格壁纸和曲线的一个容器,请一定要定义的position和overflow的属性!根据在线API的54 页内容增加的大小侦听器  -->  
        <div id="graphContainer"  
            style="position:relative;overflow:visible;821px;height:641px;background:url('editors/images/grid.gif');">  
        </div>  
        <br>  
        <input type="checkbox" id="animate" checked="checked"/> Transitions  
    </body>  
    </html>  
  • 相关阅读:
    Vue:不同页面之间的传递参数(二)---query
    Vue:不同页面之间的传递参数--params
    Vue:将px转化为rem,适配移动端
    CSS变量:声明全局变量,让编写更快捷 --root
    前端:viewport-fit解决iphoneX的“刘海”问题
    css小技巧---:not()
    分析Array.apply(null, { length: 5 })
    对比jquery获取属性的方法props、attr、data
    在浏览器里点击input输入框输入,会展示默认的历史下拉菜单
    记录下 Markdown 语法
  • 原文地址:https://www.cnblogs.com/pekkle/p/9937822.html
Copyright © 2011-2022 走看看