Posted on 2015-05-22 17:33
TWaver 閱讀(5223)
評(píng)論(1) 編輯 收藏
應(yīng)廣大客戶所需，今天給大家?guī)?lái)一款組織結(jié)構(gòu)圖。組織結(jié)構(gòu)圖的呈現(xiàn)方式多種多樣，用途也是非常廣泛，可以應(yīng)用于集團(tuán)內(nèi)部，企業(yè)各部門之間的組織關(guān)系呈現(xiàn)。我們就來(lái)看看twaver實(shí)現(xiàn)出來(lái)的效果。
上下布局：
圓形布局：
這些布局用twaver來(lái)實(shí)現(xiàn)是非常的合適，實(shí)現(xiàn)起來(lái)也是很容易，twaver內(nèi)部就提供了多種布局方式：自左向右，從下向上，具體可以看twaver的官方文檔介紹。這里就不多說(shuō)了，今天我們著重說(shuō)一下twaver如果實(shí)現(xiàn)上圖中的網(wǎng)元。先放大看看效果：
這里借用了女神的范冰冰頭像。我們假設(shè)范冰冰為財(cái)務(wù)部出納，我想范爺做為財(cái)務(wù)部主管也是當(dāng)之無(wú)愧的，從剛開始的北漂到后來(lái)的一夜狂賺8千萬(wàn)。現(xiàn)在的社會(huì)，只要有錢投資了房產(chǎn)后半輩子就不用愁了，閑話不多扯。這里我們采用的是名片式的方式來(lái)呈現(xiàn)組織圖上的每個(gè)網(wǎng)元，左側(cè)一張圖片，右側(cè)是職稱，這種矢量和位圖的結(jié)合效果也是非常贊的。那么這種網(wǎng)元如何來(lái)實(shí)現(xiàn)呢？首先我們需要定義一個(gè)圓角矩形:
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', }], });
在圓角矩形的右側(cè)放上文字：
{ shape: 'text', text: '<%=getClient("text")%>', font: '12px "Microsoft Yahei"', translate: {x:150,y:135/2}, }
translate是將文字平移到指定的位置，這里我們需要放在右側(cè)，因此需要設(shè)置偏右，x，y是相對(duì)于網(wǎng)元左上角原點(diǎn)來(lái)設(shè)置的。
接下來(lái)需要在左側(cè)放置一個(gè)橢圓用于放組織節(jié)點(diǎn)的照片，這里的橢圓可以直接用path來(lái)描述 。
{ 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，就是移動(dòng)到-45的位置上。具體的含義可以參考TWaver的官方文檔。
接下來(lái)需要加上員工的圖片，圖片這里采用的是一般的位圖，位圖需要注冊(cè)后才能使用。由于原始圖片是方形的，需要裁減出圓角矩形的形狀，說(shuō)到裁減，twaver的矢量描述中支持clip，默認(rèn)是不clip，設(shè)置clip之后，就會(huì)將超出矢量圖片之外的區(qū)域的進(jìn)行裁剪，可以用shape來(lái)描述裁減的區(qū)域，這里我們需要裁剪出圓角矩形，因此設(shè)置和上面矩形相同的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")%>', }], });
關(guān)于clip的更多使用，可以參考下面的文檔：
html5-canvas-clipping-region-tutorial
canvas-clip-image-in-a-circle
好了，一個(gè)組織結(jié)構(gòu)圖的網(wǎng)元就這樣輕松實(shí)現(xiàn)。最后隨機(jī)造一些數(shù)據(jù)可以看到整體效果了
想要具體demo的小伙伴，請(qǐng)發(fā)郵件至tw-service#servasoft.com，我們會(huì)將完整代碼發(fā)送給您。