TypeScript圖形渲染實戰：2D架構設計與實現
圖書簡介
本書使用微軟最新的TypeScript語言，以面向接口及泛型的編程方式，採用HTML 5中的Canvas2D繪圖API，實現了一個2D動畫精靈系統，並在該精靈系統上演示了精心設計的與圖形數學變換相關的Demo。本書共10章，分爲4篇：TypeScript篇、Canvas2D篇、圖形數學篇、架構與實現篇。通過閱讀本書，讀者可以系統地掌握TypeScript語言、面向接口和泛型的編程方式、Canvas2D API繪圖、圖形數學（向量、點與基本形體的碰撞檢測、矩陣及貝塞爾曲線）、數據結構（隊列、棧、樹）及重要的設計模式。本書內容豐富，講解由淺入深，特別適合對圖形、遊戲和UI開發感興趣的讀者閱讀，也適合需要系統學習圖形開發技術的人員閱讀。
圖書前言
TypeScript是由微軟公司開發的一種開源編程語言，主要爲大型應用而設計。它是JavaScript的一個超集，擴展了JavaScript的語法，任何現有的JavaScript程序都可以不加改變地在TypeScript下工作。
本書使用最新的TypeScript語言，以面向接口及泛型的編程方式，採用HTML 5中的Canvas2D繪圖API，實現了一個2D動畫精靈系統，並在該精靈系統上演示了精心設計的與圖形數學變換相關的Demo。該精靈系統是一個具備最小運行環境（更新、重繪、裁剪，以及事件分發和響應），並支持精確點選（點與點、線段、矩形、圓形、橢圓、三角形及凸多邊形），採取了享元設計模式，基於場景圖管理且兼容非場景圖類型，而且易於擴展的系統。
本書有何特色
1．全程使用TypeScript面向接口的編程語言
本書通過TypeScript語言提供的面向接口編程功能實現了：
- Doom3引擎中文本格式的詞法解析器接口；
- 接口一致，且使用了樹結構管理（場景圖）和線性結構管理（非場景圖）的精靈系統，並且能夠讓場景圖類型的精靈系統兼容運行非場景圖類型的精靈系統。
2．剖析Canvas2D的底層原理
本書中的Canvas2D相關章節實現瞭如下幾個重要例子：
- 模擬了Canvas2D中的渲染狀態堆棧和矩陣變換堆棧，並且在實例中使用自己的矩陣變換堆棧來運行相關例子；
- 實現了類似於Canvas2D文本繪製的各種對齊算法；
- 實現了加強版的drawImage方法，使其支持repeat/repeat-x/repeat-y填充模式的算法（類似於Canvsas2D中的圖案填充），並且使用加強版的drawImage實現了九宮格縮放算法（Scale9Grid）。
3．詳解圖形數學及點與基本幾何形體的碰撞檢測算法
圖形編程的最大“攔路虎”是涉及圖形數學變換。書中以圖形數學變換爲核心實現了以下例子：
- 將平移、縮放和旋轉的不同順序組合繪製出來；
- 通過繪製各種軌跡來觀察和理解物體原點變換的奧祕所在；
- 貝塞爾曲線原理動畫；
- 坦克方向正確地朝着鼠標指針位置移動（三角函數版）；
- 坦克方向正確地朝着鼠標指針位置移動（使用向量縮放來避免使用sin / cos三角函數）；
- 坦克方向正確地朝着鼠標指針位置移動（使用從兩個方向以向量構建的旋轉矩陣來避免使用三角函數atan2，並且用自己實現的矩陣堆棧來替換Canvas2D中的矩陣堆棧）；
- 坦克沿着多條貝塞爾曲線圍成的封閉路徑朝向正確地運動；
- 點投影到向量上的動畫效果（涉及向量的所有操作）；
- 使用鼠標精確點選旋轉中的精靈（測試點與線段、矩形、圓形、橢圓、三角形，以及凸多邊形碰撞檢測算法及凸多邊形判斷算法）；
- 太陽系模擬動畫；
- 骨骼層次精靈動畫。
4．提供了幾何原理圖的生成源代碼
本書圖形數學相關章節中的幾何原理圖都是使用Canvas2D直接繪製出來的，並提供了繪製源代碼。主要有如下圖示：
- 向量方向與大小概念圖示；
- 向量的加減法圖示；
- 負向量圖示；
- 向量與標量乘法圖示；
- 向量點乘圖示；
- 點與三角形關係圖示；
- 凹多邊形、凸多邊形及三角形扇形化圖示；
- 旋轉矩陣推導圖示。
5．精準地使用設計模式
本書中用到的設計模式如下：
- 使用工廠模式生產各種接口（精靈系統的精靈ISprite和所有基本形體IShape都是由SpriteFactory製造生產的）；
- 使用迭代器模式抽象所有具有迭代功能的類或接口（IDoom3Tokenizer、貝塞爾曲線迭代器、樹結構深度優先和廣度優先的8個線性遍歷迭代器）；
- 使用模板方法設計模式（Application類通過模板方法模式規定了整個入口類的運行流程）；
- 使用適配器模式（在樹結構中爲了統一線性遍歷算法，將隊列和棧數據結構適配成一致的操作接口）；
- 使用享元設計模式（實現的精靈系統使用享元模式，多個精靈可以共享同一個形體，但是可以有不同的渲染狀態、大小、位置和方向等）。
6．詳盡地描述了樹的數據結構要點
本書專門用一章來介紹樹的數據結構，並且詳盡地描述了樹結構的各種重要算法。
- 基於隊列的廣度優先方式的4種非遞歸遍歷算法（先根、後根、從左到右、從右到左）；
- 基於棧的深度優先方式的4種非遞歸遍歷算法；
- 基於“父親+兒子”數組方式的深度優先的4種遞歸遍歷算法；
- 基於“父親+兒子兄弟”方式的深度優先的4種遞歸遍歷算法；
- 基於“父親+兒子兄弟”方式的深度優先的非遞歸遍歷算法；
- 基於JSON的序列化和反序列化算法。
本書內容及知識體系
第1篇 TypeScript篇（第1、2章）
第1章構建TypeScript開發、編譯和調試環境，主要介紹了TypeScript語言的開發、編譯和調試環境的搭建，最終形成一個支持源碼自動編譯、模塊自動載入、服務器端熱部署及具有強大斷點調試功能的TypeScript快捷開發環境。
第2章使用TypeScript實現詞法解析器，用TypeScript語言，以面向接口的方式實現了一個Doom3（原id Software公司毀滅戰士3遊戲引擎）詞法解析器；並在此基礎上實現了工廠和迭代器兩種設計模式，使其支持接口的生成及使用迭代方式進行Token解析輸出；同時封裝了XMLHttpRequest類，用來支持從服務器端下載要解析的文件。本章還系統地介紹了後續章節中要用到的一些TypeScript常用的語法知識。
第2篇 Canvas2D篇（第3、4章）
第3章動畫與Application類，詳細介紹了requestAnimationFrame方法與屏幕刷新頻率之間的關係；並在此基礎上封裝了一個支持基於時間的刷新、重繪，以及事件的分發和處理的Application類；還實現了能正確處理CSS盒模型的座標變換功能；最後添加了支持不同幀率運行的計時器，模擬了setTimeout和setInterval方法的實現。
第4章使用Canvas2D繪圖，主要介紹了Canvas2D中矢量圖形、文本、圖像及陰影繪製的相關內容，實現了一個本章及後續章節都要使用的基於Canvas2D的演示和測試環境。本章需要讀者重點關注渲染狀態堆棧的實現原理，以及各種文本對齊方式的算法和支持Repeat模式的drawImage實現等內容。
第3篇 圖形數學篇（第5～7章）
第5章Canvas2D座標系變換是本書的精華，通過多個例子演示了Canvas2D中局部座標系變換的相關知識點，讓讀者知道變換順序的重要性，理解變換及掌握原點變換的幾種方式；並且通過太陽自轉和月亮自公轉的例子，介紹了Canvas2D中矩陣堆棧層次變換的用法；最後通過一個坦克跟隨鼠標指針朝向正確地運動Demo，深入講解了一些常用三角函數的應用。
第6章向量數學及基本形體的點選，首先講述了向量的一些基本操作，然後通過向量的加法和縮放操作替換第5章坦克Demo中使用的sin/cos函數。爲了演示向量的一些基本操作，特意實現了點投影到向量的動畫效果Demo；給出了點與線段、圓、矩形、橢圓、三角形及凸多邊形等基本形體之間的碰撞檢測算法；最後給出了本章所有幾何圖示的生成源代碼，便於讀者更加深入地理解向量各個操作背後的幾何含義。
第7章矩陣數學及貝塞爾曲線，首先講述了矩陣的相關知識，重點推導了旋轉矩陣；然後將第5章中的坦克Demo用矩陣方式重寫，演示如何通過兩個單位向量構建旋轉矩陣，從而消除對atan2函數的使用；接着模擬了Canvas2D中的矩陣堆棧，並用自己實現的矩陣堆棧重寫坦克Demo；最後介紹了貝塞爾曲線多項式的推導過程，並實現了一個曲線動畫的Demo。
第4篇 架構與實現篇（第8～10章）
第8章精靈系統，以面向接口編程的方式實現了一個精靈系統，並在該系統上實現了一個Demo，用來測試系統的點與各個基本形體之間的精確碰撞檢測。該系統具有必要的功能（更新、繪製、鼠標和鍵盤事件的分發與響應），使用了非場景圖類型，支持精確點選，基於保留模式，並採用了享元設計模式。
第9章優美典雅的樹結構，主要介紹了樹結構的增、刪、改、查，以及各種遍歷算法，最後實現了樹結構的JSON序列化和反序列化算法。本章重在靈活應用TypeScript泛型編程，涉及不少泛型編程的細節。
第10章場景圖系統，融合前面章節所講知識，以面向接口的編程方式實現了一個精靈系統。該系統具有必要的功能（更新、重繪、裁剪及事件分發和響應），使用了場景圖類型（建立在第9章的樹結構上），支持精確點選，基於非立即渲染模式（保留模式），採用了享元設計模式，兼容運行第8章的非場景圖類型。在此基礎上，通過骨骼層次精靈動畫，演示了場景圖的層次變換功能及享元模式的優點；最後實現了坦克沿着貝塞爾路徑朝向正確運行的Demo，以演示該精靈系統的綜合特點。
看書籍介紹不錯，有時間翻一遍，動手實驗一下