转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分为不同的域,比如一级域,二级域,三级域,….N级域,而且不同域之间会有连线。对于这个需求,按照常规的想法,使用group岂不是很简单,一级域是一个group,二级域也是一个group,二级域的group是一级域的父亲,以此类推。但是这样有个问题,如果域比较多,会造成group的过度嵌套,界面中group多了之后,不仅用户体验下降,而且会严重影响性能,所以倒不如直接用树,可以很直观的体现各个域之间的层级关系。
下面是布局的代码,代码很简单,相信熟悉twaver的人很容易看懂。
function layoutRing(){ //setup all group rings. var groups={}; box.forEach(function(data){ if(data instanceof twaver.Node){ var node=data; node.setClient('x', node.getLocation().x); node.setClient('y', node.getLocation().y); var groupName=data.getClient('group'); if(!groups[groupName]){ groups[groupName]=[]; } var rings=groups[groupName]; var level=parseInt(node.getClient('level')); if(rings.length<=level){ rings.push([]); } var ring=rings[level]; ring.push(node); } }); cleanConnections(); layouter.doLayout('topbottom'); for(var groupName in groups){ //get this group bounds. var x1=undefined, y1=undefined, x2=undefined, y2=undefined; var rings=groups[groupName]; for(var level=0;level<rings.length; level++){ var ring=rings[level]; for(var index=0;index<ring.length;index++){ var node=ring[index]; x1=x1 ? Math.min(x1, node.getLocation().x) : node.getLocation().x; y1=y1 ? Math.min(y1, node.getLocation().y) : node.getLocation().y; x2=x2 ? Math.max(x2, node.getLocation().x) : node.getLocation().x; y2=y2 ? Math.max(y2, node.getLocation().y) : node.getLocation().y; var target=box.getDatas().get(Math.floor(Math.random()*box.size())); if(target instanceof twaver.Node && target!==node){ var connection=new twaver.Link(node, target); connection.setStyle('link.width',0.2); connection.setStyle('link.color', '#aaaaaa'); connection.setClient('connection',true); connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2); box.add(connection); } } } var width=x2-x1; var height=y2-y1; //layout each ring for this group. for(var level=0;level<rings.length; level++){ var ring=rings[level]; for(var index=0;index<ring.length;index++){ var node=ring[index]; var radius=node.getLocation().y-y1; var range=Math.PI*2; var angle=(node.getLocation().x-x1)/width * range; if(level>1 && (level==rings.length-1 || rings.length<4)){ angle=node.getParent().getClient('angle')+(angle-node.getParent().getClient('angle'))/3; } var x=radius*Math.cos(angle); var y=radius*Math.sin(angle); node.setLocation(node.getClient('x'),node.getClient('y')); node.setClient('angle', angle); move(node, x, y); } } } }
布局中的可以加入动画效果,提升用户体验,关于动画的相关文档可以参考文档:
function move(node, x, y){ var x0=node.getClient('x'); var y0=node.getClient('y'); new twaver.Animate({ from: { x: x0, y: y0 }, to: { x: x, y: y }, type: 'point', delay: 100, dur: 1000, easing: 'easeNone', onUpdate: function (value) { node.setLocation(value.x, value.y); } }).play(); }
如果有对这个示例感兴趣的朋友,可以发邮件索取相关代码,邮箱地址:jack.shangguan@servasoft.com
相关推荐
TWaver HTML5 开发指南代码 拓扑工具 机房展示 轻松容易 很简单
Twaver学习案例的例子
TWaver HTML5 Developer Guide, 官方的开发指南。
twaver-html5-5.9.0-api
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...
twaver示例可直接放到jetty下运行,含twaver.js alarm.html资源。
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...
TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...
我希望说点特别的东西,更有价值的东西,不只是为TWaver用户,更包括所有从事GUI开发的人和团队,提供对产品设计有借鉴意义的内容,于是我修改了提纲,精简了TWaver功能点的内容,增加了更多TWaver设计思想与产品...
TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码。TWaver的3d图形组件库,小demo
TWaver-flex的库TWaver.swc
TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 TWaver的图形组件库中提供了...
twaver for flex 开发手册
twaver-java-3.7 文档
NULL 博文链接:https://bianrongxin.iteye.com/blog/1474676
最新的TWaver可视化学习开发包,用TWaver做出更炫更美的界面。
Twaver Web SVG 开发说明文档,花钱买的。希望大家对开发电信网管的WEB模式有帮助!
twaver web结合extjs源码学习资料
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...