HTML5拓扑图形组件设计之道（一）

HT for Web（http://www.hightopo.com/guide/readme.html）提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供：Everything you need to create cutting-edge 2D and 3D visualization. 这个愿景从功能上是个相当长的战线，从设计架构上也是极具挑战性的，其实HT团队是非常保守的，我们从不贪多图大，只做我们感觉自己能得更好，能给用户综合体验更佳的功能，在这样理念驱动下我们慢慢形成了这样的愿景，慢慢实现了几个有意义的里程碑，慢慢积累下了不少图形组件设计上的创新和经验，我不知道这个系列会写多少篇，也许永远也不会结束，也没有系统的提纲规划，想到什么就写什么，只希望文章能启发有兴趣的同学对图形组件设计更深的思考就足够了。

 

讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。完整的前端设计是需要考虑到后台加载并发等因素，但本系列更侧重于纯客户端图形组件，不涉及网络通讯部分的思考，例如最近阿里无线前端招聘让谈谈：讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。这是个能讨论出很多方方面面，让你了解面试者的好话题，但这里讨论的话题会与以下关键字更为相关：企业应用、Single Page Application、重客户端交互、监控、MV*等。

如Linus大神所言：Talk is cheap, show me the code.  因此我选择在话题展开之前，先用HT来扩展定制几个应用案例，以便大家了解HT组件及其扩展设计思路。

http://www.hightopo.com/guide/guide/core/propertyview/examples/example_custom.html

 

 

 

熟悉Flex的程序员应该都了解Tour de Flex这个包罗万象的大杂烩，其中的网络监控拓扑Network Monitor特别其动画切换效果一直给我很深印象，这里不可能有篇幅实现完整例子，我们仅尝试实现其展示CPU和MEM的界面部分。

实现的最终效果如上图所示，模型数据就两个数值，一个代表CPU占用率，一个代表内存占用率，左侧通过HT的图形组件GraphView自定义了矢量图形展示，右上角自定义了属性页PropertyView的两单元格的Renderer，右下角两个Slider可拖动改变CPU和MEN值。

此例子麻雀虽小五脏俱全，三个部分分别采用三种方式实现了自定义组件，同时不同组件共享同一数据源，在呈现的基础上还支持桌面和移动端的Mouse和Touch的交互，还有不同终端屏幕的组件布局功能。

业务上需要在占用率小于40%时呈现律师，40%-70%时显示黄色，超过70%时呈现红色，因此定义了如下getColor的工具函数：

1 2 3 4 5 6 7

getColor = function (value) {      if  (value < 40)          return  '#00A406' ;      if  (value < 70)          return  '#FFCC00' ;      return  '#A60000' ; };

PropertyView上采用的最基础和原始的方式，通过Canvas画笔进行单元格的自定义绘制，在注册PropertyView时重载drawPropertyValue函数即可实现单元格自定义Renderer的绘制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

drawFunc = function (g, value, x, y, w, h){      g.fillStyle = '#A1A1A3' ;      g.beginPath();      g.rect(x, y, w, h);      g.fill();                         g.fillStyle = getColor(value);      g.beginPath();      g.rect(x, y, w * value / 100, h);      g.fill();      ht.Default.drawText(g, value + '%' , '12px Arial' , 'white' , x, y, w, h, 'center' ); }; propertyView.addProperties([      {          displayName: 'CPU' ,          drawPropertyValue: function (g, property, value, rowIndex, x, y, w, h, data, view)   {              drawFunc(g, data.a( 'cpu' ), x, y, w, h);          }      },      {