互聯(lián)網(wǎng)購(gòu)物成了當(dāng)今非常熱門的話題，各種購(gòu)物網(wǎng)站，手機(jī)APP如雨后春筍般涌現(xiàn)出來(lái)。什么買衣服，買水果，買米，買油都得到了解決，自從有了這些app，再也不用去超市排著超長(zhǎng)的隊(duì)伍，扛著超重貨物，騎著超累的車子了。之前每出一趟門買東西簡(jiǎn)直是跟參加了一場(chǎng)馬拉松似的，現(xiàn)在好了，直接送貨到家。那么在購(gòu)物的背后又有什么樣的流程呢，今天我們給大家介紹的是TWaver的另一款流程圖。
說(shuō)到TWaver的流程圖卻是層出不窮，千姿百態(tài)。2D的，3D的，靜態(tài)的，動(dòng)態(tài)的。這次要給大家呈現(xiàn)的是一款全矢量的，非常清新優(yōu)美的流程圖。先給大家看看效果：
看到這樣的圖，是不是覺得不就是用了幾張貼圖嘛，如果這樣想，那么你對(duì)twaver還是有所了解的。前面我們已經(jīng)提到了，這是一款全矢量的流程圖，這里可沒(méi)有用到任何貼圖哦，下面這些網(wǎng)元都是矢量描述出來(lái)的，縮放不失真。接下來(lái)我們就來(lái)介紹一下如何矢量描述這些網(wǎng)元呢？
這里我們以第一個(gè)為例，來(lái)介紹如何用矢量來(lái)描述這個(gè)元素，首先我們需要畫一個(gè)圓角正方形，并且顏色是稍微帶點(diǎn)漸變色，我們這里采用了線性漸變，中間是灰色，兩邊白色，代碼如下：
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 });
看下運(yùn)行后的效果：
接著按照這種方式畫中間的橙色小方塊，一樣的道理，也是中間畫個(gè)圓角矩形，用了橙色的漸變：
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來(lái)描述，自己畫出每個(gè)像素點(diǎn)，代碼如下：
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 }
寫到這里，你會(huì)不會(huì)覺得怎么現(xiàn)在弄個(gè)矢量的圖片這么復(fù)雜，像素啥的還要自己來(lái)算。如果什么都自己干，那么自己是不是也可以當(dāng)美工了。哈哈哈，如果你覺得可以，一些簡(jiǎn)單的美工活是不用求別人了，自己也能干。但是如果你覺得復(fù)雜，也可以直接用美工提供的svg圖片，通過(guò)twaver的轉(zhuǎn)換器直接轉(zhuǎn)換出上面的這些代碼。
矢量圖片先講到這里，我們?cè)賮?lái)看link上是如何畫出一個(gè)箭頭的，就是下面的這種效果：
這里我們用到了link的icon附件，link上icon的附件也可以用矢量哦，是不是很贊：
1 link.setStyle('icons.names', ['link_arrow']);
這里的'link_arrow'就是我們注冊(cè)的矢量圖片名稱。
加了連線的矢量，連線的走向也需要自己定義一下。這里通過(guò)linkpath來(lái)定義,network上提供了設(shè)置linkpath的方法：
1 network.setLinkPathFunction(createLinkPath);
連線的走向我們這里采用了先水平后垂直的方式，也可以加上水平的偏移的值，這樣我們可以控制連線的拐點(diǎn)。
雙擊展開，合并動(dòng)畫
這款流程圖，最大的特點(diǎn)是可以合并展開子流程，并可以指定合并時(shí)收起哪些點(diǎn)，合并后的效果如下：
這樣流程圖就會(huì)清晰很多，如果不想看中間復(fù)雜的子流程合并起來(lái)就可以了。
這里的我們錄制了一個(gè)視頻供大家欣賞：
感興趣的朋友可以發(fā)郵件到tw-service#servasoft.com，我們會(huì)將完整代碼呈現(xiàn)給您。