媒介

这段时刻承蒙人人厚爱，给了我相当大码字的动力，决议节前再更一弹。近来养成了回顾总结的好习惯，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到画布上。看看结果：

再经由过程增添圆角、切角、增添暗影、设置差别的边框线宽，让分组进一步发生“层层递进”的觉得。如今就剩下画折角的细节了。

折角这里，须要画一个被折下来的直角三角形。三角形的颜色，应该是“纸”的反面颜色。这里警惕定义三角形的外形，并举行添补：

//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体系来讲，照样很有吸引力的。当手艺自身不再有壁垒，我们更应该注意的是现实营业中运用，比方在画这类构造构造关联非常庞杂的拓扑图时，怎样让图形越发清晰、易懂，让手艺真正落到实处。