mxGraph API
阿新 • • 發佈:2018-11-17
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
簡介
這個js類庫被分成了8個包。 最上層的mxClient類包括或者動態匯入了其他的包。當前的版本儲存在maxClient.VERSION中。
editor包提供了圖表編輯器相關的類實現。入口函式式mxEditor。
view和model包實現了圖表元件。他引用的mxGraphModel包含了mxCells和快取了mxGraphView中的cells的狀態。mxCellRender基於mxStylesheet中的定義來渲染cells的外觀。mxUndoManager實現了撤銷歷史功能。如果要在graph中顯示一個圖示,可以使用mxCellOverlay。mxUtilplicity定義了校驗規則。
handler,layout和shape包分別包含了事件處理,佈局運算,以及形狀。graph的事件監聽包括mxRubberhand(rubberhand選定)、工具提示mxTooltipHandler和基本cell修改處理mxGraphHandler。mxCompactTreeLayout實現了樹佈局運算、shape包提供了大量的形狀,他們都是mxShape的子類。
util包提供了很多有用的類,包括:實現複製貼上的mxClipboard,拖拽的mxDatatransfer,鍵值對的樣式表mxConstants,mxEvent和mxUtils實現了跨瀏覽器的事件處理和生成目標函式,mxResources實現了國際化(語言),mxLog實現了控制檯列印輸出。
io包實現了一個通用的mxObjctCodec 將js物件轉換成MXL。入口函式是mxCodec。mxCodecRegistry是一個客戶程式碼的全域性登錄檔。
事件
有三類不同型別的事件,也即是本地DOM事件,mxEventObjects在mxEventSource中觸發;mxMouseEvents在mxGraph中觸發。
mxEvent提供了一些有用的方法來處理本地事件。他負責解決Dom節點和js事件處理迴圈引用的問題,這樣的問題會導致IE6記憶體洩露。
在mxGraph中絕大多數定製事件都是用mxEventSource來實現的。他的監聽是一個傳送函式和mxEventObject。此外,maGraph類通過觸發特別的mxMouseEvents來處理滑鼠事件。監聽通過mxEventSource.addListener和mxEventSource.removeListener來新增和移除監聽。mxMouseEvents在mxGraph中通過使用mxGraph.firemouseEvent來觸發。監聽分別用mxGraph.addmouseListener和mxGraph.removeMouseListener來新增和移除。
按鍵繫結
下面的滑鼠繫結事件是為跨瀏覽器和平臺定義的:
- Control-Drag:複製選定的cells
- 右鍵:顯示右鍵選單
- 左鍵:實現選定框
- 選擇:選定和取消選定的狀態
- Shift-Drag:約束偏移量
- Shift-Control-Drag:同上
配置
下面的全域性變數可能會在客戶端載入前定義。包括語言或者基礎路徑。
- mxBasePath: 指定 mxClient.basePath 的路徑。
- mxImageBasePath: 指定圖片路徑 mxClient.imageBasePath.
- mxLanguage: 指定語言檔案路徑 mxClient.language.
- mxDefaultLanguage: 指定預設語言 mxClient.defaultLanguage.
- mxLoadResources: 指定應該被載入的資源. 預設是true.
- mxLoadStylesheets: 指定應該被載入的樣式表. 預設 true.
保留字
在mxGraph中mx字首被用在所有的和物件上。mx字首可以看做是一個所有js程式碼的全域性名稱空間。下面的名字不能用作物件。
- mxObjectId: 用作唯一標示一個物件。
- as: 如果一個物件有含有其他物件的引用
- id: 當做主鍵
- mxListenerList: 當使用mxEvent的時候會新增到DOM節點上。
- window._mxDynamicCode: 在 Safari and Chrome 瀏覽器東臨時用來載入程式碼 (參考 mxClient.include).
- _mxJavaScriptExpression: 全域性變數,用來臨時執行程式碼在Safari, Opera, Firefox 3 and IE (參考 mxUtils.eval).
檔案
這個類庫包括三個相關的檔名。所有的檔名都相對於mxClient.basePath
圖片引用
所有的圖片都從mxClient.imageBasePath中載入,你也可以根據環境需要進行修改。圖片變數也可以單獨修改。
- mxGraph.prototype.collapsedImage
- mxGraph.prototype.expandedImage
- mxGraph.prototype.warningImage
- mxWindow.prototype.closeImage
- mxWindow.prototype.minimizeImage
- mxWindow.prototype.normalizeImage
- mxWindow.prototype.maximizeImage
- mxWindow.prototype.resizeImage
- mxPopupMenu.prototype.submenuImage
- mxUtils.errorImage
- mxConstraintHandler.prototype.pointImage
資源
mxEditor和mxGraph類在載入時會把線面的資源新增到mxResources上: resources/editor*.propertiesresources/graph*.properties
英語和德語的資原始檔。
圖片
推薦使用圖片。使用256色GIF在HTML元件中(例如工具欄和選單),24bit的PNG圖片用在影象元件的內部。 注意:PNG圖片在HTML物件中,IE下會忽略透明;GIF圖片在graph內部,在蘋果系統的火狐瀏覽器上會出現奇怪的顏色。更有甚者,只有第一個圖片的GIF動畫會顯示在蘋果系統上。 在應用執行期間為了更快的渲染圖片,可以採用預讀取的方式,如下: var image = new Image(); image.src = url_to_image;
開發
開發時頁面通過使用下面標籤來引用mxGraph: <script type="text/javascript" src="js/mxClient.js"></script>
原始碼
花錢買了,才會給你source.zip。如果想修改或者使用原始碼除錯就把引用地址指向原始碼包。
類
有兩種,一種是單例的(只建立一個)。單例會對映到全域性物件上,變數名字和類名相同。例如mxConstants是一個存放常量的。普通類會對映到建構函式以及原型上包括屬性和方法。例如mxEditor是一個函式,maEditor.protype是這個物件建立的原型。mx字首被用在所有類的字首上,避免和其他全域性變數衝突。子類
所有的子類必須提供建構函式,或者沒有引數,或者處理沒有引數的引用。進一步說,指定建構函式必須定義在擴充套件原型物件上。例如mxEditor的子類mxEventSource。首先在js中子類會繼承父類的所有屬性和方法,通過原型類指定父類。mxEditor.prototype=new mxEventSource()渲染建構函式使用mxEditor.prototype.contructor=mxEditor。可以使用名字來檢索一個物件,通過mxUtils.getFunctionName(obj.constructor)。