摘要：首先不支持使用，。相關(guān)代碼如下邊的邊都是自動(dòng)繪制的，支持對(duì)邊的樣式修改，比如箭頭粗細(xì)等。邊繪制成折線的時(shí)候?yàn)閮煞N形式，默認(rèn)是通過(guò)貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。

mxGraph是一個(gè)支持多種語(yǔ)言（Java、JavaScript、PHP、.NET）的畫(huà)圖框架，所繪制的圖形可以在主流瀏覽器以及原生應(yīng)用上使用。 mxGraph官方資料全英文，網(wǎng)上有幾篇mxGraph的教程，對(duì)于“入門”和“使用”講解得比較詳細(xì)。 所以這篇文章不是介紹如何畫(huà)一個(gè)圖形，寫(xiě)一個(gè)hello world，而是重點(diǎn)介紹學(xué)習(xí)mxGraph時(shí)覺(jué)得比較重要的、難以理解的或者容易被忽略的知識(shí)點(diǎn)。 需要讀者對(duì)mxGraph的文檔有一定的了解或者使用mxGraph。

mxGraph的使用場(chǎng)景有4個(gè)：圖形可視化、圖形交互、圖形布局、圖形分析。

圖形可視化是mxGraph的主打功能，這個(gè)很好理解，就是把一些抽象的概念用圖形來(lái)表示，比如常見(jiàn)的流程圖、思維導(dǎo)圖、實(shí)體關(guān)系圖等。 需要注意的是mxGraph所繪制的圖主要是由“點(diǎn)”（也包括矩形、圓形這類基本形狀）和“邊”組成的，如果要用mxGraph來(lái)畫(huà)蒙娜麗莎那就肯定是不合適的。 下圖是官方提供的一張樣圖。 作者猜測(cè)實(shí)現(xiàn)方式是用世界地圖作為背景圖片，然后在此之上繪制點(diǎn)和線。 為了驗(yàn)證猜測(cè)，訪問(wèn)了官方示例提供的網(wǎng)站,發(fā)現(xiàn)是一張jpg圖片，而且沒(méi)有連線。 可能是后端生成導(dǎo)出的位圖，或者源圖片已經(jīng)被網(wǎng)站替換了。

圖形交互

mxGraph除了繪制圖形之外還提供了豐富的編輯功能，比如拖拽、選擇、復(fù)制、調(diào)整大小等。 mxGraph甚至還專門提供了一個(gè)API類用來(lái)支持在線編輯器。 關(guān)于這一塊我沒(méi)有使用~

圖形布局

非常重要的一個(gè)功能，能自動(dòng)排列圖形元素。 mxGraph提供了多種布局方式，比如樹(shù)形布局、棧式布局、圓形布局。 這一塊后面重點(diǎn)介紹。

圖形分析

支持圖相關(guān)的算法分析，比如找出圖中兩個(gè)節(jié)點(diǎn)的最短路徑。 關(guān)于這一塊我沒(méi)有使用~ 不過(guò)我沒(méi)有找到相關(guān)API，估計(jì)需要開(kāi)發(fā)者自己實(shí)現(xiàn)相關(guān)算法。

小結(jié)

學(xué)習(xí)新技術(shù)或框架的時(shí)候首先需要弄清楚它是什么，能做什么。 如果和要實(shí)現(xiàn)的功能匹配再繼續(xù)學(xué)習(xí)研究。

前端繪制圖形有3種方式：

HTML + CSS。

canvas。

svg。

前端工程師最熟悉最常用的方式，開(kāi)發(fā)起來(lái)非常簡(jiǎn)單。

借助CSS3可以實(shí)現(xiàn)炫酷的動(dòng)畫(huà)效果。

非常依賴瀏覽器環(huán)境，如果要遷移到原生應(yīng)用上或者客戶端就會(huì)比較麻煩。

HTML、CSS沒(méi)有合適的模塊機(jī)制，所以圖形的復(fù)用也不方便。

canvas使用也比較廣泛，比如百度的著名開(kāi)源項(xiàng)目echarts就是通過(guò)canvas來(lái)繪制各種圖形。

強(qiáng)大的API，可以實(shí)現(xiàn)復(fù)雜的圖形和效果。

渲染速度快，可以利用顯卡加速。

也非常依賴瀏覽器環(huán)境，而且低版本的瀏覽器不支持。

代碼邏輯比較復(fù)雜。

