跨瀏覽器動態展示方法和裝置的制造方法
【技術領域】
[0001 ]本發明涉及計算機領域，具體地，涉及一種跨瀏覽器動態展示方法和裝置，主要適 用于基于B/S模式的ERP應用系統或協同應用系統中瀏覽器前端流程圖繪制及展示的應用 場景。
【背景技術】
[0002] 在ERP應用系統或協同應用系統中，流程圖繪制、布局調整、流程圖展示及流程節 點狀態跟蹤展示等功能越來越受客戶的重視，隨著信息辦公自動化的推進，企業內部的審 批流程越來越多，也更復雜，一些復雜的流程圖可能需要功能強大的流程圖繪制工具來繪 制。流程的展示和ERP系統后臺的流程處理引擎是分不開的，因此在ERP系統中必需提供強 大流程圖繪制、展示功能。目前市場上的流程圖實現機制大概有三種： 1、通過flash插件方式實現： 在瀏覽器頁面嵌入flash，通過flash完成流程圖的繪制展示，該方式不存在瀏覽器兼 容性問題，且flash展示流程圖比較美觀。該方式主要的缺點有:flash的技術體系和ERP系 統的技術體系屬于不同的技術，存在數據交互問題，雙方需要定義好交互數據的格式和接 口，另外ERP系統中流程圖功能改動或新增時都需要flash端配合改動，并再次進行交互數 據的定義和接口開發。另外一個缺點是，flash程序有畫布的概念，且flash畫布大小是固定 的，一旦流程圖高寬超出flash畫布范圍，flash將無法處理。
[0003] 2、通過瀏覽器畫布方式實現： 通過瀏覽器支持的畫布，實現流程圖的繪制展示，通過Json和Ajax實現數據交互，不存 在數據交互問題，并且新增或修改流程圖功能都很方便，缺點在于瀏覽器兼容性問題無法 處理，例如火狐、谷歌支持HTML5,可通過canvas實現流程圖繪制展示，但是IE8不支持 HTML5,只能通過IE8的VML技術或其他替代技術來實現流程圖的繪制展示。VML技術和 canvas技術區別很大，因此流程圖功能就需要針對不同的瀏覽器進行不同的實現。
[0004] 3、通過ocx插件方式實現： 在網頁嵌入ocx插件，缺點同flash插件方式實現。還是因為ocx技術體系和ERP系統的 技術體系不同，存在數據交互問題，及功能新增修改都需要ocx端配合改動。
[0005] 綜上所述，現有解決方案的弊端可以總結為如下兩點： (1) 瀏覽器兼容性問題； (2) 不同技術體系引起的數據交互不便，功能的擴展新增復雜。
【發明內容】
[0006] 本發明的目的在于，針對上述問題，提出一種跨瀏覽器動態展示方法和裝置，以實 現解決兼容性和數據交互不便的問題。
[0007] 為實現上述目的，本發明采用的技術方案是： 一種跨瀏覽器動態展示裝置，包括： 數據引擎:負責流程節點定義，流程節點關系的維護以及節點坐標的定位； 事件引擎:負責鼠標及頁面事件響應，以及事件函數定義； 畫布引擎:負責畫布的繪制，流程圖的繪制以及流程圖樣式的美化調整； 交互引擎:負責跟ERP后臺的交互數據定義，交互事件定義，交互數據的轉化。
[0008] 優選的，所述數據引擎，包括流程節點定義單元、節點關系維護單元和節點坐標定 位單元； 所述流程節點定義單元:定義節點的屬性； 所述節點關系維護單元:按雙向遍歷的原則進行節點上下級關系的維護； 所述節點坐標定位單元:負責定位節點的X、Y坐標。
[0009] 優選的，所述事件引擎，包括，事件響應單元和事件函數定義單元； 所述事件響應單元:響應鼠標的操作事件和頁面的操作事件； 所述事件函數定義單元:處理事件函數的定義。
[0010]優選的，所述處理事件函數的定義具體包括，節點的新增、修改、刪除或移動事件。 [0011]優選的，所述畫布引擎，包括畫布繪制單元、流程圖繪制單元和樣式美化調整單 元； 所述畫布繪制單元:繪制簡單的圖形； 所述流程圖繪制單元:根據數據引擎模塊提供的節點的x、Y坐標，根據定義好的橫豎坐 標軸單位寬度，算出該節點的絕對或相對位置，從而完成流程圖的繪制； 所述樣式美化調整單元，控制流程圖的樣式。
[0012] 優選的，所述交互引擎，包括交互數據定義單元、交互事件定義單元和交互數據轉 化單元； 所述交互數據定義單元:結合ERP系統中流程數據的格式，定義交互過程中的雙方都認 可的數據格式，格式要求符合Json規范； 所述交互事件定義單元:采用Ajax的方式來實現交互事件的編寫； 所述交互數據轉化單元:把前端流程圖的數據轉化成用于同ERP交互的BDF格式數據， 同時，把ERP端提供的BDF格式數據，轉化成前端流程圖數據格式。
[0013] 優選的，所述節點坐標定位單元中節點定位具體包括： 確定X坐標:從起始節點開始遞歸遍歷流程圖，設定當前節點子節點的X坐標為當前節 點的X坐標+1; 確定Y坐標； 其中，起始節點的X坐標是1，Y坐標是固定的，且位于畫布的Y軸中點。
[0014] 優選的，所述確定Y坐標，具體包括： 建立節點關系：建立節點上下級關系，在節點中存儲上下級節點的信息，方便雙向遍 歷； 給節點設置初始Y坐標;根據確定的起始節點Υ，利用基本公式，遞歸遍歷整個流程圖， 給所有節點一個初始的Y坐標，所述基本公式為:y(n) = a + η - 0.5*(Ν+1)，其中a為節點 Y坐標，n代表第n個子節點，N代表該節點子節點數量； 對節點Y坐標進行動態調整。
[0015] 優選的，所述對節點Y坐標進行動態調整具體包括： 確定最小分支:若該節點的直接或間接父節點的兄弟節點不是該節點的直接或間接父 節點，則第一次出現的該父節點為該節點的最小分支； 確定值域:當前節點到最小分支節點的Y軸坐標的上下限為該節點的值域； 計算偏移量； 調整兄弟節點：根據計算的偏移量，運用運算法則，調整該節點的兄弟節點及兄弟節點 的子節點的Y坐標，所述運算法則為節點的兄弟節點上移或下移。
[0016] 同時本發明的技術方案還公開一種跨瀏覽器動態展示方法，為采用本發明技術方 案公開的裝置繪制流程圖并展示的方法。
[0017] 本發明的技術方案具有以下有益效果： 本發明的技術方案，利用圖結構的雙向遍歷及賦權定位機制，并取消對瀏覽器畫布對 象及flash、〇CX第三方插件的依賴，利用前端js插件實現流程圖的繪制定位。解決兼容性和 數據交互不便的問題。
[0018] 下面通過附圖和實施例，對本發明的技術方案做進一步的詳細描述。
【附圖說明】
[0019] 圖1為本發明實施例所述的跨瀏覽器動態展示裝置的原理框圖； 圖2為本發明實施例所述的流程圖繪制功能展示圖； 圖3為本發明實施例所述的節點定位基本公式用例說明圖； 圖4為本發明實施例所述的Y坐標初始設置示意圖。
【具體實施方式】
[0020] 以下結合附圖對本發明的優選實施例進行說明，應當理解，此處所描述的優選實 施例僅用于說明和解釋本發明，并不用于限定本發明。
[0021] 本技術方案提供的流程圖實現機制底層技術采用jquery，這樣就不存在瀏覽器兼 容性問題，另外在跟ERP系統的數據交互上，采用通用的Json+Ajax方式。
[0022] 具體技術方案，如圖1所示，一種跨瀏覽器動態展示裝置，包括： 數據引擎:負責流程節點定義，流程節點關系的維護以及節點坐標的定位； 事件引擎:負責鼠標及頁面事件響應，以及事件函數定義； 畫布引擎:負責畫布的繪制，流程圖的繪制以及流程圖樣式的美化調整； 交互引擎:負責跟ERP后臺的交互數據定義，交互事件定義，交互數據的轉化。
[0023]下文對跨瀏覽器動態展示進行具體說明： 數據引擎:負責流程節點定義，流程節點關系的維護以及節點坐標的定位。
[0024] 1、流程節點定義:定義節點的屬性包括節點ID、節點名稱、節點類型(開始節點、結 束節點、串聯節點、并聯節點）、父節點列表、子節點列表、X坐標或Y坐標等； 2、 節點關系維護:流程圖可以算是一種圖結構，因此節點關系是按雙向遍歷的原則進 行節點上下級關系的維護，開始節點和結束節點比較特殊，開始節點只有子節點沒有父節 點，結束節點只有父節點沒有子節點； 3、 節點坐標定位:本技術方案的核心內容，即核心的功能，負責定位節點的X、Y坐標，采 用賦權算法來定位X坐標和Y坐標，具體在下文中進行詳細說明。
[0025] 事件引擎:負責鼠標及頁面事件響應，以及節點增刪改拖動等事件的定義。
[0026] 1、事件響應:響應鼠標的單擊、雙擊、右擊、拖動、onmouseover等事件，響應頁面的 onload、滾動條拖動等事件； 2、事件函數定義:處理各種事件函數的定義，大體包括節點的新增、修改、刪除、移動等 事件； 畫布引擎:負責畫布的繪制，流程圖的繪制，流程圖樣式的美化調整。
[0027] 1、畫布繪制：繪制各種簡單圖形，包括矩形、文本框、圓形、直線等，在這里為了保 證瀏覽器的兼容性，采用純JS實現的"wz_jsgraphics. js"的插件來完成這些工作； 2、 流程圖繪制:本技術方案的核心功能，根據數據引擎模塊提供好的流程節點的X、Y坐 標，根據定義好的橫豎坐標軸單位寬度(Ux、Uy)，很容易能算出該節點的絕對(相對)位置， 若采用CSS絕對布局，則X*Ux是相對瀏覽器左側的像素值，Y*Uy是相對瀏覽器頂部的像素 值，通過CSS很容易控制節點位置，另外節點之間的連線通過簡單的算法便可確定直線的開 始和結束坐標。若采用CSS相對布局，處理方式和絕對布局大體一樣，不同的是X、Y不是相對 瀏覽器的像素值，而是相對頁面的某個DIV元素的像素值； 對于折線的繪制采用分成一段橫線和一段豎線的方式來處理； 對于在流程圖任意位置進行文字標注的功能，只需要確定文本標注的位置，就可以通 過wz_jsgra