前言

前一篇3D機房好像有點火，看來輕量的Web 3D是大勢所趨，當時選擇WebGL而不是U3D真是灰常英明的抉擇。

3D雖然炫酷，但在真正的企業應用裡，資料、關係的呈現還是要回到傳統2D介面，而HTML5是目前的最佳選擇。像HTML5的canvas，雖然已經不是什麼新鮮技術了，但直接在瀏覽器中繪製網路拓撲圖的邏輯關係，而不需要安裝任何外掛，對於很多正在更新換代的OSS系統來說，還是很有吸引力的。

最近忙著給客戶折騰一個複雜的多層巢狀關係，最後的成果還是比較有成就感的。

需求描述

先簡單描述下這次客戶的需求。

現實應用中，網路拓撲圖結構可能很簡單，也可能非常複雜。

比如這種節點較多的單層拓撲：

稍複雜一些的：

在這些拓撲圖中常見的場景是，很多網路節點需要組成一組，這常被稱為“網元組”。一般來說，網元組會有一個形狀，雙擊可以展開/閉合。如下圖：

這次客戶的需求中，最大的難點就是需要有五層網元組的巢狀，五層同時展開時，要求清晰美觀。常規的分組形狀有圓形、矩形、平行四邊形等，無論哪種形狀，分組多了後，就會產生審美疲勞。比如，我讓設計師mm簡單地把五層巢狀畫個圖，它看起來會是這樣：

我把這個圖給客戶看了以後，客戶表示希望“結構能夠更加清晰”。那天，魔都大雨傾盆，我抓耳撓腮一個下午，終於有了一些靈感。

顏色

怎樣才能使得結構效果更加清晰？我想到的是用顏色。顏色永遠是圖形設計裡面的第一要素。如果分組顏色千篇一律，自然就看不太清楚包含關係。但是顏色太多五顏六色，顯然也不符合電信UI系統的風格。那顏色要如何設定呢？層層巢狀的分組，層層……叮！你有沒有想到一種蔬菜？

（此處哼唱“如果你可以一層一層一層地剝開我的心……”一百遍……）

這顆大洋蔥看上去層次分明，是因為它的顏色從內到外有一定規律的變化：漸變。說到漸變，又想起最近GF推薦的一枚遊戲，大概內容是按照顏色的漸變規律來排列一些方塊。（很無聊有沒有？）

不過，前端設計中，配色倒是很重要的一個環節。

總之，想好了用漸變的配色來使巢狀組更清晰後，就大膽地嘗試一下：

var group = new twaver.Group();
group.setStyle('group.fill.color', style[3]);
group.setStyle('group.deep', 0);
group.setStyle('group.outline.width'
 
, style[1]);
group.setStyle('group.outline.color', style[0]);
group.setStyle('group.shape', 'roundrect');         
group.setStyle('select.style', 'none');
group.setStyle('vector.outline.pattern', style[2]);
group.setStyle('label.font', '14px "Microsoft Yahei"');
group.setStyle('whole.alpha', 0.8);
group.setStyle('group.padding', -10);
group.setStyle('label.position', 'topright.topleft');
group.setName(name);
group.setLocation(100+150*level, 300);

box.add(group);         

資料量更大的時候，看看分組是不是會更加清晰？

更多顏色

這個圖做出來之後，拿給周圍幾個同事看，大家紛紛表示不錯，但是似乎有一些死板，不夠生動。生動。。那就是要活靈活現的，於是我繼續抓耳撓腮，又想到了一些瓜果蔬菜：

大自然鬼斧神工，果然還是我的配色不夠明豔啊。我又讓設計師mm給找了幾個色值調整了一下：

看起來明朗多了。

折角

有了寫花瓣層疊的感覺，是不是舒服多了？不過，方方正正的組的形狀，還是太死板，缺乏立體感。看到桌子上的一張折了角的白紙，突然有了靈感。

給方形的組做一個折角效果，不知效果如何。要做這個效果，就要重寫group的繪製，自己接管2d繪製了。Group的形狀將不再是一個矩形，而是一個切角的矩形。

