資訊專欄INFORMATION COLUMN
摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。
公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是 jsPlumb 框架。由于人員流動，后來這部分我接手了。項目繪圖業務需求變得越來越復雜，jsPlumb 已經滿足不了我們項目，于是我將目光投到了其他繪圖框架。本文主要說說我在使用 jsPlumb 遇到的問題，以及我為什么選擇 mxGraph。
jsPlumbjsPlumb 有社區版跟收費版，我們使用的是社區版，下面提到的問題在收費版不一定存在。
不穩定
沒有內置導航器(收費版是有這個功能的)
沒有智能布局功能
沒有做圖層管理
沒有集成截圖功能
畫布沒有邊界自動擴充功能
不穩定
主要體現在兩點
還原圖形偶爾會報一些莫名其秒的錯誤，還原失敗
連接線條偶爾會發生線條位置錯亂的情況
這可能是由于我使用 jsPlumb 不當引起的，又或者是框架本身存在問題，到最后都無法定位問題所在。但確實我在網上也看到有同學遇到過相似不穩定的情況。
沒有內置導航器
(這是后來我用 mxGraph 做出來的)
導航器為分兩個功能：第一個是放大、縮小，第二是可拖拽改變視口的 minimap。對于放大、縮小這個功能，我們用 css scale 來對整個畫布進行縮放。但這個方法的缺點很快就暴露了，縮放后節點位置會發生改變；至于 minimap 要實現的話無異于重復造輪子，團隊資源有限，這個功能當時擱置了。
智能布局
產品有一個需求是將用戶 Excel 表中的數據用圖形的方式展示，這就需要智能布局功能，不然程序不知道節點應該放置在什么地方才美觀。實現這個功能要使用比較復雜的算法，團隊資源有限，這個功能當時也擱置了。
沒有做圖層管理
jsPlumb 沒有做圖層管理，導致繪圖過程中做不到一些想要的圖層疊加效果，要做的話只能自己用 z-index 去控制，這無疑增加了項目維護成本。而且 jsPlumb 的靶點是通過絕對定位附著在節點上的，你需要管理的不僅僅是節點的 z-index 還有靶點的 z-index。
沒有集成截圖功能
在用戶繪圖過程中做了任何改變圖的外觀的操作我們都需要對當前圖形截圖，然后同步到服務端作為該圖形的封面。jsPlumb 沒有內置的截圖功能，我們使用 html2canvas 將 html 轉換成 canvas 再轉換成 png，然后發送到服務端。但 html2canvas 截圖時會有1秒左右的卡頓，這降低了用戶體驗，并不是我們想要的。
畫布沒有邊界自動擴充功能
由于 jsPlumb 采用的是svg和html混排的做法，節點都是html，畫布的邊界自然是程序設定的 div 容器。節點多了或者用戶想把節點拖遠點都需要擴充畫布邊界，這又成了一個技術難題。當時我們只好用緩兵之計把畫布寫死成 5000 * 5000。
說了這么多 jsPlumb 的不好，我并沒有黑這個框架的意思。畢竟 jsPlumb 現在的 start數、npm下載量都是繪圖框架中最高的，肯定有它的過人之處，只是并不適合我們的項目。jsPlumb采用的是svg和html混排的做法，所有節點都是html，所有連線都是多帶帶的svg節點包裹的path元素，對于高度定制化節點樣式是非常方便的，我認為靜態展示的圖形非常適合使用 jsPlumb 繪制。
mxGraph基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。目標非常明確，我要找的框架能幫助我解決上面所有的問題。一番谷歌篩選后，發現 mxGraph 跟 GoJS 都是能解決我們項目問題的，因為 GoJS 是閉源收費的，最后我選擇了 mxGraph。
穩定性
draw.io 是一個比較知名的開源繪圖網站，就是用 mxGraph 進行開發的。這個繪圖工具我偶爾也會使用，還試過出現 BUG 的情況。有 draw.io 當背書，我相信 mxGraph 的穩定性是靠得住的。
功能
mxGraph 官方提供差不多 90 個例子，從這些例子跟 draw.io 中我可以確定我想要的功能 mxGraph 都可以幫助我實現。導航器、智能布局對于 mxGraph 來說只是一個 API 調用的事。mxGraph 的畫布完全基于 svg，自定義節點樣式，完全通過 js 完成，比較麻煩。但這對于 mxGraph 自身做圖層管理是有好處的，對于開發都來說管理圖形層疊也只是幾個 API 的事，也不用管什么 z-index 了。由于畫布完全基于 svg，不像 jsPlumb 用 html + svg 實現畫布，所以 mxGraph 可以做到導出結構化的文檔（XML），也不再需要使用 html2canvas 幫助截圖，只需要調用幾個接口導出當前文檔發送給服務端，然后服務端通過 Java 版 (我們項目使用的是 Java，mxGraph 服務端環境還提供有 PHP、C#) mxGraph 將文檔轉換成圖片，這樣便解決了截圖的問題。畫布邊界擴充也的問題也不用關心，mxGraph 已經幫助我們做了。再就是 draw.io 已經用 mxGraph 實現了復雜的繪圖功能，相信即便以后我們的業務有更復雜的擴展這個框架也是能扛得住的。
社區
mxGraph 在 stackoverflow 上有雖然有250個左右相關問題，不過大多數都是回答數比較少，這是我當時比較擔憂的一點。
兼容性問題
項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。但交互上需要兼容iPad，從 mxGraph 的官方 Demo 中得知 mxGraph 對這方面有做兼容的，可以放心使用。
缺點
文檔不夠友好(個人認為與GoJS文檔水平差距甚遠)，導致上手難度大
沒中文文檔，英文不好的同學用起來有點吃力
相對 jsPlumb 不能使用 css 自定義節點樣式，完全通過 js 完成，比較麻煩
經過4個月使用后，確實 mxGraph 幫忙我們解決了上述問題。但同時也遇到的了一些問題，我會在下一篇文章《mxGraph 入門實例教程》中指出。
參考精讀《12 個評估 JS 庫你需要關心的事》
前端可視化建模技術概覽
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102317.html
摘要：公司項目需要用到繪圖框架，繪圖部分以前是另一位同事負責，用的是框架。基于以上提及到的種種原因，上年年末我做起了技術調研，希望能找到一個合適我們項目的繪圖框架。兼容性問題項目對瀏覽器兼容性比較寬松，瀏覽器兼容性問題不在考慮范圍之內。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...
摘要：本教程會使用到語法，而第二部分的項目是用寫的。閱讀本教程需要你掌握這兩項預備知識。在中可以代表組節點邊，這個類封裝了的操作，本教程不涉及到組的內容。表示在邊的正交線上移到的距離。 showImg(https://segmentfault.com/img/remote/1460000018510999?w=935&h=484); 在上一篇文章 《記一次繪圖框架技術選型: jsPlumb ...
摘要：邊繪制成折線的時候為兩種形式，默認是通過貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。在開發中我對邊的繪制方式進行了小小的修改，統一改為直接使用三次貝塞爾曲線連接，具體代碼如下調用內置函數繪制三次貝塞爾曲線忽略后面繪制折線的代碼參考 mxGraph是一個支持多種語言（Java、JavaScript、PHP、.NET）的畫圖框架，所繪制的圖形可以在主流瀏覽器以及原生應用上使用。mxGr...
摘要：首先不支持使用，。相關代碼如下邊的邊都是自動繪制的，支持對邊的樣式修改，比如箭頭粗細等。邊繪制成折線的時候為兩種形式，默認是通過貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。mxGraph是一個支持多種語言（Java、JavaScript、PHP、.NET）的畫圖框架，所繪制的圖形可以在主流瀏覽器以及原生應用上使用。 mxGraph官方資料全英文，網上有幾篇mxGraph的教程，對于入門和...
摘要：初步分析提升可從兩方面入手，一個是增加并發數，其二是減少平均響應時間。大部分的時間花在系統與數據庫的交互上，到這，便有了一個優化的主題思路最大限度的降低平均響應時間。不要輕易否定一項公認的技術真理，要拿數據說話。 本文最早發表于個人博客：PylixmWiki 應項目的需求，我們使用tornado開發了一個api系統，系統開發完后，在8核16G的虛機上經過壓測qps只有200+。與我們當...
閱讀 3608·2021-11-15 11:37
閱讀 2974·2021-11-12 10:36
閱讀 4403·2021-09-22 15:51
閱讀 2381·2021-08-27 16:18
閱讀 881·2019-08-30 15:44
閱讀 2163·2019-08-30 10:58
閱讀 1768·2019-08-29 17:18
閱讀 3268·2019-08-28 18:25
