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作爲基礎，進行可複用實現嵌套定義的效果
ht.Default.setImage(
'group-sunrise'
, {
width: 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的換膚完全就可以本地進行，整個過程無需服務器請求，甚至客戶可以提供顏色拉條，讓用戶動態切換體驗任意的顏色搭配。
讀到這裏大家應該體會到爲什麼要重複定義並實現矢量這個輪子的意義了吧，這裏僅提出Hightopo的HT for Web爲解決監控領域圖形設計問題，一種獨特的實現機制供大家思考，蘿蔔白菜各有所愛，本文並非要掀起DOM組件與Cavnas的2D孰優孰劣爭論，SVG的確也有highcharts這樣不錯應用的案例，HT成功實現所有組件採用Canvas設計，而Sencha和Kendoui等流行的通用組件都採用DOM方式堆積也發展的不錯，所以選擇什麼樣的設計方案很多情況下並不是決定性的，關鍵還是認真，只要認真用心實現都可以在不同的設計路子上做出精彩。
最後還是收收心，其實矢量也不是那麼萬能，ps還是很強大的，美工可以用ps快速構建出各種細緻效果的圖片，這點有簡單的矢量格式描述很多情況下是達不到的，因此矢量也是僅僅解決了監控領域的部分問題，減少了程序員的部分工作量，HT做了很大的努力解決了這些部分問題也就足夠了！
