F1V3.0-图形-绘图类库快速搭建一个页面绘图应用实例

来源：互联网发布：手机编程工具排行榜编辑：程序博客网时间：2024/05/17 23:36

一. 依赖项

jQuery2.2.4+
backbone1.3.3+
lodash3.10.1+
以上是图形类库第三方依赖库，已经集成到平台图形的三方包插件中，我们可以作为简单了解。

二. nginx配置

1. Nginx server节点需要配置引入以jQuery2.2.4编译打包的平台前端组件包、平台三方包，配置代码如下：

    ################# 组件包的引入（包括组件包和三方包,基于jQuery2.2.4打包）#################    # 平台前端组件包    location ^~ /public2/ {        alias $rootpath/public2_libraries/dist/;    }    ## 平台三方包    location ^~ /jquery2/ {        alias $rootpath/widget2_libraries/dist/;    }

2. 引入第三方依赖、图形类库:

    ##图形三方包依赖配置    location ^~ /graphplugins/ {        alias $gisrootpath/graphplugins_libraries/;    }    ##图形类库微服务    location ^~ /joint/ {        set $temple $extend;        alias $gisrootpath/graphjoint_bundle/$temple/;        if (!-e $request_filename) {               set $temple $switch;        }    }

三、在自己的html页面引入所需js文件

1. 设置页面静态化脚本

    <script type="text/javascript">         function getRootPath() {            var pathName = window.location.pathname.substring(1);            var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));            //return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';            return window.location.protocol + '//' + window.location.host + '/'+ webName+'/';        }        document.writeln("<base href='"+getRootPath()+"'/>");    </script>

2. 引入图形依赖的平台组件类库

    <link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">    <script type="text/javascript" src="/public2/dll.bundle.js"></script>    <script type="text/javascript" src="/jquery2/scripts/widget.bundle.js"></script>

3. 引入图形类库主加载js文件

    <script src="/joint/loader.js"></script>

4. html内容布局代码

    <body class="f1-layout">        <div class="stencil-container" region="west" style="width:170px; position:relative;" title="工具箱"></div>        <div class="paper-container" region="center" style="position:relative; overflow:hidden;">            <div class="toolbar-container" title="工具栏"></div>            <div class="navigator-container" style="position:absolute; right: 0px; bottom: 0px; z-index: 1000;" title="鹰眼导航"></div>        </div>    </body>

初始化时图形类库会根据class类名作为选择器，进行渲染容器的查找，不要对class类名进行修改，否则将会找不到渲染的容器对象。

5. 定义工具栏js配置文件

新建一个app-toolbar-cfg.js文件，添加如下代码，定义工具栏显示按钮：

