基於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;