TypeScript圖形渲染實戰(zhàn):2D架構(gòu)設(shè)計與實現(xiàn)
定 價:99 元
- 作者:步磊峰 著
- 出版時間:2019/3/1
- ISBN:9787111619246
- 出 版 社:機械工業(yè)出版社
- 中圖法分類:TP312
- 頁碼:373
- 紙張:膠版紙
- 版次:1
- 開本:16開
本書使用微軟*新的TypeScript語言,以面向接口及泛型的編程方式,采用HTML5中的Canvas2D繪圖API,實現(xiàn)了一個2D動畫精靈系統(tǒng),并在該精靈系統(tǒng)上演示了精心設(shè)計的與圖形數(shù)學(xué)變換相關(guān)的Demo。通過閱讀本書,讀者可以系統(tǒng)地掌握TypeScript語言、面向接口和泛型的編程方式、Canvas2DAPI繪圖、圖形數(shù)學(xué)、數(shù)據(jù)結(jié)構(gòu)及重要的設(shè)計模式。本書共10章,分為4篇。第1篇TypeScript篇,主要介紹了如何構(gòu)建TypeScript開發(fā)、編譯和調(diào)試環(huán)境,以及如何使用TypeScript實現(xiàn)Doom3詞法解析器;第2篇Canvas2D篇,主要介紹了動畫與Application類,以及如何使用Canvas2D繪圖;第3篇圖形數(shù)學(xué)篇,主要介紹了坐標系變換、向量數(shù)學(xué)及基本形體的點選、矩陣數(shù)學(xué)及貝塞爾曲線;第4篇架構(gòu)與實現(xiàn)篇,主要介紹了精靈系統(tǒng)、優(yōu)美典雅的樹結(jié)構(gòu)及場景圖系統(tǒng)。本書特別適合對圖形、游戲和UI開發(fā)感興趣的讀者閱讀,也適合需要系統(tǒng)學(xué)習(xí)圖形開發(fā)的人員閱讀。另外,本書還適合JavaScript程序員及想從C/C++、Java、C#等轉(zhuǎn)HTML5開發(fā)的程序員閱讀。
TypeScript是由微軟公司開發(fā)的一種開源編程語言,主要為大型應(yīng)用而設(shè)計。它是JavaScript的一個超集,擴展了JavaScript的語法,任何現(xiàn)有的JavaScript程序都可以不加改變地在TypeScript下工作。
本書使用最新的TypeScript語言,以面向接口及泛型的編程方式,采用HTML 5中的Canvas2D繪圖API,實現(xiàn)了一個2D動畫精靈系統(tǒng),并在該精靈系統(tǒng)上演示了精心設(shè)計的與圖形數(shù)學(xué)變換相關(guān)的Demo。該精靈系統(tǒng)是一個具備最小運行環(huán)境(更新、重繪、裁剪,以及事件分發(fā)和響應(yīng)),并支持精確點選(點與點、線段、矩形、圓形、橢圓、三角形及凸多邊形),采取了享元設(shè)計模式,基于場景圖管理且兼容非場景圖類型,而且易于擴展的系統(tǒng)。
本書有何特色
1.全程使用TypeScript面向接口的編程語言
本書通過TypeScript語言提供的面向接口編程功能實現(xiàn)了:
* Doom3引擎中文本格式的詞法解析器接口;
* 接口一致,且使用了樹結(jié)構(gòu)管理(場景圖)和線性結(jié)構(gòu)管理(非場景圖)的精靈系統(tǒng),并且能夠讓場景圖類型的精靈系統(tǒng)兼容運行非場景圖類型的精靈系統(tǒng)。
2.剖析Canvas2D的底層原理
本書中的Canvas2D相關(guān)章節(jié)實現(xiàn)了如下幾個重要例子:
* 模擬了Canvas2D中的渲染狀態(tài)堆棧和矩陣變換堆棧,并且在實例中使用自己的矩陣變換堆棧來運行相關(guān)例子;
* 實現(xiàn)了類似于Canvas2D文本繪制的各種對齊算法;
* 實現(xiàn)了加強版的drawImage方法,使其支持repeat/repeat-x/repeat-y填充模式的算法(類似于Canvsas2D中的圖案填充),并且使用加強版的drawImage實現(xiàn)了九宮格縮放算法(Scale9Grid)。
3.詳解圖形數(shù)學(xué)及點與基本幾何形體的碰撞檢測算法
圖形編程的最大“攔路虎”是涉及圖形數(shù)學(xué)變換。書中以圖形數(shù)學(xué)變換為核心實現(xiàn)了以下例子:
* 將平移、縮放和旋轉(zhuǎn)的不同順序組合繪制出來;
* 通過繪制各種軌跡來觀察和理解物體原點變換的奧秘所在;
* 貝塞爾曲線原理動畫;
* 坦克方向正確地朝著鼠標指針位置移動(三角函數(shù)版);
* 坦克方向正確地朝著鼠標指針位置移動(使用向量縮放來避免使用sin / cos三角函數(shù));
* 坦克方向正確地朝著鼠標指針位置移動(使用從兩個方向以向量構(gòu)建的旋轉(zhuǎn)矩陣來避免使用三角函數(shù)atan2,并且用自己實現(xiàn)的矩陣堆棧來替換Canvas2D中的矩陣堆棧);
* 坦克沿著多條貝塞爾曲線圍成的封閉路徑朝向正確地運動;
* 點投影到向量上的動畫效果(涉及向量的所有操作);
* 使用鼠標精確點選旋轉(zhuǎn)中的精靈(測試點與線段、矩形、圓形、橢圓、三角形,以及凸多邊形碰撞檢測算法及凸多邊形判斷算法);
* 太陽系模擬動畫;
* 骨骼層次精靈動畫。
4.提供了幾何原理圖的生成源代碼
本書圖形數(shù)學(xué)相關(guān)章節(jié)中的幾何原理圖都是使用Canvas2D直接繪制出來的,并提供了繪制源代碼。主要有如下圖示:
* 向量方向與大小概念圖示;
* 向量的加減法圖示;
* 負向量圖示;
* 向量與標量乘法圖示;
* 向量點乘圖示;
* 點與三角形關(guān)系圖示;
* 凹多邊形、凸多邊形及三角形扇形化圖示;
* 旋轉(zhuǎn)矩陣推導(dǎo)圖示。
5.精準地使用設(shè)計模式
本書中用到的設(shè)計模式如下:
* 使用工廠模式生產(chǎn)各種接口(精靈系統(tǒng)的精靈ISprite和所有基本形體IShape都是由SpriteFactory制造生產(chǎn)的);
* 使用迭代器模式抽象所有具有迭代功能的類或接口(IDoom3Tokenizer、貝塞爾曲線迭代器、樹結(jié)構(gòu)深度優(yōu)先和廣度優(yōu)先的8個線性遍歷迭代器);
* 使用模板方法設(shè)計模式(Application類通過模板方法模式規(guī)定了整個入口類的運行流程);
* 使用適配器模式(在樹結(jié)構(gòu)中為了統(tǒng)一線性遍歷算法,將隊列和棧數(shù)據(jù)結(jié)構(gòu)適配成一致的操作接口);
* 使用享元設(shè)計模式(實現(xiàn)的精靈系統(tǒng)使用享元模式,多個精靈可以共享同一個形體,但是可以有不同的渲染狀態(tài)、大小、位置和方向等)。
6.詳盡地描述了樹的數(shù)據(jù)結(jié)構(gòu)要點
本書專門用一章來介紹樹的數(shù)據(jù)結(jié)構(gòu),并且詳盡地描述了樹結(jié)構(gòu)的各種重要算法。
* 基于隊列的廣度優(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)境的搭建,最終形成一個支持源碼自動編譯、模塊自動載入、服務(wù)器端熱部署及具有強大斷點調(diào)試功能的TypeScript快捷開發(fā)環(huán)境。
第2章使用TypeScript實現(xiàn)詞法解析器,用TypeScript語言,以面向接口的方式實現(xiàn)了一個Doom3(原id Software公司毀滅戰(zhàn)士3游戲引擎)詞法解析器;并在此基礎(chǔ)上實現(xiàn)了工廠和迭代器兩種設(shè)計模式,使其支持接口的生成及使用迭代方式進行Token解析輸出;同時封裝了XMLHttpRequest類,用來支持從服務(wù)器端下載要解析的文件。本章還系統(tǒng)地介紹了后續(xù)章節(jié)中要用到的一些TypeScript常用的語法知識。
第2篇 Canvas2D篇(第3、4章)
第3章動畫與Application類,詳細介紹了requestAnimationFrame方法與屏幕刷新頻率之間的關(guān)系;并在此基礎(chǔ)上封裝了一個支持基于時間的刷新、重繪,以及事件的分發(fā)和處理的Application類;還實現(xiàn)了能正確處理CSS盒模型的坐標變換功能;最后添加了支持不同幀率運行的計時器,模擬了setTimeout和setInterval方法的實現(xiàn)。
第4章使用Canvas2D繪圖,主要介紹了Canvas2D中矢量圖形、文本、圖像及陰影繪制的相關(guān)內(nèi)容,實現(xiàn)了一個本章及后續(xù)章節(jié)都要使用的基于Canvas2D的演示和測試環(huán)境。本章需要讀者重點關(guān)注渲染狀態(tài)堆棧的實現(xiàn)原理,以及各種文本對齊方式的算法和支持Repeat模式的drawImage實現(xiàn)等內(nèi)容。
第3篇 圖形數(shù)學(xué)篇(第5~7章)
第5章Canvas2D坐標系變換是本書的精華,通過多個例子演示了Canvas2D中局部坐標系變換的相關(guān)知識點,讓讀者知道變換順序的重要性,理解變換及掌握原點變換的幾種方式;并且通過太陽自轉(zhuǎn)和月亮自公轉(zhuǎn)的例子,介紹了Canvas2D中矩陣堆棧層次變換的用法;最后通過一個坦克跟隨鼠標指針朝向正確地運動Demo,深入講解了一些常用三角函數(shù)的應(yīng)用。
第6章向量數(shù)學(xué)及基本形體的點選,首先講述了向量的一些基本操作,然后通過向量的加法和縮放操作替換第5章坦克Demo中使用的sin/cos函數(shù)。為了演示向量的一些基本操作,特意實現(xiàn)了點投影到向量的動畫效果Demo;給出了點與線段、圓、矩形、橢圓、三角形及凸多邊形等基本形體之間的碰撞檢測算法;最后給出了本章所有幾何圖示的生成源代碼,便于讀者更加深入地理解向量各個操作背后的幾何含義。
第7章矩陣數(shù)學(xué)及貝塞爾曲線,首先講述了矩陣的相關(guān)知識,重點推導(dǎo)了旋轉(zhuǎn)矩陣;然后將第5章中的坦克Demo用矩陣方式重寫,演示如何通過兩個單位向量構(gòu)建旋轉(zhuǎn)矩陣,從而消除對atan2函數(shù)的使用;接著模擬了Canvas2D中的矩陣堆棧,并用自己實現(xiàn)的矩陣堆棧重寫坦克Demo;最后介紹了貝塞爾曲線多項式的推導(dǎo)過程,并實現(xiàn)了一個曲線動畫的Demo。
第4篇 架構(gòu)與實現(xiàn)篇(第8~10章)
第8章精靈系統(tǒng),以面向接口編程的方式實現(xiàn)了一個精靈系統(tǒng),并在該系統(tǒng)上實現(xiàn)了一個Demo,用來測試系統(tǒng)的點與各個基本形體之間的精確碰撞檢測。該系統(tǒng)具有必要的功能(更新、繪制、鼠標和鍵盤事件的分發(fā)與響應(yīng)),使用了非場景圖類型,支持精確點選,基于保留模式,并采用了享元設(shè)計模式。
第9章優(yōu)美典雅的樹結(jié)構(gòu),主要介紹了樹結(jié)構(gòu)的增、刪、改、查,以及各種遍歷算法,最后實現(xiàn)了樹結(jié)構(gòu)的JSON序列化和反序列化算法。本章重在靈活應(yīng)用TypeScript泛型編程,涉及不少泛型編程的細節(jié)。
第10章場景圖系統(tǒng),融合前面章節(jié)所講知識,以面向接口的編程方式實現(xiàn)了一個精靈系統(tǒng)。該系統(tǒng)具有必要的功能(更新、重繪、裁剪及事件分發(fā)和響應(yīng)),使用了場景圖類型(建立在第9章的樹結(jié)構(gòu)上),支持精確點選,基于非立即渲染模式(保留模式),采用了享元設(shè)計模式,兼容運行第8章的非場景圖類型。在此基礎(chǔ)上,通過骨骼層次精靈動畫,演示了場景圖的層次變換功能及享元模式的優(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ā)感興趣的技術(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é)生及喜歡計算機編程的自學(xué)者;
* 專業(yè)培訓(xùn)機構(gòu)的學(xué)員。
本書閱讀建議
* 沒有圖形框架開發(fā)基礎(chǔ)的讀者,建議從第1章順次閱讀并演練每一個實例。
* 有一定圖形開發(fā)基礎(chǔ)的讀者,可以根據(jù)實際情況有重點地選擇閱讀各個模塊和項目案例。對于每一個模塊和項目案例,先思考一下實現(xiàn)思路,然后閱讀,效果更佳。
* 可以先閱讀書中的模塊和Demo,再結(jié)合配套源代碼理解并調(diào)試,這樣更加容易理解,而且也會理解得更加深刻。
本書作者
本書由步磊峰編寫。感謝在本書編寫和出版過程中給予了筆者大量幫助的各位編輯!
由于筆者水平所限,加之寫作時間較為倉促,書中可能還存在一些疏漏和不足之處,敬請各位讀者批評指正。
步磊峰
目錄
前言
第1篇 TypeScript篇
第1章 構(gòu)建TypeScript開發(fā)、編譯和調(diào)試環(huán)境2
1.1 TypeScript簡介2
1.2 安裝TypeScript開發(fā)環(huán)境3
1.2.1 安裝Node.js3
1.2.2 安裝VS Code4
1.2.3 NPM全局安裝TypeScript6
1.2.4 第一個TypeScript程序7
1.3 使用TypeScript編譯(轉(zhuǎn)譯)器13
1.3.1 生成tsconfig.json文件13
1.3.2 解決生成tsconfig.json文件后帶來的常見問題13
1.3.3 自動編譯TypeScript文件15
1.4 模塊化開發(fā)TypeScript15
1.4.1 tsconfig.json文件中的target和module命令選項16
1.4.2 編寫Canvas2D類導(dǎo)出給main.ts調(diào)用16
1.4.3 使用lite-server搭建本地服務(wù)器17
1.5 使用SystemJS自動編譯加載TypeScript18
1.5.1 NPM本地安裝TypeScript庫和SystemJS庫18
1.5.2 SystemJS直接編譯TypeScript源碼19
1.6 使用VS Code調(diào)試TypeScript源碼20
1.6.1 安裝及配置Debugger for Chrome擴展20
1.6.2 VS Code中單步調(diào)試TypeScript20
1.7 本章總結(jié)22
第2章 使用TypeScript實現(xiàn) Doom 3詞法解析器24
2.1 Token與Tokenizer24
2.1.1 Doom3文本文件格式26
2.1.2 使用IDoom3Token與IDoom3Tokenizer接口26
2.1.3 ES 6中的模板字符串28
2.1.4 IDoom3Token與IDoom3Tokenizer接口的定義29
2.2 IDoom3Token與IDoom3Tokenizer接口的實現(xiàn)30
2.2.1 Doom3Token類成員變量的聲明30
2.2.2 Doom3Token類變量初始化的問題31
2.2.3 IDoom3Token接口方法的實現(xiàn)32
2.2.4 Doom3Token類的非接口方法實現(xiàn)33
2.2.5 Doom3Tokenzier處理數(shù)字和空白符34
2.2.6 IDoom3Tokenizer接口方法實現(xiàn)34
2.2.7 Doom3Tokenizer字符處理私有方法35
2.2.8 核心的getNextToken方法36
2.2.9 跳過不需處理的空白符和注釋37
2.2.10 實現(xiàn)_getNumber方法解析數(shù)字類型38
2.2.11 實現(xiàn)_getSubstring方法解析子字符串40
2.2.12 實現(xiàn)_getString方法解析字符串41
2.2.13 IDoom3Tokenizer詞法解析器狀態(tài)總結(jié)42
2.3 使用工廠模式和迭代器模式43
2.3.1 微軟COM中創(chuàng)建接口的方式43
2.3.2 Doom3Factory工廠類43
2.3.3 迭代器模式44
2.3.4 模擬微軟.NetFramework中的泛型迭代器44
2.3.5 IDoom3Tokenizer擴展 IEnumerator接口45
2.3.6 修改Doom3Tokenizer源碼45
2.3.7 使用VS Code中的重命名重構(gòu)方法46
2.3.8 使用迭代器解析Token46
2.3.9 面向接口與面向?qū)ο缶幊痰膫人感悟47
2.4 從服務(wù)器獲取資源47
2.4.1 HTML加載本地資源遇到的問題48
2.4.2 從服務(wù)器加載資源48
2.4.3 使用XHR向服務(wù)器請求資源文件49
2.4.4 TypeScript中的類型別名50
2.4.5 使用doGet請求文本文件并解析51
2.4.6 解決仍有空白字符輸出問題52
2.4.7 實現(xiàn)doGetAsync異步請求方法52
2.4.8 聲明TypeScript中的回調(diào)函數(shù)54
2.4.9 調(diào)用回調(diào)函數(shù)55
2.5 本章總結(jié)57
第2篇 Canvas2D篇
第3章 動畫與Application類60
3.1 requestAnimationFrame方法與動畫60
3.1.1 HTML中不間斷的循環(huán)60
3.1.2 requestAnimationFrame與監(jiān)視器刷新頻率62
3.1.3 基于時間的更新與重繪65
3.2 Application類及其子類67
3.2.1 Application類體系結(jié)構(gòu)67
3.2.2 啟動動畫循環(huán)和停止動畫循環(huán)68
3.2.3 Application類中的更新和重繪69
3.2.4 回調(diào)函數(shù)的this指向問題70
3.2.5 函數(shù)調(diào)用時this指向的Demo演示71
3.2.6 CanvasInputEvent及其子類73
3.2.7 使用getBoundingRect方法變換坐標系75
3.2.8 將DOM Event事件轉(zhuǎn)換為CanvasInputEvent事件77
3.2.9 EventListenerObject與事件分發(fā)77
3.2.10 讓事件起作用79
3.2.11 Canvas2DApplication子類和WebGLApplication子類79
3.3 測試及修正Application類80
3.3.1 繼承并覆寫Application基類的虛方法80
3.3.2 測試ApplicationTest類81
3.3.3 多態(tài)(虛函數(shù)動態(tài)綁定)82
3.3.4 鼠標單擊事件測試83
3.3.5 CSS盒模型對_viewportToCanvasCoordinate的影響84
3.3.6 正確的_viewportToCanvasCoordinate方法實現(xiàn)86
3.4 為Application類增加計時器功能90
3.4.1 Timer類與TimeCallback回調(diào)函數(shù)90
3.4.2 添加和刪除Timer(計時器)91
3.4.3 觸發(fā)多個定時任務(wù)的操作93
3.4.4 測試Timer功能95
3.5 本章總結(jié)96
第4章 使用Canvas2D繪圖98
4.1 繪制基本幾何體98
4.1.1 Canvas2DApplication的繪制流程98
4.1.2 繪制矩形Demo99
4.1.3 模擬Canvas2D中渲染狀態(tài)堆棧100
4.1.4 線段屬性與描邊操作(stroke)103
4.1.5 虛線繪制(交替繪制線段)105
4.1.6 使用顏色描邊和填充108
4.1.7 使用漸變對象描邊和填充110
4.1.8 使用圖案對象描邊和填充113
4.1.9 后續(xù)要用到的一些常用繪制方法115
4.2 繪制文本117
4.2.1 封裝fillText方法117
4.2.2 文本的對齊方式119
4.2.3 自行實現(xiàn)文本對齊效果121
4.2.4 計算文本高度算法122
4.2.5 嵌套矩形定位算法122
4.2.6 fillRectWithTitle方法的實現(xiàn)125
4.2.7 自行文本對齊實現(xiàn)Demo126
4.2.8 font屬性128
4.2.9 實現(xiàn)makeFontString輔助方法129
4.3 繪制圖像130