不方便保存和導(dǎo)出。

寬泛的運(yùn)行環(huán)境。瀏覽器、繪圖工具、編輯器里都可以正常顯示。

良好的可編輯性。svg可以在前端通過(guò)JavaScript修改，也可以通過(guò)后端語(yǔ)言修改，還可以讓設(shè)計(jì)師通過(guò)軟件修改。

使用簡(jiǎn)單。svg是xml的語(yǔ)法，沒(méi)有復(fù)雜的邏輯，全都是配置出來(lái)

矢量圖。相對(duì)于位圖，無(wú)分辨率要求，縮放清晰。

復(fù)雜圖形渲染速度較慢。

mxGraph默認(rèn)繪制的是svg圖形（看API文檔和源碼發(fā)現(xiàn)也支持canvas），所以支持后端語(yǔ)言進(jìn)行預(yù)渲染，同時(shí)也支持保存和導(dǎo)出，轉(zhuǎn)化為位圖也非常方便。 理解了這一點(diǎn)，對(duì)我們了解mxGraph的功能特性，以及修改源代碼都會(huì)有幫助。

cell這個(gè)概念可以理解成為雙向數(shù)據(jù)綁定中的數(shù)據(jù)模型，我們需要修改圖形的時(shí)候，應(yīng)該通過(guò)mxGraph提供的API來(lái)修改mxCell實(shí)例的屬性，然后mxGraph的繪圖函數(shù)來(lái)根據(jù)數(shù)據(jù)模型來(lái)修改視圖。 mxGraph的其他很多概念都是以cell作為基礎(chǔ)的：樣式、布局、內(nèi)容文本、事件、位置......

前面提到mxGraph的圖形分為兩類：vertex（點(diǎn)）和edge（邊），但實(shí)際上它們都屬于mxCell類的實(shí)例，只是一些屬性值不同而已。

官方文檔提供的beginUpdate和endUpdate函數(shù)，寫(xiě)法上和數(shù)據(jù)庫(kù)的事務(wù)提交很像，也有文章說(shuō)是進(jìn)行批量處理，實(shí)際上只是為了避免多次觸發(fā)而合并了change事件而已，如果不使用這兩個(gè)函數(shù)不會(huì)對(duì)繪圖結(jié)果產(chǎn)生什么影響。至于回滾什么的那是想多了。

不少開(kāi)發(fā)者看到“算法”這個(gè)詞就會(huì)犯怵，覺(jué)得很復(fù)雜、難以理解。 但其實(shí)mxGraph的布局算法并沒(méi)有那么難以理解。

所有的布局算法類都是“繼承”自基類mxGraphLayout，自定義了一些屬性，同時(shí)實(shí)現(xiàn)API函數(shù)execute，mxGraph在繪制圖形的時(shí)候會(huì)調(diào)用這個(gè)函數(shù)。

布局算法只涉及到vertex（點(diǎn)）的操作，當(dāng)vertex（點(diǎn)）被調(diào)整之后，mxGraph會(huì)自動(dòng)調(diào)整它們之間edge（邊）的關(guān)系，或是顯示隱藏或是彎曲。

如果需要繪制大量的圖形容易造成性能問(wèn)題，不應(yīng)該在算法中實(shí)現(xiàn)這。而可以借助mxGraph提供的幾種默認(rèn)方式實(shí)現(xiàn)：1.折疊/展開(kāi)；2. 鉆取/彈出；3.分層過(guò)濾顯示

很多時(shí)候我們還需要對(duì)mxGraph繪制的圖形進(jìn)行定制化開(kāi)發(fā)，主要為下面幾點(diǎn)。

mxGraph對(duì)樣式的支持是非常不完善的。

首先不支持使用css，。這樣也就意味著無(wú)法使用樣式繼承，樣式類這些特性了。

修改的時(shí)候需要通過(guò)API函數(shù)，傳入JSON對(duì)象。

mxGraph內(nèi)部操作樣式的時(shí)候并沒(méi)有使用defs標(biāo)簽來(lái)聲明樣式類，而是直接修改標(biāo)簽的style、fill這些屬性。這樣會(huì)導(dǎo)致很多重復(fù)樣式代碼，同時(shí)不方便樣式覆蓋。

