HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响...我们不妨来试试，在 GraphView 中添加若干个 node、edge、group 等节点，并且每个节点上都显示文本（包括线条，上图所示），看看拓扑的缩放效果怎么样。...我们来看看具体的 Demo，链接：http://www.hightopo.com/demo/labelVisible/visible.html。接下来解析下具体代码的实现。...接着是常见网络拓扑图 GraphView 组件，并将其添加到 DOM 中，重载 GraphView 的 getLabel 方法设置图元的文本，让每个节点都有文本。...具体 Demo 链接：http://www.hightopo.com/demo/labelVisible/invisible.html。
在前面《百度地图、ECharts整合HT for Web网络拓扑图应用》我们有介绍百度地图和 HT for Web 的整合，我们今天来谈谈 OpenLayers 和 HT for Web 的整合。...HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT for Web与开发免费的OpenLayers...HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出...仅在缩放达到一定级别才显示更详细的内容，否则缩小时所有城市信息都显示完全无法查看，多少也能提高显示性能 以下为最终效果的抓图、视频和源代码：http://v.youku.com/v_show/id_XODM5Njk0NTU2.html
你好，这里是网络技术联盟站。平时经常听到网络拓扑这个名词哈，本文瑞哥带大家详细了解一下网络拓扑，包括网络拓扑的几大类型。什么网络拓扑？...网络拓扑是节点和链路在特定机制和方案中的排列，换句话说，网络拓扑是如何安排在网络中的设备之间进行通信的网络组件，以减少错误、产生更高的带宽速度、保护网络等。...网络拓扑有两种主要类型：物理网络拓扑： 物理拓扑是实际布线和连接布局（物理信号传输介质）逻辑网络拓扑： 逻辑拓扑是网络设备的虚拟布局，数据在设备之间通过网络传输的方式，与设备的物理连接无关。...网络拓扑不仅在物理上而且在逻辑上定义了网络的布局、虚拟形状或结构，一个网络可以同时具有一个物理拓扑和多个逻辑拓扑。本文主要关注的是物理拓扑。...网络拓扑的类型在计算机网络中，主要有六种物理拓扑：图片总线拓扑总线拓扑也称为骨干拓扑或线路拓扑，总线拓扑是最简单的拓扑，其中公共总线或通道用于网络中的通信，主要用于小型网络。
对于电信网管拓扑应用，由于网络拓扑图元数据量往往常常非常巨大，虽然 HT 拓扑图组件性能非常强劲，承载好几甚至上十万的网络拓扑矢量图元都毫无压力，但如何实现这么多数据量图元的布局是个问题，如果是规规矩矩的自然比较容易...其实自动布局无法提供算法进行图元摆放，以便达到业务展示的需求，可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》，这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...，不收任何约束，可以随心所欲的设计你的网络拓扑图整体系统架构。...更多 HTML5 拓扑图例子可参考：http://www.hightopo.com/demos/index.html ?
在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局...也不需要太大的改造，我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台.../util.js").reloadModel; 这样的方式得到该函数进行调用，细节可以参考 http://nodejs.org/api/modules.html 的章节 3、这个例子是有缺陷的，以下视频播放过程你会发现...当然你可以改进demo，采用http://nodejs.org/api/cluster.html的cluster方式，实现真正的后台多核任务处理。...http://v.youku.com/v_show/id_XNjc1MjY2ODE2.html
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用，HT 内部封装了一个拓扑图形组件 ht.graph.GraphView（以下简称 GraphView）是 HT 框架中 2D 功能最丰富的组件...简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。...用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图： ? 这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。...话不多说，猜猜看这个例子包括 HTML 标签的所有部分总共花了多少行代码？...减去空行也就 50 行，我还做了很多样式部分的设计，毕竟给大家看的例子不能太丑嘛~ 我们在最开始就说明一下，HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和
首先我们必须清楚如何绘制矢量（http://hightopo.com/guide/guide/core/vector/ht-vector-guide.html）？...comps 矢量图形的组件 Array 数组，每个数组对象为一个独立的组件类型（http://hightopo.com/guide/guide/core/vector/ht-vector-guide.html...数据绑定（http://hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html）没有那么难，绑定的格式很简单，只需将以前的参数值用一个带
这个算法，主要是为输出一个无环图的拓扑序列 算法思想： 主要依赖一个栈，用来存放没有入度的节点，每次读取栈顶元素，并将栈顶元素的后继节点入度减一，如果再次出现入度为零的节点，就加入到栈中。
组合逻辑描述网路功能的体系结构，配置形式描述网路单元的邻接关系，即以交换中心（或节点）和传输链路所组成的拓扑结构。...常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等，本文的例子主要描绘的是总线型拓扑，在显示上相对其他的结构类型来说更清晰明了，绘制起来也非常容易。...虽然题目起的名字是电信网络拓扑图，几乎所有的拓扑图都能涵盖，例如基本网络图，网络拓扑图，机架图，网络通信图，3D网络图等等。 效果图如下： ? 这个图看起来挺简单的，代码也少，但是内容不少。...首先，机柜01、机柜02、机柜03 都是 ht.Group “组”类型，ht.Group 类型用于作为父容器包含孩子图元，在 GraphView 拓扑图（http://www.hightopo.com）...我们拿机柜02来说吧，机柜02内部有一个“电脑”与“内部网络交换机”之间有两条连线，那么当我们双击机柜02合并时，实际上就相当于机柜02与“内部网络交换机”之间有两条连线了。
好了，废话不多说，先附上 Demo：http://www.hightopo.com/demo/blog_3dedge_20170630/index.html ? ...所在位置，默认值为 [0, 0, 0]； 详情看 HT for Web 3D 手册 手册 （http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html...方式在服务器的位置添加图片，详情可看 HT for Web 入门手册（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html...dataModel.add(device2); dataModel.add(device2_edge); } 3、连线 HT for Web 提供了默认的直线和多点的连线类型能满足大部分基本拓扑图形应用... edge：当前连线对象； gap：多条连线成捆时，本连线对象对应中心连线的间距； graphView：当前对应拓扑组件对象
mtlUrl, params) 函数将模型加载进去，其中的 params 部分可以参考 http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html...ht.Default.setShape3dModel 函数(HT for Web 建模手册 http://www.hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html...不同的轴可以生成不同的形状，对于颜色等风格方面的设置可以参考 HT for Web 风格手册(http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html...segments 指的是如何连接这几个坐标点，可参考 HT for Web 形状手册（http://hightopo.com/guide/guide/core/shape/ht-shape-guide.html...附上本文例子：http://www.hightopo.com/demo/3DTopology/index.html
topology-scanner Topology-Scanner是WeOps团队免费开放的一个网络拓扑自动扫描模块，可以自动发现网络设备的类型、网络设备之间的互联 使用方式 java -jar ....拓扑发现请求参数文件(request.json) ips [全网发现] 模式时，为必填项。核心设备的ip, 多个ip 用逗号隔开。range 参数选填,起过滤作用。...拓扑发现运行的参数文件(discovery.properties) 3.设备oid 与设备类型字典文件(systemoid.xml/getterConfig.xml) 为了能更精确的采集网络设备上的各种表
本例位置：http://www.hightopo.com/demo/3DTopology/index.html 先来看看整体实现的效果图： ?...mtlUrl, params)函数将模型加载进去，其中的params部分可以参考http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html
计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点，把传输介质抽象为一条线，由点和线组成的几何图形就是计算机网络的拓扑结构。...网络的拓扑结构反映出网中各实体的结构关系，是建设计算机网络的第一步，是实现各种网络协议的基础，它对网络的性能，系统的可靠性与通信费用都有重大影响。...拓扑在计算机网络中即是指连接各结点的形式与方法；在网络中的工作站和服务器等网络单元抽象为“点”；网络中的电缆等抽象为“线”。影响网络性能、系统可靠性、通信费用。...拓扑还分为：总线拓扑、星型拓扑、环形拓扑树形拓扑以及网状拓扑。这篇文章写的案例就是总线拓扑中的一个分支，我们一步一步来搭建这个拓扑图形。 示例图片： ?...HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性，但并不意味着不允许用户直接操作 HTML 原生元素， 有 HTML5 开发经验的程序员，在了解 HT 系统机制的前提下，大可运用各种 HTML5
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
