HTML5實現的矢量卡片式組織結構圖

原創

2020-02-22 06:46

組織結構圖（Organization chart）是企業的流程運轉、部門設置及職能規劃等最基本的結構依據。和客戶交流時，不少人都提到需要一個靈活的工具來繪製呈現企業的組織架構，今天就給大家帶來一款用TWaver實現的組織結構圖，提供多種佈局方式，爲了清晰呈現組織裏每個人的職能，我們定製了名片樣式來展示網元。

首先來看下整體效果。

先來一個經典的上下層級佈局：

再來一個圓形佈局：

這些佈局用twaver來實現是非常的合適，實現起來也是很容易，twaver內部就提供了多種佈局方式：自左向右，從下向上，具體可以看twaver官方文檔介紹，這裏就不多說了。

今天我們着重說一下twaver如果實現上圖中的網元。先放大看看效果：

這裏借用了女神的范冰冰頭像。我們假設范冰冰爲財務部出納，我想範爺做爲財務部主管也是當之無愧的，從剛開始的北漂到後來的一夜狂賺8千萬。現在的社會，只要有錢投資了房產後半輩子就不用愁了，閒話不多扯。這裏我們採用的是名片式的方式來呈現組織圖上的每個網元，左側一張圖片，右側是職稱，這種矢量和位圖的結合效果也是非常讚的。那麼這種網元如何來實現呢？首先我們需要定義一個圓角矩形:

twaver.Util.registerImage('employee', {
		w: 200,
		h: 135,
		cache: false,
		origin: {x:0, y:0},
		v: [{
			shape: 'rect',
			w: '100%',
			h: '100%',
			r: 8,
			lineColor:'black',
			lineWidth:2.5,
			fill: '#F5ECCE',
		}],
	});

在圓角矩形的右側放上文字：

{
			shape: 'text',
			text: '<%=getClient("text")%>',
			font: '12px "Microsoft Yahei"',
			translate: {x:150,y:135/2},
		}

translate是將文字平移到指定的位置，這裏我們需要放在右側，因此需要設置偏右，x，y是相對於網元左上角原點來設置的。

接下來需要在左側放置一個橢圓用於放組織節點的照片，這裏的橢圓可以直接用path來描述。

{
			shape: 'path',
			data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
			lineColor:'#BBBBBB',
			lineWidth:1,
			translate: {x: 60, y:135/2}
		}

data用於描述path的路徑，這裏面的M，Q，L分別代表moveto，quadraticCurveTo和lineto，比如M-45，就是移動到-45的位置上。具體的含義可以參考我們的官方文檔。

接下來需要加上員工的圖片，圖片這裏採用的是一般的位圖，位圖需要註冊後才能使用。由於原始圖片是方形的，需要裁減出圓角矩形的形狀，說到裁減，twaver的矢量描述中支持clip，默認是不clip，設置clip之後，就會將超出矢量圖片之外的區域的進行裁剪，可以用shape來描述裁減的區域，這裏我們需要裁剪出圓角矩形，因此設置和上面矩形相同的path路徑即可。

twaver.Util.registerImage('clip_pic', {
		w: 128,
		h: 128,
		cache: false,
		clip: {
			shape: 'path',
			data: 'M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z',
		},
		v: [{
			shape: 'image',
			x:-64,
			y:-64,
			name: '<%=getClient("pic")%>',
		}],
	});

關於clip的更多使用，可以參考下面的文檔：

html5-canvas-clipping-region-tutorial

canvas-clip-image-in-a-circle

好了，一個組織結構圖的網元就這樣輕鬆實現。最後隨機造一些數據可以看到整體效果了