用拓撲圖實現多層級關係圖（三）可摺疊流程圖，拓撲圖可摺疊

用拓撲圖實現多層級關係圖（三）可摺疊流程圖，拓撲圖可摺疊

說到TWaver的流程圖卻是層出不窮，千姿百態。2D的，3D的，靜態，動態。這次要給大家呈現的是一款全向量的，非常清新優美的流程圖。先給大家看看效果：

看到這樣的圖，是不是覺得不就是用了幾張貼圖嘛，如果這樣想，那麼你對twaver還是有所瞭解的。前面我們已經提到了，這是一款全向量的流程圖，這裡可沒有用到任何貼圖哦，下面這些網元都是向量描述出來的，縮放不失真。接下來我們就來介紹一下如何向量描述這些網元呢？

這裡我們以第一個為例，來介紹如何用向量來描述這個元素，首先我們需要畫一個圓角正方形，並且顏色是稍微帶點漸層色，我們這裡採用了線性漸層，中間是灰色，兩邊白色，代碼如下：

twaver.Util.registerImage('process', {w: 48,h: 42,lineWidth:1,lineColor: '#848484',v: [{shape: 'rect',w: 42,h: 36,x: -21,y: -18,r: 4,gradient: {type: 'linear',x1: 0,y1: -25,x2: 0,y2: 25,stop: [{offset: 0,color: 'white'},{offset: 0.4,color: '#D8D8D8'},{offset: 1,color: 'white'}]}}]});

看下運行後的效果：



接著按照這種方式畫中間的橙色小方塊，一樣的道理，也是中間畫個圓角矩形，用了橙色的漸層：

{shape: 'rect',w: 36,h: 30,x: -18,y: -15,r: 3,gradient: {type: 'linear',x1: 0,y1: -20,x2: 0,y2: 25,stop: [{offset: 0,color: 'white'},{offset: 0.4,color: '#B45F04'},{offset: 1,color: 'white'}]}}

最後就是中間幾條線了，可以採用path來描述，自己畫出每個像素點，代碼如下：

{shape: 'path',data: 'M-12,-8l4,0m2,0l12,0M-9,-3l4,0m2,0l12,0M-6,2l4,0m2,0l12,0M-9,7l4,0m2,0l12,0',lineWidth: 1.5,lineColor: '#F2F2F2',}

寫到這裡，你會不會覺得怎麼現在弄個向量的圖片這麼複雜，像素啥的還要自己來算。如果什麼都自己幹，那麼自己是不是也可以當美工了。哈哈哈，如果你覺得可以，一些簡單的美工活是不用求別人了，自己也能幹。但是如果你覺得複雜，也可以直接用美工提供的svg圖片，通過twaver的轉換器直接轉換出上面的這些代碼。


向量圖片先講到這裡，我們再來看link上是如何畫出一個箭頭的，就是下面的這種效果：

這裡我們用到了link的icon附件，link上icon的附件也可以用向量哦，是不是很贊：

link.setStyle('icons.names', ['link_arrow']);

這裡的'link_arrow'就是我們註冊的向量圖片名稱。
加了連線的向量，連線的走向也需要自己定義一下。這裡通過linkpath來定義,network上提供了設定linkpath的方法：

network.setLinkPathFunction(createLinkPath);

連線的走向我們這裡採用了先水平後垂直的方式，也可以加上水平的位移的值，這樣我們可以控制連線的拐點。

<strong>雙擊展開，合并動畫</strong>
這款流程圖，最大的特點是可以合并展開子流程，並可以指定合并時收合哪些點，合并後的效果如下：





這樣流程圖就會清晰很多，如果不想看中間複雜的子流程合并起來就可以了。


這裡的我們錄製了一個視頻供大家欣賞：

http://v.youku.com/v_show/id_XOTQwODMzMjky.html?f=23725124

感興趣的朋友可以發郵件到tw-service#servasoft.com，我們會將完整代碼呈現給您。