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