首页
学习
活动
专区
工具
TVP
发布

HTML5 网络拓扑图性能优化

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

1.6K60

HTML5 网络拓扑图性能优化

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

1.3K50
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5 网络拓扑图整合 OpenL

在前面《百度地图、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

1.7K60

什么是网络拓扑网络拓扑有哪些类型?

你好,这里是网络技术联盟站。平时经常听到网络拓扑这个名词哈,本文瑞哥带大家详细了解一下网络拓扑,包括网络拓扑的几大类型。什么网络拓扑?...网络拓扑是节点和链路在特定机制和方案中的排列,换句话说,网络拓扑是如何安排在网络中的设备之间进行通信的网络组件,以减少错误、产生更高的带宽速度、保护网络等。...网络拓扑有两种主要类型:物理网络拓扑: 物理拓扑是实际布线和连接布局(物理信号传输介质)逻辑网络拓扑: 逻辑拓扑网络设备的虚拟布局,数据在设备之间通过网络传输的方式,与设备的物理连接无关。...网络拓扑不仅在物理上而且在逻辑上定义了网络的布局、虚拟形状或结构,一个网络可以同时具有一个物理拓扑和多个逻辑拓扑。本文主要关注的是物理拓扑。...网络拓扑的类型在计算机网络中,主要有六种物理拓扑:图片总线拓扑总线拓扑也称为骨干拓扑或线路拓扑,总线拓扑是最简单的拓扑,其中公共总线或通道用于网络中的通信,主要用于小型网络

2.6K41

快速开发基于 HTML5 网络拓扑图应用

对于电信网管拓扑应用,由于网络拓扑图元数据量往往常常非常巨大,虽然 HT 拓扑图组件性能非常强劲,承载好几甚至上十万的网络拓扑矢量图元都毫无压力,但如何实现这么多数据量图元的布局是个问题,如果是规规矩矩的自然比较容易...其实自动布局无法提供算法进行图元摆放,以便达到业务展示的需求,可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》,这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤,其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用,如果需要数据存储可参考《HT...,不收任何约束,可以随心所欲的设计你的网络拓扑图整体系统架构。...更多 HTML5 拓扑图例子可参考:http://www.hightopo.com/demos/index.html ?

1.9K60

快速开发基于 HTML5 网络拓扑图应用

对于电信网管拓扑应用,由于网络拓扑图元数据量往往常常非常巨大,虽然 HT 拓扑图组件性能非常强劲,承载好几甚至上十万的网络拓扑矢量图元都毫无压力,但如何实现这么多数据量图元的布局是个问题,如果是规规矩矩的自然比较容易...其实自动布局无法提供算法进行图元摆放,以便达到业务展示的需求,可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》,这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤,其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用,如果需要数据存储可参考《HT...,不收任何约束,可以随心所欲的设计你的网络拓扑图整体系统架构。...更多 HTML5 拓扑图例子可参考:http://www.hightopo.com/demos/index.html ?

1.9K80

快速开发基于 HTML5 网络拓扑图应用1

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件...简单说来就是:拓扑图是泛化的说法,电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等,简单说就是节点连线构成的这些都是这里指的拓扑图。...用 HT 开发一个网络拓扑图是非常容易的一件事,只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图: ? 这个例子非常基础,几乎完成了服务器与客户端在拓扑上的所有功能。...话不多说,猜猜看这个例子包括 HTML 标签的所有部分总共花了多少行代码?...减去空行也就 50 行,我还做了很多样式部分的设计,毕竟给大家看的例子不能太丑嘛~ 我们在最开始就说明一下,HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和

1.4K20

基于 HTML5 Canvas 绘制的电信网络拓扑

组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构。...常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线型拓扑,在显示上相对其他的结构类型来说更清晰明了,绘制起来也非常容易。...虽然题目起的名字是电信网络拓扑图,几乎所有的拓扑图都能涵盖,例如基本网络图,网络拓扑图,机架图,网络通信图,3D网络图等等。 效果图如下: ? 这个图看起来挺简单的,代码也少,但是内容不少。...首先,机柜01、机柜02、机柜03 都是 ht.Group “组”类型,ht.Group 类型用于作为父容器包含孩子图元,在 GraphView 拓扑图(http://www.hightopo.com)...我们拿机柜02来说吧,机柜02内部有一个“电脑”与“内部网络交换机”之间有两条连线,那么当我们双击机柜02合并时,实际上就相当于机柜02与“内部网络交换机”之间有两条连线了。

1.6K30

基于 HTML5 WebGL 的 3D 网络拓扑

好了,废话不多说,先附上 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:当前对应拓扑组件对象

1.4K50

基于 HTML5 WebGL 的 3D 网络拓扑

好了,废话不多说,先附上 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:当前对应拓扑组件对象

1.2K30

快速开发基于 HTML5 网络拓扑图应用--入门篇(一)

计算机网络拓扑结构是引用拓扑学中研究与大小,形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络拓扑结构。...网络拓扑结构反映出网中各实体的结构关系,是建设计算机网络的第一步,是实现各种网络协议的基础,它对网络的性能,系统的可靠性与通信费用都有重大影响。...拓扑在计算机网络中即是指连接各结点的形式与方法;在网络中的工作站和服务器等网络单元抽象为“点”;网络中的电缆等抽象为“线”。影响网络性能、系统可靠性、通信费用。...拓扑还分为:总线拓扑、星型拓扑、环形拓扑树形拓扑以及网状拓扑。这篇文章写的案例就是总线拓扑中的一个分支,我们一步一步来搭建这个拓扑图形。 示例图片: ?...HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性,但并不意味着不允许用户直接操作 HTML 原生元素, 有 HTML5 开发经验的程序员,在了解 HT 系统机制的前提下,大可运用各种 HTML5

1.1K40
领券