F1V3.0-图形-绘图类库快速搭建一个页面绘图应用实例
2017-07-03 18:35
465 查看
一. 依赖项
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 },
'gr
4000
oup7': { 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应用页面，接下来您可以扩展自己需要的功能到应用页面中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- F1V3.0-图形-前端如何快速搭建一个地图相关的应用
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实例一个模块（商品字典）
- 采用CakePHP框架为Android应用快速搭建Web Service服务器及API接口的PHP代码实例
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实例一个模块（商品字典）
- 使用Express框架应用生成器快速搭建一个应用骨架
- 【SpringBoot】2.快速搭建一个SpringBoot应用
- H5页面快速搭建之高级字体应用实践
- 分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js
- 通过Z-BlogPHP程序快速在论坛里搭建一个博客页面
- MVC3快速搭建Web应用实例篇
- 用Go+Vue.js快速搭建一个Web应用(初级demo)
- Silverlight 第一步 快速的掌握页面布局，做一个博客的布局实例
- 分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js
- 让你快速搭建一个bootstrap页面
- H5页面快速搭建之高级字体应用实践
- Spring Boot 搭建应用实现登陆实例，页面使用bootstrap
- H5页面快速搭建之高级字体应用实践
- [转]MVC3快速搭建Web应用(三)实例篇
- MVC3快速搭建Web应用(三)实例篇
- 分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envisio...