ht-for-web

电信网络拓扑图自动布局之总线

随声附和 提交于 2019-12-09 11:42:10
在前面《 电信网络拓扑图自动布局 》一文中,我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识,但是都没有深入地描述各种自动布局的用法,我们今天在这边就重点介绍总线的具体实现方案。 在 HT for Web 的连线手册中,有说明可以自定义连线类型,通过 ht.Default.setEdgeType(type, func, mutual) 函数定义,我们今天要描述的总线也是通过这样的方法来实现的。 我们来简单地描述下这个方法,虽然在文档( http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html )中已经描述得很详细了,为了下面的工作能够更好的开展,我这边还是再强调下。 这个函数名是 setEdgeType,顾名思义,它是用来自定义一个 EdgeType 的,那么第一个参数 type 就是用来定义这个 EdgeType 的名称,在 Edge 的样式上设置 edge.type 属性为 type 值,就可以让这条连线使用是我们自定义的 EdgeType。 那么第二个参数呢,就是用来计算连线的走线信息的函数,这个回调函数将会传入四个参数,分别是:edge、gap、graphView、sameSourceWithFirstEdge,其中 edge 就是样式上设置 edge.type

电信网络拓扑图自动布局

ぐ巨炮叔叔 提交于 2019-12-07 17:14:58
在电信网络拓扑图中,很经常需要用到自动布局的功能,在大数据的层级关系中,通过手工一个一个摆放位置是不太现实的,工作量是相当大的,那么就有了自动布局这个概念,来解放布局的双手,让网络拓扑图能够布局出一个优美的图案,当然在一些复杂的布局中,光有自动布局还是不行的,还是需要手工地做些相应的调整,才能让界面图案更加的完美。今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。 在 HT for Web 中有提供两种布局方案,一个是 AutoLayout,一个是 ForceLayout。AutoLayout 提供了几套固定的布局算法,让用户根据不同的需求选择不同的布局算法,比较常用的是 circular(圆形布局)和 symmetic(对称布局)两种布局方式。 上图是 circular 圆形布局的效果,可以看出在较复杂的布局上,可以结合连线呈现一个漂亮的布局结果。 上图是 symmetric 对称布局的结果,可以发现在布局上依据中心点呈相对对称的布局,这种布局方案在空间上看起来会比较紧凑些,比较节约空间。 其他的布局类型在这就不一一讲解了,具体的可以查看我们的 AutoLayout 手册: http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html ForceLayout

HTML5 网络拓扑图性能优化

拜拜、爱过 提交于 2019-12-05 03:48:58
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font)、文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较,你会发现,绘制图片和绘制文本在性能上不是一个等级的,在性能上绘制图片会好太多。 我们今天就来谈谈 HT for Web 性能相关的问题。在 HT 中,有很多地方可以设置文本,每个节点上面都可以设置两个 label 和两个 note 文本,如果全开启的话,绘制一个节点就要附带绘制 4 个文本,假如说绘制 文本的性能消耗是绘制图片性能消耗的 3 倍的话,附带绘制 4 个文本,就想当与多出 12 倍的性能消耗,这节点以多的话,可想而知,不管是哪个引擎都不可能 hold 得住这样的性能消耗。 既然绘制文本的性能消耗无法避免,那么我们要如何提高系统的整体性能呢?换个思路,绘制文本会有高性能消耗,导致操作上面的延迟和卡顿,那么我是不是可以在操作时不绘制文本呢,将文本绘制所消耗的性能节省下来,用在其他的性能消耗上,这样是不是就可以解决操作延迟和卡顿的问题呢? 我们不妨来试试,在 GraphView 中添加若干个 node、edge、group 等节点,并且每个节点上都显示文本(包括线条,上图所示)