qt实现拓扑图_数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.

这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击 http://www.hightopo.com/guide/readme.htmlHT 手册入口玩一玩。

这样综合并可搜索的手册入口居然还常被问及 HT 的 Demo 在哪里？只能怪这些年深入人心的极致用户体验理念，把人惯得包括很多程序员都如此之“懒”，当然也怪我们没把用户体验的最后一公里做到位，于是最近 wangyinlong 同学人工例子抓图，将数百个手册例子进行了归类整理，最终形成了方便大家直观查找所有 HT 例子的页面：http://www.hightopo.com/demos/index.html

很明显 http://www.hightopo.com/demos/index.html相比 http://www.hightopo.com/guide/readme.html 页面，对于 HT 老用户包括我们自己做技术支持，都感觉查找例子更直观方便，但对于 HT 初学者，面对这一堆数百个涵括通用组件、网络拓扑图组件、3D 组件、矢量图形、各种编辑器等等五法八门的 HTML5 例子盛宴，往往无从下手，为此我打算写个《数百个HTML5例子学习HT图形组件》的系列文章，引导各种电力、电信、工控 SCADA 等不同行业领域用户，学习使用 HT 这全套一站式 HTML5 图形组件。

拓扑图组件作为最典型的 HT 客户需求应用，自然是首篇登场。

HT 的拓扑图组件主要基于 HTML5 的 Canvas 技术，拓扑图是电力和电信的叫法，但该组件远不仅仅用于呈现节点和连线，在 HT 里面我们没把该组件狭义的称为 Topology、Network 或 Diagram，我们将该组件类名称为更通用的 GraphView，只要你有想象力，你可以用拓扑图组件做出任何其他组件，对于一些需求你想不出来用啥组件实现时，往往就是拓扑图组件需要站出来发力了：

可能大部分不在游戏领域混的同学会好奇上面两张图是什么鬼？这两张是开源的 HTML5 游戏引擎工具 QICI Engine (https://github.com/qiciengine/qiciengine)游戏工程抓图，有兴趣的同学可到 Github 上下载试玩。

QICI Engine：A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.

整个 QICI Engine 的 HTML5 游戏引擎编辑工具就是基于 HT 组件定制开发出来的，上图刀塔场景的资源管理器就是图标可缩放，图集可展开合并，可缩小变成树层次的 GraphView 拓扑图，而第二张的动作编辑器、曲线编辑器等等部分也都是 GraphView 的身影。

现在你应该能理解为什么我说拓扑图组件几乎可作出任何其他组件，当然定制其他组件是需要