HTML5,不只是看上去很美(第三弹:萌萌哒拓扑图分组)-Html5-优质IT资源分享社区

yutingzhinan
论坛版主
论坛版主
  • UID9
  • 粉丝1
  • 关注0
  • 发帖数36
阅读:188回复:0

HTML5,不只是看上去很美(第三弹:萌萌哒拓扑图分组)

楼主#
更多 发布于:2016-06-17 23:27

前言
这段时刻承蒙咱们厚爱,给了我相当大码字的动力,决议节前再更一弹。近来养成了回顾总结的好习惯,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体系来说,仍是很有吸引力的。当技能自身不再有壁垒,咱们更应该重视的是实践事务中运用,比方在画这种安排构造联络非常杂乱的拓扑图时,怎么让图形愈加明晰、易懂,让技能真实落到实处。







优质IT资源分享社区为你提供此文。
本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]


微信小程序开发

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客