陈建华的博客
专注web开发
js画图开发库--mxgraph所有接口演示(详细带实例)
2014-06-09 09:59:49   阅读3033次


a55fc42f-bbd9-3c9c-a6df-3ccc53859a3e[1].png




<!Doctype html>  

<html xmlns=http://www.w3.org/1999/xhtml>  

    <head>  

    <meta http-equiv=Content-Type content="text/html;charset=utf-8">  

    <title>所有接口例子</title>  

    <!-- 字体大小风格 -->  

    <style type="text/css" media="screen">  

        BODY {  

            font-family: Arial;  

        }  

        H1 {  

            font-size: 18px;  

        }  

        H2 {  

            font-size: 16px;  

        }  

    </style>  

      

    <!-- 如果本文件的包与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, outline, toolbar, sidebar, status)  

        {  

            // 浏览器兼容检测  

            if (!mxClient.isBrowserSupported())  

            {  

                mxUtils.error('Browser is not supported!', 200, false);  

            }  

            else  

            {  

                // 定义全局变量,如。用于触发建立新的连接的活动区域的最小尺寸(以像素为单位),该部分(100%)的小区区域被用于触发新的连接,以及一些窗口和“下拉菜菜单选择  

                mxConstants.MIN_HOTSPOT_SIZE = 16;  

                mxConstants.DEFAULT_HOTSPOT = 1;  

                  

                // 显示导航线  

                mxGraphHandler.prototype.guidesEnabled = true;  

  

                // Alt 键禁用导航线  

                mxGuide.prototype.isEnabledForEvent = function(evt)  

                {  

                    return !mxEvent.isAltDown(evt);  

                };  

  

                // 自动导航目标  

                mxEdgeHandler.prototype.snapToTerminals = true;  

  

                // IE浏览器样式修复  

                if (mxClient.IS_QUIRKS)  

                {  

                    document.body.style.overflow = 'hidden';  

                    new mxDivResizer(container);  

                    new mxDivResizer(outline);  

                    new mxDivResizer(toolbar);  

                    new mxDivResizer(sidebar);  

                    new mxDivResizer(status);  

                }  

                  

                // 创建图形编辑器  

                var editor = new mxEditor();  

                var graph = editor.graph;  

                var model = graph.getModel();  

  

                // 启用高亮工具栏  

                graph.setDropEnabled(false);  

  

                // 连接预览  

                graph.connectionHandler.getConnectImage = function(state)  

                {  

                    return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);  

                };  

  

                // 显示中心端口图标  

                graph.connectionHandler.targetConnectImage = true;  

  

                // 禁止连接线晃动  

                graph.setAllowDanglingEdges(false);  

  

                //设置图形容器,并配置编辑器  

                editor.setGraphContainer(container);  

                var config = mxUtils.load(  

                    'editors/config/keyhandler-commons.xml').  

                        getDocumentElement();  

                editor.configure(config);  

                  

                // 设置默认组  

                // groupBorderSize 设置图形和它的子元素的边距。  

                var group = new mxCell('Group', new mxGeometry(), 'group');  

                group.setVertex(true);  

                group.setConnectable(false);  

                editor.defaultGroup = group;  

                editor.groupBorderSize = 20;  

  

                // 目标是否有效  

                graph.isValidDropTarget = function(cell, cells, evt)  

                {  

                    return this.isSwimlane(cell);  

                };  

                  

                // 是否根元素  

                graph.isValidRoot = function(cell)  

                {  

                    return this.isValidDropTarget(cell);  

                }  

  

                // 是否可以被选中  

                graph.isCellSelectable = function(cell)  

                {  

                    return !this.isCellLocked(cell);  

                };  

  

                // 返回元素  

                graph.getLabel = function(cell)  

                {  

                    var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"  

                      

                    if (this.isCellLocked(cell))  

                    {  

                        // 如元素被锁定 返回空标签  

                        return '';  

                    }  

                    else if (this.isCellCollapsed(cell))  

                    {  

                        var index = tmp.indexOf('</h1>');  

                          

                        if (index > 0)  

                        {  

                            tmp = tmp.substring(0, index+5);  

                        }  

                    }  

                      

                    return tmp;  

                }  

  

                // 禁用HTML的泳道标签,避免冲突  

                // 判断是否为泳道标签  

                graph.isHtmlLabel = function(cell)  

                {  

                    return !this.isSwimlane(cell);  

                }  

  

                // To disable the folding icon, use the following code:  

                /*graph.isCellFoldable = function(cell) 

                { 

                    return false; 

                }*/  

  

                // 双击显示模型窗口  

                graph.dblClick = function(evt, cell)  

                {  

                    // 如果不是双击事件,编辑器会自动处理  

                    if (this.isEnabled() &&  

                        !mxEvent.isConsumed(evt) &&  

                        cell != null &&  

                        this.isCellEditable(cell))  

                    {  

                        if (this.model.isEdge(cell) ||  

                            !this.isHtmlLabel(cell))  

                        {  

                            this.startEditingAtCell(cell);  

                        }  

                        else  

                        {  

                            var content = document.createElement('div');  

                            content.innerHTML = this.convertValueToString(cell);  

                            showModalWindow(this, 'Properties', content, 400, 300);  

                        }  

                    }  

  

                    // 禁用任何默认双击行为  

                    mxEvent.consume(evt);  

                };  

  

                // 启用新连接  

                graph.setConnectable(true);  

  

                // 配置样式  

                configureStylesheet(graph);  

  

                // 添加侧边栏图标  

                //  

           &￴�



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航