//draw round rect body.
var roundRadius=10;
ctx.save();
ctx.beginPath();
ctx.moveTo(rect.x+roundRadius, rect.y);
ctx.lineTo(rect.x+rect.width-60, rect.y);
ctx.lineTo(rect.x+rect.width, rect.y+28);
ctx.lineTo(rect.x+rect.width, rect.y+rect.height-roundRadius);
ctx.quadraticCurveTo(rect.x+rect.width, rect.y+rect.height, rect.x+rect.width-roundRadius, rect.y+rect.height);
ctx.lineTo(rect.x+roundRadius, rect.y+rect.height);
ctx.quadraticCurveTo(rect.x, rect.y+rect.height, rect.x, rect.y+rect.height-roundRadius);
ctx.lineTo(rect.x, rect.y+roundRadius);
ctx.quadraticCurveTo(rect.x, rect.y, rect.x+roundRadius, rect.y);
ctx.save();
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor ="#555555";
ctx.fill();
ctx.restore();
ctx.lineWidth=node.getStyle('group.outline.width');
ctx.strokeStyle=node.getStyle('group.outline.color');
ctx.stroke();       
ctx.restore();

通過繪製一個帶圓角的矩形並切掉一個角，stroke到畫布上。看看效果：

再通過增加圓角、切角、增加陰影、設定不同的邊框線寬，讓分組進一步產生“層層遞進”的感覺。現在就剩下畫折角的細節了。

折角這裡，需要畫一個被折下來的直角三角形。三角形的顏色，應該是“紙”的背面顏色。這裡小心定義三角形的形狀，並進行填充：

//draw corlor.
ctx.fillStyle=node.getStyle('group.outline.color');             
ctx.lineWidth=node.getStyle('group.outline.width');
ctx.lineJoin='bevel';
ctx.beginPath();
ctx.moveTo(rect.x+rect.width-60, rect.y);
ctx.lineTo(rect.x+rect.width-23-10, rect.y+47-10);
ctx.quadraticCurveTo(rect.x+rect.width-23, rect.y+46, rect.x+rect.width-23+10, rect.y+47-10);
ctx.lineTo(rect.x+rect.width, rect.y+28);
ctx.closePath();
ctx.save();
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor ="#777777";
ctx.fill();                         
ctx.restore();
ctx.strokeStyle=node.getStyle('group.outline.color');
ctx.stroke();   

效果如下，立體感出來以後，是不是生動了很多？

這裡要注意的是，折角的陰影也要設定，並且填充要使用和邊框相同的顏色，增加“摺紙”的立體感。

小細節

摺紙效果有了，不過左側上方略顯空曠，於是利用canvas的2d來練練手，畫個path看看：

ctx.save();
ctx.strokeStyle='#27A3DA';
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(rect.x+31, rect.y+5);
ctx.lineTo(rect.x+25, rect.y+20);
ctx.bezierCurveTo(rect.x+25, rect.y+26, rect.x+28, rect.y+28, rect.x+32, rect.y+23);
ctx.lineTo(rect.x+42, rect.y-2);
ctx.bezierCurveTo(rect.x+42, rect.y-12, rect.x+32, rect.y-10, rect.x+32, rect.y-5);
ctx.lineTo(rect.x+29, rect.y-1);

ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 1;
ctx.shadowColor ="#aaaaaa";
ctx.stroke();
ctx.restore();

執行一下，你猜是神馬？

哈哈，一個小回形針瞬間躍然紙上了，感覺萌萌噠！為了增加立體感，回形針也是要設定陰影的，不過偏移不要太大、顏色要淡一些，像這樣：

適當明豔的色彩，加上折角、陰影和小回形針，這回這個層層巢狀總算是清晰又好看了吧？

執行一下，拖拖拽拽，因為之前已經做了不少圖示、線條的樣式，所以總體效果還是很不錯的！

後記

之前也說，HTML5的canvas，雖然已經不是什麼新鮮技術了，但當技術本身不再有壁壘，我們更應該注重的是實際業務中應用，比如在畫這種組織結構關係非常複雜的拓撲圖時，如何讓圖形更加清晰、易懂，讓技術真正落到實處。如果你有更加好的這類拓撲圖的解決方案，也可以和我聯絡交流：[email protected]