Posted on 2015-05-22 17:33
TWaver 閱讀(5228)
評論(1) 編輯 收藏
應廣大客戶所需，今天給大家帶來一款組織結構圖。組織結構圖的呈現方式多種多樣，用途也是非常廣泛，可以應用于集團內部，企業各部門之間的組織關系呈現。我們就來看看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的官方文檔。
接下來需要加上員工的圖片，圖片這里采用的是一般的位圖，位圖需要注冊后才能使用。由于原始圖片是方形的，需要裁減出圓角矩形的形狀，說到裁減，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
好了，一個組織結構圖的網元就這樣輕松實現。最后隨機造一些數據可以看到整體效果了
想要具體demo的小伙伴，請發郵件至tw-service#servasoft.com，我們會將完整代碼發送給您。