摘要：比如這種節點較多的單層拓撲稍復雜一些的再復雜一些的在這些拓撲圖中常見的場景是，很多網絡節點需要組成一組，這常被稱為網元組。常規的分組形狀有圓形矩形平行四邊形等，無論哪種形狀，分組多了后，就會產生審美疲勞。

這段時間承蒙大家厚愛，給了我相當大碼字的動力，決定節前再更一彈。最近養成了回顧總結的好習慣，sf真是個不錯的地方。

最近忙著給客戶折騰一個復雜的多層嵌套關系?？蛻粢痪湓挕耙每?！”，哥就忙白了頭啊，還好趕在節前解決了，不然真的要隨廣大股民排隊投江慶祝端午了。

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

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

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

稍復雜一些的：

再復雜一些的：

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

這次客戶的需求中，最大的難點就是需要有五層網元組的嵌套，五層同時展開時，要求清晰美觀。常規的分組形狀有圓形、矩形、平行四邊形等，無論哪種形狀，分組多了后，就會產生審美疲勞。比如，我讓設計師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到畫布上。看看效果：

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

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

//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，雖然已經不是什么新鮮技術了，但直接在瀏覽器中繪制網絡拓撲圖的邏輯關系，而不需要安裝任何插件，對于很多正在更新換代的OSS系統來說，還是很有吸引力的。當技術本身不再有壁壘，我們更應該注重的是實際業務中應用，比如在畫這種組織結構關系非常復雜的拓撲圖時，如何讓圖形更加清晰、易懂，讓技術真正落到實處。