HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响...我们不妨来试试，在 GraphView 中添加若干个 node、edge、group 等节点，并且每个节点上都显示文本（包括线条，上图所示），看看拓扑的缩放效果怎么样。...接着是常见网络拓扑图 GraphView 组件，并将其添加到 DOM 中，重载 GraphView 的 getLabel 方法设置图元的文本，让每个节点都有文本。
在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一， 在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的...下面我以一个进度环为例，来探究一下如何使用ht.js封装出一个拓扑组件。 效果图 ?
对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。...大家可以看到我们的主屏幕上已经多了一个”APP”，如果细心优化，用户完全无法区分这是一个原生应用还是HTML5应用，极大提升了用户体验。 是不是很神奇？...接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果： ?...缓存的用法也有两篇很好的文档： 1、HTML5离线缓存 2、在客户端存储数据 最后上一段操作视频，看一下最终效果，优酷链接：http://v.youku.com
在前面《百度地图、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应用中我们需要根据图元的经纬度信息换算出
使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具有易上手、高性能、易扩展、组件丰富、跨平台等特点..._hoverNode = newNode; } }); graphView.addToDOM(); } 通过 getView() 可以获取到拓扑组件的根层 div，对其监听鼠标移动事件
HT for Web（http://www.hightopo.com/guide/readme.html）提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供...讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。...熟悉Flex的程序员应该都了解Tour de Flex这个包罗万象的大杂烩，其中的网络监控拓扑Network Monitor特别其动画切换效果一直给我很深印象，这里不可能有篇幅实现完整例子，我们仅尝试实现其展示
结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分： // init data...、连线、组、子网等图元内容，并填充如图元名字、连线颜色、告警内容等属性信息，而因为 HT 技术基于 HTML5，因此大部分工业控制 Web SCADA 客户都采用了 WebSocket 的实时通讯方式，...对于电信网管拓扑应用，由于网络拓扑图元数据量往往常常非常巨大，虽然 HT 拓扑图组件性能非常强劲，承载好几甚至上十万的网络拓扑矢量图元都毫无压力，但如何实现这么多数据量图元的布局是个问题，如果是规规矩矩的自然比较容易...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...更多 HTML5 拓扑图例子可参考：http://www.hightopo.com/demos/index.html ?
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局...也不需要太大的改造，我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。
前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇，所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明，我写了一个...
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台
但，我还是不喜欢DOM上太重都是元素，不喜欢庞大包罗万象搞得没有一家能完美实现的标准，另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活，基于HTML5...HT for Web不仅定义矢量格式、实现了矢量绘制，还提供了矢量编辑工具设计器，用户拖拖拽拽就能绘制出矢量图形，然后导出JSON，注册到HT之后即可使用到所有的HT组件上，注意哦：是所有组件，不仅仅是拓扑
拓扑学历史 拓扑英文名是Topology，直译是地志学，最早指研究地形、地貌相类似的有关学科。 几何拓扑学是十九世纪形成的一门数学分支，它属于几何学的范畴。有关拓扑学的一些内容早在十八世纪就出现了。...不同学科对拓扑的定义不尽相同 集合拓扑：拓扑是集合上定义的一种结构。...点集拓扑学 点集拓扑学（Point Set Topology），有时也被称为一般拓扑学（General Topology），是数学的拓扑学的一个分支。...最简单(粗)的拓扑为平凡拓扑，它只包含T本身和空集，最复杂(细)的拓扑的构成开集为T的所有子集。 同一个集合X，若指定不同的拓扑，则构造出不同的拓扑空间。...转载本站文章《代数拓扑\集合拓扑\代数拓扑\拓扑关系\拓扑结构_笔记》, 请注明出处：https://www.zhoulujun.cn/html/theory/math/2019_0929_8164.html
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用，HT 内部封装了一个拓扑图形组件 ht.graph.GraphView（以下简称 GraphView）是 HT 框架中 2D 功能最丰富的组件...简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。...用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图： ? 这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。...减去空行也就 50 行，我还做了很多样式部分的设计，毕竟给大家看的例子不能太丑嘛~ 我们在最开始就说明一下，HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和...接下来解析代码部分，首先，搭建拓扑图场景： dm = new ht.DataModel();//数据容器 gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
组合逻辑描述网路功能的体系结构，配置形式描述网路单元的邻接关系，即以交换中心（或节点）和传输链路所组成的拓扑结构。...常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等，本文的例子主要描绘的是总线型拓扑，在显示上相对其他的结构类型来说更清晰明了，绘制起来也非常容易。...虽然题目起的名字是电信网络拓扑图，几乎所有的拓扑图都能涵盖，例如基本网络图，网络拓扑图，机架图，网络通信图，3D网络图等等。 效果图如下： ? 这个图看起来挺简单的，代码也少，但是内容不少。...首先，机柜01、机柜02、机柜03 都是 ht.Group “组”类型，ht.Group 类型用于作为父容器包含孩子图元，在 GraphView 拓扑图（http://www.hightopo.com）...center和right }); group.setPosition(x, y);//设置组的位置 group.setImage('images/服务器.json');//设置拓扑上展现的图片信息
并将其加入DOM： dataModel = new ht.DataModel();//创建数据模型容器 graphView = new ht.graph.GraphView(dataModel);//创建拓扑图组件... edge：当前连线对象； gap：多条连线成捆时，笨连线对象对应中心连线的间距； graphView：当前对应的拓扑组件对象
dataModel.add(device2); dataModel.add(device2_edge); } 3、连线 HT for Web 提供了默认的直线和多点的连线类型能满足大部分基本拓扑图形应用... edge：当前连线对象； gap：多条连线成捆时，本连线对象对应中心连线的间距； graphView：当前对应拓扑组件对象
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