var demoAppToolbarCfg = {};(function() {    'use strict';    demoAppToolbarCfg.toolbar1 = {        groups: {            'group1': { index: 1 },            'group2': { index: 2 },            'group3': { index: 3},            'group4': { index: 4 },            'group5': { index: 5 },            'group6': { index: 6 },            'group7': { index: 7 },            'group8': { index: 8},            'group9': { index: 9 },            'group10': { index: 10 }        },        tools: [            {                type: "save",                name: "btn-save",                group: "group1",                text: "保存",                iconCls: "icon-storage",                attrs: {                    button: {                        title: "保存"                    }                }            },            {                type: "load",                name: "btn-open",                group: "group1",                text: "打开",                iconCls: "icon-open",                attrs: {                    button: {                        'data-tooltip': '打开图形数据从服务端',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: 'separator',                group: 'group2'            },            {                type: 'undo',                name: 'undo',                group: 'group2',                text: "撤销",                iconCls: "icon-cancel",                attrs: {                    button: {                        'data-tooltip': '撤销',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },{                type: 'redo',                name: 'redo',                group: 'group2',                text: "重做",                iconCls: "icon-cw",                attrs: {                    button: {                        'data-tooltip': '重做',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },{                type: 'deletebutton',                name: 'btn-delete',                group: 'group2',                text: "删除",                iconCls: "icon-close",                attrs: {                    button: {                        'data-tooltip': '删除',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: 'separator',                group: 'group3'            },            {                type: 'zoom-to-fit',                name: 'zoom-to-fit',                group: 'group3',                text: "全图",                iconCls: "icon-gis-zoomto-extent",                attrs: {                    button: {                        'data-tooltip': '显示全部内容',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: 'zoom-in',                name: 'zoom-in',                group: 'group3',                text: "放大",                iconCls: "icon-zoom-in",                attrs: {                    button: {                        'data-tooltip': '放大画布',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: 'zoom-out',                name: 'zoom-out',                group: 'group3',                text: "缩小",                iconCls: "icon-zoom-out",                attrs: {                    button: {                        'data-tooltip': '缩小画布',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: 'separator',                group: 'group4'            },            {                type: "importData",                name: "btn-import",                group: "group4",                text: "导入",                iconCls: "icon-gis-import-svg",                attrs: {                    button: {                        'data-tooltip': '导入SVG文档',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "exportData",                name: "btn-export",                group: "group4",                text: "导出",                iconCls: "icon-gis-export-svg"            },            {                type: "separator",                group: "group5"            },            {                type: "setGraphLayerName",                name: "layer-name",                group: "group5",                text: "图层名称",                iconCls: "icon-gis-set-stationcode",                attrs: {                    button: {                        'data-tooltip': '设置图层名称',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "setPaperWidthAndHeight",                name: "btn-paper",                group: "group5",                text: "画布",                iconCls: "icon-gis-set-extentbounds"            },            {                type: "setPaperBackground",                name: "btn-paper-bg",                group: "group5",                text: "背景",                iconCls: "icon-book"            },            {                type: "separator",                group: "group6"            },            {                type: "aligncells",                f1type: "menubutton",                name: "align-menu",                group: "group6",                text: "对齐",                iconCls: "icon-gis-align-v",                data: [                    { id: 'top-align', text: '顶端对齐' },                    { id: 'left-align', text: '左对齐' },                    { id: 'right-align', text: '右对齐' },                    { id: 'bottom-align', text: '底端对齐' },                    "-",                    { id: 'h-center-align', text: '水平中心对齐', iconCls: "icon-gis-align-h" },                    { id: 'v-center-align', text: '垂直中心对齐', iconCls: "icon-gis-align-v" },                    { id: 'center-align', text: '中心对齐' },                    { id: 'size-align', text: '大小相同' }                ],                attrs: {                    button: {                        'data-tooltip': '对齐',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "separator",                group: "group7"            },            {                type: "styleDialog",                name: "btn-batch-style",                group: "group7",                text: "样式",                iconCls: "icon-gis-set-textstyle"            },            {                type: "voltageLevel",                name: "btn-voltage-level",                group: "group7",                text: "电压等级",                iconCls: "icon-stats",                attrs: {                    button: {                        'data-tooltip': '批量设置电压等级',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "setSwitchStatus",                name: "btn-switch-status",                group: "group7",                text: "开合状态",                iconCls: "icon-switch",                attrs: {                    button: {                        'data-tooltip': '设置开合状态',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "tofront",                name: "btn-to-front",                group: "group7",                text: "置于顶层",                iconCls: "icon-arrow-top",                attrs: {                    button: {                        'data-tooltip': '置于顶层',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "tofront",                name: "btn-to-front",                group: "group7",                text: "置于底层",                iconCls: "icon-arrow-bottom",                attrs: {                    button: {                        'data-tooltip': '置于顶层',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "separator",                group: "group8"            },            {                type: "clear",                name: "btn-clear",                group: "group8",                text: "清空",                iconCls: "icon-delete",                attrs: {                    button: {                        'data-tooltip': '清空画布内容',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "separator",                group: "group9"            },            {                type: "help",                name: "btn-help",                group: "group9",                text: "帮助",                iconCls: "icon-question"            },            {                type: "button",                name: "btn-onAdjustVertices",                group: "group9",                text: "多回线",                iconCls: "icon-question"            },            {                type: "button",                name: "btn-offAdjustVertices",                group: "group9",                text: "关闭多回线",                iconCls: "icon-question"            },            {                type: "checkConencted",                name: "btn-check-conencted",                group: "group9",                text: "连通性检查",                iconCls: "icon-gis-check-pointconnect",                attrs: {                    button: {                        'data-tooltip': '为提高准确性，请先保存数据，在执行检查',                        'data-tooltip-position': 'top',                        'data-tooltip-position-selector': '.toolbar-container'                    }                }            },            {                type: "loadOpenLayersLayers",                name: "btn-open-ol-layer-list",                group: "group9",                text: "打开OpenLayers图层",                iconCls: "icon-question"            },            {                type: "autoLayoutByCim",                name: "btn-auto-layout-cim",                group: "group9",                text: "CIM成图",                iconCls: "icon-question"            },            {                type: "autoLayoutByConfig",                name: "btn-auto-layout-config",                group: "group9",                text: "典型配置成图",                iconCls: "icon-question"            },            {                type: "button",                name: "btn-custom-test",                group: "group9",                text: "这是一个自定义按钮",                iconCls: "icon-question"            }        ]    };})();

这里列举了图形主要的功能按钮，有点多，开发时可以根据业务需要，定义自己所需要的按钮即可。

6. 添加初始化js代码

新建index.js文件，添加如下代码:

    $(function(){        // 定义应用app主视图        var app = new joint.app.MainView({            el: document.body,            f1toolbar: true,            toolbarCfg: demoAppToolbarCfg.toolbar1        });        //创建右键菜单        app.contextMenu = new joint.ui.F1ContextMenu({            menus: [                { id: 'menu_style_dialog', text: '设置样式', iconCls: "icon-gis-set-textstyle" },                { id: 'menu_voltage_level', text: '电压等级' },                { id: 'menu_switch_status', text: '开关状态', iconCls: "icon-switch" },                "-",                { id: 'menu_input_text', text: '输入文字' }            ]        });        //右键菜单的菜单项注册事件        app.contextMenu.on({            "action:menu_style_dialog": function(evt){            // 调用工具栏中按钮事件，key为定义工具栏按钮时配置的name值                app.toolbar["btn-batch-style_Widget"].pointerdown();            },            "action:menu_voltage_level": function(){                app.toolbar["btn-voltage-level_Widget"].pointerdown();            },            "action:menu_switch_status": function(){                app.toolbar["btn-switch-status_Widget"].pointerdown();            },            "action:menu_input_text": function(evt, cellView){                artDialog.prompt("标签文字", function(text){                    if(!text){text = ""}                    if(cellView.model.isElement() && _.startsWith(cellView.model.get("type"), "electricity.")                             && cellView.model.get("type")!="electricity.Busbar"){                        cellView.model.attr("text/ref-y", cellView.model.get("size").height+15);                    }                    cellView.model.attr("text/text", text);                }, cellView.model.attr("text/text"));            }        });        // 注册图形上下文菜单事件，右键单击图形时显示菜单        app.paper.on("cell:contextmenu", function(cellView, evt, x, y){            evt = joint.util.normalizeEvent(evt);            app.contextMenu.show({x: evt.clientX, y: evt.clientY, target: cellView, evt: evt});        });        /**         * 注册工具栏自定义按钮事件         */        var graph_filter = new joint.ui.Filter({graph: app.graph});        app.toolbar.on({            "action:btn-custom-test": function(){                alert("这是一个工具栏自定义按钮的事件");            }        });        // 根据图层Id，加载图形数据到画布中        var layerId = joint.util.getUrlParam("layerId") || "C72B8691-0910-0001-B218-5B1011A96290";        if(layerId){            app.serverManager.load(layerId);        }    });

7. 将工具栏配置、初始化图形设置警js文件引入html页面

    <script src="/joint/demo/apps/app-toolbar-cfg.js"></script>    <script src="/joint/demo/apps/index.js"></script>

完整的html页面如下：

    <!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title>jointJS Application Demo</title>            <script type="text/javascript">                function getRootPath() {                   var pathName = window.location.pathname.substring(1);                   var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));                   //return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';                   return window.location.protocol + '//' + window.location.host + '/'+ webName+'/';               }               document.writeln("<base href='"+getRootPath()+"'/>");            </script>            <link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">            <script type="text/javascript" src="/public2/dll.bundle.js"></script>            <script type="text/javascript" src="/jquery2/scripts/widget.bundle.js"></script>            <script src="/joint/loader.js"></script>            <script src="/joint/demo/apps/app-toolbar-cfg.js"></script>            <script src="/joint/demo/apps/index.js"></script>        </head>        <body class="f1-layout">            <div class="stencil-container" region="west" style="width:170px; position:relative;" title="工具箱"></div>            <div class="paper-container" region="center" style="position:relative; overflow:hidden;">                <div class="toolbar-container" ></div>                <div class="navigator-container" style="position:absolute; right: 0px; bottom: 0px; z-index: 1000;"></div>            </div>        </body>    </html>

这样就快速定义好了一个在线版的图形app应用页面，接下来您可以扩展自己需要的功能到应用页面中。

阅读全文

0 0