例如下面的代碼是用來(lái)實(shí)現(xiàn)一個(gè)高亮樣式的，如果支持CSS樣式類，我們只需要寫(xiě)個(gè)高亮樣式，增刪類名即可。 但是mxgraph就比較麻煩，要寫(xiě)成對(duì)象，同時(shí)在取消高亮?xí)r要手動(dòng)清除對(duì)應(yīng)屬性。

var common_highlight = {}
common_highlight[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD
var vertex_highlight = Object.assign({}, common_highlight)
vertex_highlight[mxConstants.STYLE_FILLCOLOR] = "#00ffff"
var edge_highlight = Object.assign({}, common_highlight)
edge_highlight[mxConstants.STYLE_STROKECOLOR] = "#00ffff"
if (hover) {
  if (!state.styleList) {
    if (state.cell.edge) {
      state.styleList = new mxStylesheetList(Object.assign({}, graph.getStylesheet().styles.defaultEdge, state.style));
    } else if (state.cell.vertex) {
      state.styleList = new mxStylesheetList(Object.assign({}, graph.getStylesheet().styles.defaultVertex,
        state.style));
    }
  }
  if (state.cell.vertex && state.cell.value) {
    state.styleList.add("highlight", vertex_highlight);
  }
  if (state.cell.edge) {
    state.styleList.add("highlight", edge_highlight);
  }

} else {
  state.styleList.remove("highlight");
}
state.style = state.styleList.get();
state.shape.apply(state);
state.shape.redraw();
if (state.text != null) {
  state.text.apply(state);
  state.text.redraw();
}

mxGraph一個(gè)強(qiáng)大之處是支持在svg中插入HTML元素，官方給出的examples中有個(gè)htmllabel.html實(shí)現(xiàn)了類似功能。 概括地說(shuō)兩步實(shí)現(xiàn)：

在創(chuàng)建點(diǎn)的時(shí)候插入一個(gè) UserObject 對(duì)象聲明，表明此處可以插入DOM元素。

重載 convertValueToString 函數(shù)，返回DOM元素。

相關(guān)代碼如下：

var obj = doc.createElement("UserObject");
obj.setAttribute("label", "FASTQ files");
var v1 = graph.insertVertex(col[0], null, obj, 0, 0, width, height)
...
graph.convertValueToString = function (cell) {
  let div = document.createElement("div")
  ...
  return div;
}

mxGraph的邊都是自動(dòng)繪制的，API支持對(duì)邊的樣式修改，比如箭頭、粗細(xì)等。 邊繪制成折線的時(shí)候?yàn)閮煞N形式，默認(rèn)是通過(guò)貝塞爾曲線繪制成帶圓角的折線，另一種是直角折線。 mxGraph內(nèi)部并沒(méi)有對(duì)這些邊進(jìn)行優(yōu)化，如果布局不合理，交叉、穿過(guò)點(diǎn)的情況就會(huì)發(fā)生。 在開(kāi)發(fā)中我對(duì)邊的繪制方式進(jìn)行了小小的修改，統(tǒng)一改為直接使用三次貝塞爾曲線連接，具體代碼如下：

// shap/mxShap.js
mxShape.prototype.addPoints = function(c, pts, rounded, arcSize, close, exclude, initialMove)
{
	if (pts != null && pts.length > 0)
	{
		initialMove = (initialMove != null) ");true;
		var pe = pts[pts.length - 1];
		
		// Adds virtual waypoint in the center between start and end point
		if (close && rounded)
		{
			pts = pts.slice();
			var p0 = pts[0];
			var wp = new mxPoint(pe.x + (p0.x - pe.x) / 2, pe.y + (p0.y - pe.y) / 2);
			pts.splice(0, 0, wp);
		}
	
		var pt = pts[0];
		var i = 1;
	
		// Draws the line segments
		if (initialMove)
		{
			c.moveTo(pt.x, pt.y);
		}
		else
		{
			c.lineTo(pt.x, pt.y);
    }
    const midX = pt.x / 2 + pe.x / 2
    // 調(diào)用內(nèi)置函數(shù)繪制三次貝塞爾曲線
    c.curveTo(midX, pt.y, midX, pe.y, pe.x, pe.y)
    // 忽略后面繪制折線的代碼
    return;
    //...
  }

參考：

《mxGraph Tutorial》

《mxGraph User Manual – JavaScript Client》

原文鏈接：tech.gtxlab.com/mxgraph-kno… 作者信息：朱德龍，人和未來(lái)高級(jí)前端工程師。