TypeScript是由微軟公司開發(fā)的一種開源編程語言，主要為大型應用而設計。它是JavaScript的一個超集，擴展了JavaScript的語法，任何現(xiàn)有的JavaScript程序都可以不加改變地在TypeScript下工作。
　　本書使用最新的TypeScript語言，以面向接口及泛型的編程方式，采用HTML 5中的Canvas2D繪圖API，實現(xiàn)了一個2D動畫精靈系統(tǒng)，并在該精靈系統(tǒng)上演示了精心設計的與圖形數(shù)學變換相關的Demo。該精靈系統(tǒng)是一個具備最小運行環(huán)境（更新、重繪、裁剪，以及事件分發(fā)和響應），并支持精確點選（點與點、線段、矩形、圓形、橢圓、三角形及凸多邊形），采取了享元設計模式，基于場景圖管理且兼容非場景圖類型，而且易于擴展的系統(tǒng)。
本書有何特色
　　1．全程使用TypeScript面向接口的編程語言
　　本書通過TypeScript語言提供的面向接口編程功能實現(xiàn)了：
* Doom3引擎中文本格式的詞法解析器接口；
* 接口一致，且使用了樹結構管理（場景圖）和線性結構管理（非場景圖）的精靈系統(tǒng)，并且能夠讓場景圖類型的精靈系統(tǒng)兼容運行非場景圖類型的精靈系統(tǒng)。
　　2．剖析Canvas2D的底層原理
　　本書中的Canvas2D相關章節(jié)實現(xiàn)了如下幾個重要例子：
* 模擬了Canvas2D中的渲染狀態(tài)堆棧和矩陣變換堆棧，并且在實例中使用自己的矩陣變換堆棧來運行相關例子；
* 實現(xiàn)了類似于Canvas2D文本繪制的各種對齊算法；
* 實現(xiàn)了加強版的drawImage方法，使其支持repeat/repeat-x/repeat-y填充模式的算法（類似于Canvsas2D中的圖案填充），并且使用加強版的drawImage實現(xiàn)了九宮格縮放算法（Scale9Grid）。
　　3．詳解圖形數(shù)學及點與基本幾何形體的碰撞檢測算法
　　圖形編程的最大“攔路虎”是涉及圖形數(shù)學變換。書中以圖形數(shù)學變換為核心實現(xiàn)了以下例子：
* 將平移、縮放和旋轉的不同順序組合繪制出來；
* 通過繪制各種軌跡來觀察和理解物體原點變換的奧秘所在；
* 貝塞爾曲線原理動畫；
* 坦克方向正確地朝著鼠標指針位置移動（三角函數(shù)版）；
* 坦克方向正確地朝著鼠標指針位置移動（使用向量縮放來避免使用sin / cos三角函數(shù)）；
* 坦克方向正確地朝著鼠標指針位置移動（使用從兩個方向以向量構建的旋轉矩陣來避免使用三角函數(shù)atan2，并且用自己實現(xiàn)的矩陣堆棧來替換Canvas2D中的矩陣堆棧）；
* 坦克沿著多條貝塞爾曲線圍成的封閉路徑朝向正確地運動；
* 點投影到向量上的動畫效果（涉及向量的所有操作）；
* 使用鼠標精確點選旋轉中的精靈（測試點與線段、矩形、圓形、橢圓、三角形，以及凸多邊形碰撞檢測算法及凸多邊形判斷算法）；
* 太陽系模擬動畫；
* 骨骼層次精靈動畫。
　　4．提供了幾何原理圖的生成源代碼
　　本書圖形數(shù)學相關章節(jié)中的幾何原理圖都是使用Canvas2D直接繪制出來的，并提供了繪制源代碼。主要有如下圖示：
* 向量方向與大小概念圖示；
* 向量的加減法圖示；
* 負向量圖示；
* 向量與標量乘法圖示；
* 向量點乘圖示；
* 點與三角形關系圖示；
* 凹多邊形、凸多邊形及三角形扇形化圖示；
* 旋轉矩陣推導圖示。
　　5．精準地使用設計模式
　　本書中用到的設計模式如下：
* 使用工廠模式生產(chǎn)各種接口（精靈系統(tǒng)的精靈ISprite和所有基本形體IShape都是由SpriteFactory制造生產(chǎn)的）；
* 使用迭代器模式抽象所有具有迭代功能的類或接口（IDoom3Tokenizer、貝塞爾曲線迭代器、樹結構深度優(yōu)先和廣度優(yōu)先的8個線性遍歷迭代器）；
* 使用模板方法設計模式（Application類通過模板方法模式規(guī)定了整個入口類的運行流程）；
* 使用適配器模式（在樹結構中為了統(tǒng)一線性遍歷算法，將隊列和棧數(shù)據(jù)結構適配成一致的操作接口）；
* 使用享元設計模式（實現(xiàn)的精靈系統(tǒng)使用享元模式，多個精靈可以共享同一個形體，但是可以有不同的渲染狀態(tài)、大小、位置和方向等）。
　　6．詳盡地描述了樹的數(shù)據(jù)結構要點
　　本書專門用一章來介紹樹的數(shù)據(jù)結構，并且詳盡地描述了樹結構的各種重要算法。
* 基于隊列的廣度優(yōu)先方式的4種非遞歸遍歷算法（先根、后根、從左到右、從右到左）；
* 基于棧的深度優(yōu)先方式的4種非遞歸遍歷算法；
* 基于“父親+兒子”數(shù)組方式的深度優(yōu)先的4種遞歸遍歷算法；
* 基于“父親+兒子兄弟”方式的深度優(yōu)先的4種遞歸遍歷算法；
* 基于“父親+兒子兄弟”方式的深度優(yōu)先的非遞歸遍歷算法；
* 基于JSON的序列化和反序列化算法。
　　7．提供完善的技術支持和售后服務
　　本書提供了專門的售后服務郵箱hzbook2017@163.com。讀者在閱讀本書的過程中若有疑問，可以通過該郵箱獲得幫助。
本書內(nèi)容及知識體系
　　第1篇 TypeScript篇（第1、2章）
　　第1章構建TypeScript開發(fā)、編譯和調(diào)試環(huán)境，主要介紹了TypeScript語言的開發(fā)、編譯和調(diào)試環(huán)境的搭建，最終形成一個支持源碼自動編譯、模塊自動載入、服務器端熱部署及具有強大斷點調(diào)試功能的TypeScript快捷開發(fā)環(huán)境。
　　第2章使用TypeScript實現(xiàn)詞法解析器，用TypeScript語言，以面向接口的方式實現(xiàn)了一個Doom3（原id Software公司毀滅戰(zhàn)士3游戲引擎）詞法解析器；并在此基礎上實現(xiàn)了工廠和迭代器兩種設計模式，使其支持接口的生成及使用迭代方式進行Token解析輸出；同時封裝了XMLHttpRequest類，用來支持從服務器端下載要解析的文件。本章還系統(tǒng)地介紹了后續(xù)章節(jié)中要用到的一些TypeScript常用的語法知識。
　　第2篇 Canvas2D篇（第3、4章）
　　第3章動畫與Application類，詳細介紹了requestAnimationFrame方法與屏幕刷新頻率之間的關系；并在此基礎上封裝了一個支持基于時間的刷新、重繪，以及事件的分發(fā)和處理的Application類；還實現(xiàn)了能正確處理CSS盒模型的坐標變換功能；最后添加了支持不同幀率運行的計時器，模擬了setTimeout和setInterval方法的實現(xiàn)。
　　第4章使用Canvas2D繪圖，主要介紹了Canvas2D中矢量圖形、文本、圖像及陰影繪制的相關內(nèi)容，實現(xiàn)了一個本章及后續(xù)章節(jié)都要使用的基于Canvas2D的演示和測試環(huán)境。本章需要讀者重點關注渲染狀態(tài)堆棧的實現(xiàn)原理，以及各種文本對齊方式的算法和支持Repeat模式的drawImage實現(xiàn)等內(nèi)容。
　　第3篇 圖形數(shù)學篇（第5～7章）
　　第5章Canvas2D坐標系變換是本書的精華，通過多個例子演示了Canvas2D中局部坐標系變換的相關知識點，讓讀者知道變換順序的重要性，理解變換及掌握原點變換的幾種方式；并且通過太陽自轉和月亮自公轉的例子，介紹了Canvas2D中矩陣堆棧層次變換的用法；最后通過一個坦克跟隨鼠標指針朝向正確地運動Demo，深入講解了一些常用三角函數(shù)的應用。
　　第6章向量數(shù)學及基本形體的點選，首先講述了向量的一些基本操作，然后通過向量的加法和縮放操作替換第5章坦克Demo中使用的sin/cos函數(shù)。為了演示向量的一些基本操作，特意實現(xiàn)了點投影到向量的動畫效果Demo；給出了點與線段、圓、矩形、橢圓、三角形及凸多邊形等基本形體之間的碰撞檢測算法；最后給出了本章所有幾何圖示的生成源代碼，便于讀者更加深入地理解向量各個操作背后的幾何含義。
　　第7章矩陣數(shù)學及貝塞爾曲線，首先講述了矩陣的相關知識，重點推導了旋轉矩陣；然后將第5章中的坦克Demo用矩陣方式重寫，演示如何通過兩個單位向量構建旋轉矩陣，從而消除對atan2函數(shù)的使用；接著模擬了Canvas2D中的矩陣堆棧，并用自己實現(xiàn)的矩陣堆棧重寫坦克Demo；最后介紹了貝塞爾曲線多項式的推導過程，并實現(xiàn)了一個曲線動畫的Demo。
　　第4篇 架構與實現(xiàn)篇（第8～10章）
　　第8章精靈系統(tǒng)，以面向接口編程的方式實現(xiàn)了一個精靈系統(tǒng)，并在該系統(tǒng)上實現(xiàn)了一個Demo，用來測試系統(tǒng)的點與各個基本形體之間的精確碰撞檢測。該系統(tǒng)具有必要的功能（更新、繪制、鼠標和鍵盤事件的分發(fā)與響應），使用了非場景圖類型，支持精確點選，基于保留模式，并采用了享元設計模式。
　　第9章優(yōu)美典雅的樹結構，主要介紹了樹結構的增、刪、改、查，以及各種遍歷算法，最后實現(xiàn)了樹結構的JSON序列化和反序列化算法。本章重在靈活應用TypeScript泛型編程，涉及不少泛型編程的細節(jié)。
　　第10章場景圖系統(tǒng)，融合前面章節(jié)所講知識，以面向接口的編程方式實現(xiàn)了一個精靈系統(tǒng)。該系統(tǒng)具有必要的功能（更新、重繪、裁剪及事件分發(fā)和響應），使用了場景圖類型（建立在第9章的樹結構上），支持精確點選，基于非立即渲染模式（保留模式），采用了享元設計模式，兼容運行第8章的非場景圖類型。在此基礎上，通過骨骼層次精靈動畫，演示了場景圖的層次變換功能及享元模式的優(yōu)點；最后實現(xiàn)了坦克沿著貝塞爾路徑朝向正確運行的Demo，以演示該精靈系統(tǒng)的綜合特點。
本書配套資源獲取方式
　　本書涉及的源代碼文件和Demo需要讀者自行下載。請登錄華章公司網(wǎng)站www.hzbook.com，在該網(wǎng)站上搜索到本書，然后單擊“資料下載”按鈕即可在頁面上找到“配書資源”下載鏈接。
　　運行書中的源代碼需要進行以下操作：
　�。�1）按照本書第1章中的介紹下載并安裝Node.js和VS Code。
　　（2）在VS Code的終端對話框中輸入npm install命令，自動下載運行依賴包。
　　（3）下載好依賴包后繼續(xù)輸入npm run dev即可自動運行Demo。
本書讀者對象
* 對圖形、游戲和UI開發(fā)感興趣的技術人員；
* 想轉行到圖形開發(fā)領域的技術人員；
* 需要全面學習圖形開發(fā)技術的人員；
* 想從C/C++、Java、C#、Objective-C等語言轉HTML 5開發(fā)的技術人員；
* JavaScript程序員；
* 想學習TypeScript的程序員；
* 想提高編程水平的人員；
* 在校大學生及喜歡計算機編程的自學者；
* 專業(yè)培訓機構的學員。
本書閱讀建議
* 沒有圖形框架開發(fā)基礎的讀者，建議從第1章順次閱讀并演練每一個實例。
* 有一定圖形開發(fā)基礎的讀者，可以根據(jù)實際情況有重點地選擇閱讀各個模塊和項目案例。對于每一個模塊和項目案例，先思考一下實現(xiàn)思路，然后閱讀，效果更佳。
* 可以先閱讀書中的模塊和Demo，再結合配套源代碼理解并調(diào)試，這樣更加容易理解，而且也會理解得更加深刻。
本書作者
　　本書由步磊峰編寫。感謝在本書編寫和出版過程中給予了筆者大量幫助的各位編輯！
　　由于筆者水平所限，加之寫作時間較為倉促，書中可能還存在一些疏漏和不足之處，敬請各位讀者批評指正。
　　
步磊峰