互聯網購物成了當今非常熱門的話題，各種購物網站，手機APP如雨后春筍般涌現出來。什么買衣服，買水果，買米，買油都得到了解決，自從有了這些app，再也不用去超市排著超長的隊伍，扛著超重貨物，騎著超累的車子了。之前每出一趟門買東西簡直是跟參加了一場馬拉松似的，現在好了，直接送貨到家。那么在購物的背后又有什么樣的流程呢，今天我們給大家介紹的是TWaver的另一款流程圖。
說到TWaver的流程圖卻是層出不窮，千姿百態。2D的，3D的，靜態的，動態的。這次要給大家呈現的是一款全矢量的，非常清新優美的流程圖。先給大家看看效果：
看到這樣的圖，是不是覺得不就是用了幾張貼圖嘛，如果這樣想，那么你對twaver還是有所了解的。前面我們已經提到了，這是一款全矢量的流程圖，這里可沒有用到任何貼圖哦，下面這些網元都是矢量描述出來的，縮放不失真。接下來我們就來介紹一下如何矢量描述這些網元呢？
這里我們以第一個為例，來介紹如何用矢量來描述這個元素，首先我們需要畫一個圓角正方形，并且顏色是稍微帶點漸變色，我們這里采用了線性漸變，中間是灰色，兩邊白色，代碼如下：
1 twaver.Util.registerImage('process', {
2 w: 48,
3 h: 42,
4 lineWidth:1,
5 lineColor: '#848484',
6 v: [{
7 shape: 'rect',
8 w: 42,
9 h: 36,
10 x: -21,
11 y: -18,
12 r: 4,
13 gradient: {
14 type: 'linear',
15 x1: 0,
16 y1: -25,
17 x2: 0,
18 y2: 25,
19 stop: [{
20 offset: 0,
21 color: 'white'
22 },{
23 offset: 0.4,
24 color: '#D8D8D8'
25 },{
26 offset: 1,
27 color: 'white'
28 }]
29 }
30 }]
31 });
看下運行后的效果：
接著按照這種方式畫中間的橙色小方塊，一樣的道理，也是中間畫個圓角矩形，用了橙色的漸變：
1 {
2 shape: 'rect',
3 w: 36,
4 h: 30,
5 x: -18,
6 y: -15,
7 r: 3,
8 gradient: {
9 type: 'linear',
10 x1: 0,
11 y1: -20,
12 x2: 0,
13 y2: 25,
14 stop: [{
15 offset: 0,
16 color: 'white'
17 },{
18 offset: 0.4,
19 color: '#B45F04'
20 },{
21 offset: 1,
22 color: 'white'
23 }]
24 }
25 }
最后就是中間幾條線了，可以采用path來描述，自己畫出每個像素點，代碼如下：
1 {
2 shape: 'path',
3 data: 'M-12,-8l4,0m2,0l12,0M-9,-3l4,0m2,0l12,0M-6,2l4,0m2,0l12,0M-9,7l4,0m2,0l12,0',
4 lineWidth: 1.5,
5 lineColor: '#F2F2F2',
6 }
寫到這里，你會不會覺得怎么現在弄個矢量的圖片這么復雜，像素啥的還要自己來算。如果什么都自己干，那么自己是不是也可以當美工了。哈哈哈，如果你覺得可以，一些簡單的美工活是不用求別人了，自己也能干。但是如果你覺得復雜，也可以直接用美工提供的svg圖片，通過twaver的轉換器直接轉換出上面的這些代碼。
矢量圖片先講到這里，我們再來看link上是如何畫出一個箭頭的，就是下面的這種效果：
這里我們用到了link的icon附件，link上icon的附件也可以用矢量哦，是不是很贊：
1 link.setStyle('icons.names', ['link_arrow']);
這里的'link_arrow'就是我們注冊的矢量圖片名稱。
加了連線的矢量，連線的走向也需要自己定義一下。這里通過linkpath來定義,network上提供了設置linkpath的方法：
1 network.setLinkPathFunction(createLinkPath);
連線的走向我們這里采用了先水平后垂直的方式，也可以加上水平的偏移的值，這樣我們可以控制連線的拐點。
雙擊展開，合并動畫
這款流程圖，最大的特點是可以合并展開子流程，并可以指定合并時收起哪些點，合并后的效果如下：
這樣流程圖就會清晰很多，如果不想看中間復雜的子流程合并起來就可以了。
這里的我們錄制了一個視頻供大家欣賞：
感興趣的朋友可以發郵件到tw-service#servasoft.com，我們會將完整代碼呈現給您。