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做了很大的努力解決了這些部分問題也就足夠了！
