1. 程式人生 > >mxGraph API

mxGraph API

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!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
         警告圖片mxGraph.setCellWarning 被定義在 mxGraph.warningImage中。

   資源

       mxEditor和mxGraph類在載入時會把線面的資源新增到mxResources上:       resources/editor*.properties
      resources/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)。













   類            

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述