基于Web实现在线绘画拓扑图[GraphEditor]
网络拓扑图本来已经整理有一段时间了，一次项目会议写集中边界监控系统的时候上级要求使用可以在系统中画网络拓扑图，没办法当时找不到现有的程序来参考 只能硬着头皮，顶着风险来完成[当然来边界安全的，当然要安全型高啊]，一同事找到一些源码来分析，当然了有源码分析比自己想的效率要快得多 但是也很让人头痛，怎样才能实现，怎样才能嵌入到Web项目中？ 这个集控那个项目已近完成有一段时间了，最近呢一些网友要借鉴我修改后的代码，和一些效果我最近整理了一份但是当时由于比较忙，没有发到博客中 去！只是写了一个简单的Demo供参考和利用，由于最近又有一些朋友也来问这个问题，为了方便与资源共享，我还是整理了这边文章，和网络拓扑的运用，当然 技术肯定还有更加优化好的控件，有的话希望共同学习！ 下面是我编写的一个简单的Demo
这是简单画的一个拓扑图：
这是简单的绘画界面，Tab切换后是快捷键保存的后的模板[类似图表，也可以编辑]，在这里就先不演示了
当然如果需要，请加入群直接下载分享文件[完整的Demo]
下面来详解下文件的配置，和代码分析
首先来看下web.xml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
3 <display-name></display-name>
4 <servlet>
5 <description>This is the description of my J2EE component</description>
6 <display-name>This is the display name of my J2EE component</display-name>
7 <servlet-name>SaveToXmlServlet</servlet-name>
8 <servlet-class>grapheditor.SaveToXmlServlet</servlet-class>
9 </servlet>
10 <servlet-mapping>
11 <servlet-name>SaveToXmlServlet</servlet-name>
12 <url-pattern>/SaveToXmlServlet</url-pattern>
13 </servlet-mapping>
14 <welcome-file-list>
15 <welcome-file>graph.jsp</welcome-file>
16 </welcome-file-list>
17 </web-app>
配置不多，相信熟练Web的开发的这个就不用解释了，一看便能理解其中的配置，这里就不详细介绍了
接着我们来编写JSP页面，这里为了方便看和传输数据，我JS接直接放到一起了
1 <%@ page language="java" %>
2 <%@ page contentType="text/html; charset=utf-8"%>
3 <%String path =request.getContextPath();%>
4 <head>
5 <head>
6 <title>Graph Editor</title>
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8 <script type="text/javascript" src="../../../../js/default/jquery-1.6.2.js"></script>
9 <script type="text/javascript" src="../../../../js/default/jquery-ui-1.8.16.custom.min.js"></script>
10 <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
11 <script type="text/javascript">
12 //全局变量
13 var MAX_REQUEST_SIZE = 10485760;
14 var MAX_WIDTH = 6000;
15 var MAX_HEIGHT = 6000;
16
17 //保存地址或导入地址
18 var EXPORT_URL = '/visecMc/ExportServlet';
19 var SAVE_URL = '/visecMc/SaveMapServlet';
20 var OPEN_URL = '/open';
21 var RESOURCES_PATH = 'resources';
22 var RESOURCE_BASE = RESOURCES_PATH + '/grapheditor';
23 var STENCIL_PATH = 'stencils';
24 var IMAGE_PATH = 'images';
25 var STYLE_PATH = 'styles';
26 var CSS_PATH = 'styles';
27 var OPEN_FORM = 'open.html';
28
29 //指定连接模式为触摸设备(至少有一个应该是正确的)
30 var tapAndHoldStartsConnection = true;
31 var showConnectorImg = true;
32
33 // 解析URL参数。支持参数:
34 // - lang = xy:指定用户界面的语言。
35 // - 触摸= 1:使touch-style用户界面。
36 // - 存储=当地:支持HTML5本地存储。
37 var urlParams = (function(url)
38 {
39 var result = new Object();
40 var idx = url.lastIndexOf('?');
41
42 if (idx > 0)
43 {
44 var params = url.substring(idx + 1).split('&');
45
46 for (var i = 0; i < params.length; i++)
47 {
48 idx = params[i].indexOf('=');
49
50 if (idx > 0)
51 {
52 result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
53 }
54 }
55 }
56
57 return result;
58 })(window.location.href);
59
60 // 设置用户界面语言的基本路径,通过URL参数和配置
61 // 支持的语言,以避免404年代。装运的所有核心语言
62 // 资源是禁用grapheditor所需的所有资源。
63 // 属性。注意,在这个例子中两个资源的加载
64 // 文件(特殊包,默认包)是禁用的
65 // 保存一个GET请求。这就要求所有资源存在
66 // 每个属性文件,因为只有一个文件被加载。
67 mxLoadResources = false;
68 mxBasePath =