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