HT一直被客户称道的就是其全矢量化的设计特色，矢量相比传统图片优点太多了：
-
矢量可无级缩放，界面不失真不模糊
-
描写叙述矢量的文本内容远比图片小得多
-
眼下各种window.devicePixelRatio不一致的设备。矢量可能是唯一彻底的解决方式
-
业务数据绑定
提起矢量一般都会想到SVG，但这是个坑人的玩意儿，这么多年就没见一个完好的实现者，浏览器实现千差万别。高级属性根本不能玩。Adobe SVG Viewer好多年前就停止更新，Flex支持SVG导入也仅供基本属性玩玩，当然SVG也不是一无是处highcharts还是运用得非常不错，Java领域也有维护多年的 Batik 项目可用。
但，我还是不喜欢DOM上太重都是元素，不喜欢庞大包罗万象搞得没有一家能完美实现的标准，另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描写叙述图形实在是笨重不灵活，基于HTML5的HT for Web非常自然的选择了一条自己定义简单标准的JSON格式路线。
上图是HT注冊图片函数，对于传统图片自然也能够通过ht.Default.setImage(‘sunrise’, ‘../res/sunrise.png’)的方式注冊url路径，但当注冊对象是HT矢量格式标准的JSON数据时。则HT会採用该JSON描写叙述的矢量信息进行图形绘制，上图的JSON事实上仅是左側图片的描写叙述。右側红色的四个sunrise则是将以注冊的JSON作为基础，进行可复用实现嵌套定义的效果
|
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
26
27
28
29
30
31
|
ht.Default.setImage('group-sunrise', { 240, height: 160, clip: true, color: 'red', comps: [ { type: 'image', name: 'sunrise', rect: [0, 0, 120, 80], opacity: 0.3 }, { type: 'image', name: 'sunrise', rect: [120, 0, 120, 80], rotation: Math.PI / 4 }, { type: 'image', name: 'sunrise', rect: [0, 80, 120, 80], shadow: true }, { type: 'image', name: 'sunrise', rect: [120, 80, 120, 80] } ]}); |
如上代码注冊了一个名为’group-sunrise’的新矢量，其由四部分组件，每一个部分都是已经注冊的’sunrise’矢量，并可对不同的部分进行独立的旋转、加阴影和透明度等效果设置。
至此仅能够说重造了个SVG的轮子没啥特殊。假设仅能达到矢量化的功能，那费那么大劲自己定义一套标准也没大意义，事实上HT for Web设置矢量的初衷并不是为了矢量化。而是HT产品的核心理念：让程序猿更轻松的开发图形界面！
作为一个走过MFC、Qt、Swing、Flex、Silverlight/WPF和Cocoa的老前端（这里提前端有点不合时代。现在提前端似乎仅指页面）程序猿，我能够绘制不错的自己定义界面。但我还是非常怕客户东改西改，特别在电力和工控等行业有一大堆的行业图标须要你绘制。本来非常有趣的Graph 2D画图技术，但每天不断反复的绘制不同类型的设备的体力活也会让人崩溃。因此HT for Web不仅定义矢量格式、实现了矢量绘制，还提供了矢量编辑工具设计器。用户拖拖拽拽就能绘制出矢量图形，然后导出JSON，注冊到HT之后就可以使用到全部的HT组件上，注意哦：是全部组件，不不过拓扑、不不过3D、还有全部通用组件:
搞了这么多年的前端事实上我还是喜欢手写代码，即使是HT的矢量描写叙述大部分情况我还是手写。当然工具也有其发挥作用的地方，比如以下这个採用HT矢量进行水利监控的客户，这个转轮的扇叶不用工具预计非常难手写代码描写叙述出贝塞尔曲线点的位置坐标：
有了工具再也不用为绘制曲线犯愁了，甚至都不须要程序猿參与，美工也能够用HT的矢量编辑器绘制图形导出JSON给程序猿使用，这就是HT为让Designer与Developer更好互相配合而进行矢量的设计初衷，程序猿不用再每天苦逼的用代码绘制各种设备，这种设计开发工作流程下，即使哪个领导不惬意。美工也能够高速再拖拖拽拽出新的矢量图形效果。而程序猿须要做的不过再导入JSON就可以。
当然HT作为程序猿的开发工具，只走到这一步还是远远不够的，这只攻克了绘制矢量的工作。对于SCADA等监控领域往往还须要依据后台实时数据上报的硬件信息，须要图形上的矢量同步变化，因此矢量图形的颜色、大小、角度等全部參数都可能须要与实时数据保持一致，这但是烦人的事情，怎样是好？
按传统的做法，程序猿不仅要绘制矢量，而且在绘制图形代码中还要掺杂业务參数逻辑。因此代码的可读性和可维护性是非常难想象的。
这里HT又创新性的提出了动态绑定矢量数据的功能。HT的矢量格式设计从骨子里头就考虑了动态绑定数据的需求，HT的矢量JSON格式中，不论什么图形元素的颜色、大小、角度等全部參数都能够动态绑定业务数据，比如上图水泵的扇叶，美工设计好之后，我们仅仅要把扇叶的rotation角度绑定上Data的某个属性，则执行中用户仅须要将角度设置给该属性。界面的水泵扇叶就自己主动旋转起来了。同理下图的PieChart的旋转角度，和是否中空的两个參数也是绑定了业务数据，这样用户拖拽图元和双击时改变对应的业务数据图元就会自己主动变化呈现效果：
矢量的动态性还有个用途就是动态换肤，传统的换肤用户须要让美工做不同颜色的图片和css等资源，用户切换时须要远程动态下载。而HT的换肤全然就能够本地进行。整个过程无需server请求，甚至客户能够提供颜色拉条，让用户动态切换体验随意的颜色搭配。
读到这里大家应该体会到为什么要反复定义并实现矢量这个轮子的意义了吧，这里仅提出Hightopo的HT for Web为解决监控领域图形设计问题，一种独特的实现机制供大家思考。萝卜白菜各有所爱，本文并非要掀起DOM组件与Cavnas的2D孰优孰劣争论。SVG的确也有highcharts这样不错应用的案例，HT成功实现全部组件採用Canvas设计。而Sencha和Kendoui等流行的通用组件都採用DOM方式堆积也发展的不错，所以选择什么样的设计方案非常多情况下并非决定性的，关键还是认真。仅仅要认真用心实现都能够在不同的设计路子上做出精彩。
最后还是收收心。事实上矢量也不是那么万能，ps还是非常强大的。美工能够用ps高速构建出各种仔细效果的图片，这点由简单的矢量格式描写叙述非常多情况下是达不到的。因此矢量也是只攻克了监控领域的部分问题，降低了程序猿的部分工作量。HT做了非常大的努力攻克了这些部分问题也就足够了！
