基于Web实如今线绘画拓扑图[GraphEditor]
网络拓扑图原本已经整理有一段时间了，一次项目会议写集中边界监控系统的时候上级要求使用能够在系统中画网络拓扑图，没办法当时找不到现有的程序来参考 只能硬着头皮，顶着风险来完成[固然来边界安全的，固然要安全型高啊]，一同事找到一些源码来分析，固然了有源码分析比本身想的效率要快得多 可是也很让人头痛，怎样才能实现，怎样才能嵌入到Web项目中？ 这个集控那个项目已近完成有一段时间了，最近呢一些网友要借鉴我修改后的代码，和一些效果我最近整理了一份可是当时因为比较忙，没有发到博客中 去！只是写了一个简单的Demo供参考和利用，因为最近又有一些朋友也来问这个问题，为了方便与资源共享，我仍是整理了这边文章，和网络拓扑的运用，固然 技术确定还有更加优化好的控件，有的话但愿共同窗习！ 下面是我编写的一个简单的Demojavascript
这是简单画的一个拓扑图：css
这是简单的绘画界面，Tab切换后是快捷键保存的后的模板[相似图表，也能够编辑]，在这里就先不演示了html
固然若是须要，请加入群直接下载分享文件[完整的Demo]java
下面来详解下文件的配置，和代码分析jquery
首先来看下web.xmlweb
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接直接放到一块儿了windows
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;