我們先來看下這個葉輪模型長什麼樣
在繪制葉片之前，我們得先來了解下HT for Web的自定義圖形繪制的基本知識：
1: moveTo，占用1個點資訊，代表一個新路徑的起點
2: lineTo，占用1個點資訊，代表從上次最後點連接配接到該點
3: quadraticCurveTo，占用2個點資訊，第一個點作為曲線控制點，第二個點作為曲線結束點
4: bezierCurveTo，占用3個點資訊，第一和第二個點作為曲線控制點，第三個點作為曲線結束點
5: closePath，不占用點資訊，代表本次路徑繪制結束，并閉合到路徑的起始點
對比閉合多邊形除了設定segments參數外，還可以設定closePath屬性： * closePath擷取和設定多邊形是否閉合，預設為false，對閉合直線采用這種方式，無需設定segments參數。
好了，那麼接下來我們開始設計葉片了
首先我們通過bezierCurveTo方式向第一個和第二個頂點之間的線段添加兩個控制點，進而繪制出曲線，以下是points及segments屬性：
這時候與上一個圖相比較，有一條邊一件有些弧度了，那麼接下來就來處理第二條邊和第三條邊
看吧，現在是不是有模有樣了，現在葉片已經有了，那麼接下來要做的就是使用三個這樣的葉片拼接成一個葉輪。
在代碼中，我們定義了三個葉片，并且對第二個和第三個葉片做了旋轉和定位的處理，讓這三個葉片排布組合成一個葉輪來，但是怎麼能讓葉輪中間空出一個三角形呢，這個問題解決起來不難，我們隻需要在葉片的points屬性上再多加一個頂點，就可以填充這個三角形了，代碼如下：
在points屬性上添加了一個頂點後，别忘了在segments數組的最後面添加一個描述，再來看看最終的效果：
到這個葉輪的資源就做好了，那麼接下來就是要讓這個葉輪旋轉起來了，我們先來分析下：
要讓葉輪旋轉起來，其實原理很簡單，我們隻需要設定rotation屬性就可以實作了，但是這個rotation屬性隻有在不斷的變化中，才會讓葉輪旋轉起來，是以這個時候就需要用到定時器了，通過定時器來不斷地設定rotation屬性，讓葉輪動起來。
恩，好像就是這樣子的，那麼我們來實作一下：
首先是建立一個節點，并設定其引用的image為impeller，再将其添加到DataModel，令節點在拓撲中顯示出來：
接下來就是添加一個定時器了：
OK了，好像就是這個效果，但是當你選中這個節點的時候，你會發現這個節點的邊框在不停的閃動，看起來并不是那麼的舒服，為什麼會出現這種情況呢？原因很簡單，當設定了節點的rotation屬性後，節點的顯示區域就會發生變化，這個時候節點的寬高自然就發生的變化，其邊框也自然跟着改變。
還有，在很多情況下，節點的rotation屬性及寬高屬性會被當成業務屬性來處理，不太适合被實時改變，那麼我們該如何處理，才能在不不改變節點的rotation屬性的前提下令葉輪轉動起來呢？
綁定的格式很簡單，隻需将以前的參數值用一個帶func屬性的對象替換即可，func的内容有以下幾種類型：
1. function類型，直接調用該函數，并傳入相關Data和view對象，由函數傳回值決定參數值，即func(data, view);調用。
2. string類型：
2.1 style@***開頭，則傳回data.getStyle(***)值，其中***代表style的屬性名。
2.2 attr@***開頭，則傳回data.getAttr(***)值，其中***代表attr的屬性名。
2.3 field@***開頭，則傳回data.***值，其中***代表data的屬性名。
2.4 如果不比對以上情況，則直接将string類型作為data對象的函數名調用data.***(view)，傳回值作為參數值。
除了func屬性外，還可設定value屬性作為預設值，如果對應的func取得的值為undefined或null時，則會采用value屬性定義的預設值。 例如以下代碼，如果對應的Data對象的attr屬性stateColor為undefined或null時，則會采用yellow顔色：
在沒有設定vane_background屬性的時候，令其去red為預設值，那麼接下來我們來定義下vane_background屬性為blue，看看葉輪會不會變成藍色：
看下效果：
果然生效了，這下好了，我們就可以讓葉輪旋轉變得更加完美了，來看看具體該這麼做。
首先，我們先在節點上定義一個自定義屬性，名字為：impeller_rotation
然後再定義一個名字為rotate_impeller的矢量，并将rotation屬性綁定到節點的impeller_rotation上：
這時候我們在定時器中修改節點的rotation屬性改成修改自定義屬性impeller_rotation就可以讓節點中的葉輪旋轉起來，并且不會影響到節點自身的屬性，這就是我們想要的效果。
在2D上可以實作，在3D上一樣可以實作，下一章我們就來講講葉輪旋轉在3D上的應用，今天就先到這裡，下面附上今天Demo的源碼，有什麼問題歡迎大家咨詢。