《TypeScript圖形渲染實戰：2D架構設計與實現》一書由步磊峰編寫，由機械工業出版社出版發生。
基本介紹
- 中文名：TypeScript圖形渲染實戰：2D架構設計與實現
- 作者：步磊峰
- 類別：計算機/JavaScript
- 出版社：機械工業出版社
- 出版時間：2019年2月
- 頁數：392 頁
- 定價：99 元
- 開本：16 開
- 裝幀：精裝
- ISBN：9787111619246
內容簡介,圖書目錄,作者簡介,
內容簡介
本書使用微軟最新的TypeScript語言，以面向接口及泛型的編程方式，採用HTML 5中的Canvas2D繪圖API，實現了一個2D動畫精靈系統，並在該精靈系統上演示了精心設計的與圖形數學變換相關的Demo。通過閱讀本書，讀者可以系統地掌握TypeScript語言、面向接口和泛型的編程方式、Canvas2D API繪圖、圖形數學（向量、點與基本形體的碰撞檢測、矩陣及貝塞爾曲線）、數據結構（佇列、棧、樹）及重要的設計模式。
本書共10章，分為4篇。第1篇TypeScript篇，主要介紹了如何構建TypeScript開發、編譯和調試環境，以及如何使用TypeScript實現Doom 3詞法解析器；第2篇Canvas2D篇，主要介紹了動畫與Application類，以及如何使用Canvas2D繪圖；第3篇圖形數學篇，主要介紹了坐標系變換、向量數學及基本形體的點選、矩陣數學及貝塞爾曲線；第4篇架構與實現篇，主要介紹了精靈系統、優美典雅的樹結構及場景圖系統。
本書內容豐富，講解由淺入深，特別適合對圖形、遊戲和UI開發感興趣的讀者閱讀，也適合需要系統學習圖形開發技術的人員閱讀。另外，本書還適合JavaScript程式設計師及想從C/C++、Java、C#等語言轉HTML 5開發的程式設計師閱讀。編程愛好者、高校學生及培訓機構的學員也可以將本書作為興趣讀物。
圖書目錄
第1篇 TypeScript篇
第1章 構建TypeScript開發、編譯和調試環境 2
1.1 TypeScript簡介 2
1.2 安裝TypeScript開發環境 3
1.2.1 安裝Node.js 3
1.2.2 安裝VS Code 4
1.2.3 NPM全局安裝TypeScript 6
1.2.4 第一個TypeScript程式 7
1.3 使用TypeScript編譯（轉譯）器 13
1.3.1 生成tsconfig.json檔案 13
1.3.2 解決生成tsconfig.json檔案後帶來的常見問題 13
1.3.3 自動編譯TypeScript檔案 15
1.4 模組化開發TypeScript 15
1.4.1 tsconfig.json檔案中的target和module命令選項 16
1.4.2 編寫Canvas2D類導出給main.ts調用 16
1.4.3 使用lite-server搭建本地伺服器 17
1.5 使用SystemJS自動編譯載入TypeScript 18
1.5.1 NPM本地安裝TypeScript庫和SystemJS庫 18
1.5.2 SystemJS直接編譯TypeScript源碼 19
1.6 使用VS Code調試TypeScript源碼 20
1.6.1 安裝及配置Debugger for Chrome擴展 20
1.6.2 VS Code中單步調試TypeScript 20
1.7 本章總結 22
第2章 使用TypeScript實現 Doom 3詞法解析器 24
2.1 Token與Tokenizer 24
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接口的實現 30
2.2.1 Doom3Token類成員變數的聲明 30
2.2.2 Doom3Token類變數初始化的問題 31
2.2.3 IDoom3Token接口方法的實現 32
2.2.4 Doom3Token類的非接口方法實現 33
2.2.5 Doom3Tokenzier處理數字和空白符 34
2.2.6 IDoom3Tokenizer接口方法實現 34
2.2.7 Doom3Tokenizer字元處理私有方法 35
2.2.8 核心的getNextToken方法 36
2.2.9 跳過不需處理的空白符和注釋 37
2.2.10 實現_getNumber方法解析數字類型 38
2.2.11 實現_getSubstring方法解析子字元串 40
2.2.12 實現_getString方法解析字元串 41
2.2.13 IDoom3Tokenizer詞法解析器狀態總結 42
2.3 使用工廠模式和疊代器模式 43
2.3.1 微軟COM中創建接口的方式 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中的重命名重構方法 46
2.3.8 使用疊代器解析Token 46
2.3.9 面向接口與面向對象編程的個人感悟 47
2.4 從伺服器獲取資源 47
2.4.1 HTML載入本地資源遇到的問題 48
2.4.2 從伺服器載入資源 48
2.4.3 使用XHR向伺服器請求資源檔案 49
2.4.4 TypeScript中的類型別名 50
2.4.5 使用doGet請求文本檔案並解析 51
2.4.6 解決仍有空白字元輸出問題 52
2.4.7 實現doGetAsync異步請求方法 52
2.4.8 聲明TypeScript中的回調函式 54
2.4.9 調用回調函式 55
2.5 本章總結 57
第2篇 Canvas2D篇
第3章 動畫與Application類 60
3.1 requestAnimationFrame方法與動畫 60
3.1.1 HTML中不間斷的循環 60
3.1.2 requestAnimationFrame與監視器刷新頻率 62
3.1.3 基於時間的更新與重繪 65
3.2 Application類及其子類 67
3.2.1 Application類體系結構 67
3.2.2 啟動動畫循環和停止動畫循環 68
3.2.3 Application類中的更新和重繪 69
3.2.4 回調函式的this指向問題 70
3.2.5 函式調用時this指向的Demo演示 71
3.2.6 CanvasInputEvent及其子類 73
3.2.7 使用getBoundingRect方法變換坐標系 75
3.2.8 將DOM Event事件轉換為CanvasInputEvent事件 77
3.2.9 EventListenerObject與事件分發 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 多態（虛函式動態綁定） 82
3.3.4 滑鼠單擊事件測試 83
3.3.5 CSS盒模型對_viewportToCanvasCoordinate的影響 84
3.3.6 正確的_viewportToCanvasCoordinate方法實現 86
3.4 為Application類增加計時器功能 90
3.4.1 Timer類與TimeCallback回調函式 90
3.4.2 添加和刪除Timer（計時器） 91
3.4.3 觸發多個定時任務的操作 93
3.4.4 測試Timer功能 95
3.5 本章總結 96
第4章 使用Canvas2D繪圖 98
4.1 繪製基本幾何體 98
4.1.1 Canvas2DApplication的繪製流程 98
4.1.2 繪製矩形Demo 99
4.1.3 模擬Canvas2D中渲染狀態堆疊 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 後續要用到的一些常用繪製方法 115
4.2 繪製文本 117
4.2.1 封裝fillText方法 117
4.2.2 文本的對齊方式 119
4.2.3 自行實現文本對齊效果 121
4.2.4 計算文本高度算法 122
4.2.5 嵌套矩形定位算法 122
4.2.6 fillRectWithTitle方法的實現 125
4.2.7 自行文本對齊實現Demo 126
4.2.8 font屬性 128
4.2.9 實現makeFontString輔助方法 129
4.3 繪製圖像 130
4.3.1 drawImage方法 131
4.3.2 Repeat圖像填充模式 133
4.3.3 加強版drawImage方法的實現 134
4.3.4 加強版drawImage方法效果演示 136
4.3.5 離屏Canvas的使用 137
4.3.6 操作Canvas中的圖像數據 138
4.4 繪製陰影 141
4.5 本章總結 142
第3篇 圖形數學篇
第5章 Canvas2D坐標系變換 146
5.1 局部坐標系變換 146
5.1.1 準備工作 146
5.1.2 平移操作演示 149
5.1.3 平移和旋轉組合操作演示 150
5.1.4 繪製旋轉的軌跡 152
5.1.5 變換局部坐標系的原點 154
5.1.6 測試fillLocalRectWithTitle方法 156
5.1.7 徹底掌控局部坐標系變換 158
5.1.8 通用的原點變換方法 166
5.1.9 公轉（Revolution）與自轉（Rotation） 169
5.1.10 原點變換的另一種方法 171
5.2 坦克Demo 173
5.2.1 象限（Quadrant）文字繪製 174
5.2.2 坦克形體的繪製 175
5.2.3 坦克及炮塔的旋轉 178
5.2.4 計算坦克的朝向 179
5.2.5 坦克朝著目標移動 182
5.2.6 使用鍵盤控制炮塔的旋轉 183
5.2.7 初始朝向的重要性 184
5.2.8 朝向正確的運行 187
5.2.9 坦克朝著目標移動效果的生成代碼 189
5.3 本章總結 190
第6章 向量數學及基本形體的點選 192
6.1 向量數學 192
6.1.1 向量的概念 192
6.1.2 向量的大小與方向 194
6.1.3 向量的加減法及幾何含義 196
6.1.4 負向量及幾何含義 198
6.1.5 向量與標量乘法及幾何含義 198
6.1.6 向量標量相乘取代三角函式sin和cos的套用 200
6.1.7 向量的點乘及幾何含義 201
6.1.8 向量的夾角及朝向計算 203
6.2 向量投影Demo 203
6.2.1 Demo的需求描述 205
6.2.2 繪製向量 205
6.2.3 向量投影算法 207
6.2.4 投影效果演示代碼 208
6.2.5 向量getAngle和getOrientation方法的區別 210
6.3 點與基本幾何形體的碰撞檢測算法 211
6.3.1 點與線段及圓的碰撞檢測 211
6.3.2 點與矩形及橢圓的碰撞檢測 213
6.3.3 點與三角形的碰撞檢測 213
6.3.4 點與任意凸多邊形的碰撞檢測 215
6.4 附錄：圖示代碼 217
6.4.1 圖6.1向量概念圖示源碼 217
6.4.2 圖6.2和圖6.3向量加減法圖示源碼 218
6.4.3 圖6.4負向量圖示源碼 218
6.4.4 圖6.5向量與標量相乘圖示源碼 219
6.4.5 圖6.6向量的點乘圖示源碼 219
6.4.6 圖6.11點與三角形的關係圖示源碼 220
6.4.7 圖6.12和圖6.13 凹凸多邊形圖示源碼 221
6.5 本章總結 222
第7章 矩陣數學及貝塞爾曲線 223
7.1 矩陣數學 223
7.1.1 矩陣乘法 223
7.1.2 單位矩陣 225
7.1.3 矩陣求逆 225
7.1.4 用矩陣變換向量 226
7.1.5 平移矩陣及其逆矩陣 227
7.1.6 縮放矩陣及其逆矩陣 228
7.1.7 旋轉矩陣及其逆矩陣 230
7.1.8 從兩個單位向量構建旋轉矩陣 233
7.1.9 使用makeRotationFromVectors方法取代atan2的套用 234
7.1.10 仿射變換 237
7.1.11 矩陣堆疊 237
7.1.12 在坦克Demo中套用矩陣堆疊 239
7.1.13 圖7.1旋轉矩陣推導圖示繪製源碼 243
7.2 貝塞爾曲線 245
7.2.1 Demo效果 245
7.2.2 使用Canvas2D內置曲線繪製方法 246
7.2.3 伯恩斯坦多項式推導貝塞爾多項式 249
7.2.4 貝塞爾曲線自繪版 251
7.2.5 滑鼠碰撞檢測和互動功能 253
7.2.6 實現貝塞爾曲線枚舉器 255
7.3 本章總結 257
第4篇 架構與實現篇
第8章 精靈系統 260
8.1 精靈系統的架構與接口 260
8.1.1 應用程式的入口與命令分發 262
8.1.2 IRenderState、ITransformable和ISprite接口 265
8.1.3 IDrawable、IHittable和IShape接口 267
8.2 實現非場景圖類型精靈系統 268
8.2.1 Transform2D輔助類 269
8.2.2 ISprite接口的實現 269
8.2.3 Sprite2DManager管理類 272
8.3 IShape形體系統 275
8.3.1 線段Line類 276
8.3.2 BaseShape2D抽象基類 278
8.3.3 Rect類和Grid類 280
8.3.4 Circle類和Ellipse類 281
8.3.5 ConvexPolygon類 282
8.3.6 Scale9Grid類 283
8.3.7 SpriteFactory生產IShape產品 289
8.4 精靈系統測試Demo 290
8.4.1 Demo的運行流程 291
8.4.2 創建各種IShape對象 292
8.4.3 創建格線精靈和事件處理函式 293
8.4.4 非格線精靈的事件處理函式 295
8.4.5 Demo的入口代碼 296
8.5 本章總結 296
第9章 優美典雅的樹結構 298
9.1 樹的數據結構 298
9.1.1 樹結構簡介 298
9.1.2 樹節點添加時的要點 300
9.1.3 樹節點isDescendantOf和remove方法的實現 300
9.1.4 實現添加樹節點方法 303
9.1.5 樹結構的層次關係查詢操作 304
9.2 樹數據結構的遍歷 308
9.2.1 樹結構遍歷順序 308
9.2.2 樹結構線性遍歷算法 309
9.2.3 樹結構遍歷枚舉器 310
9.2.4 樹結構枚舉器的實現 311
9.2.5 測試樹結構枚舉器 316
9.2.6 深度優先的遞歸遍歷 320
9.2.7 使用兒子兄弟方式遞歸遍歷算法 321
9.2.8 兒子兄弟方式非遞歸遍歷算法 323
9.3 樹數據結構的序列化與反序列化 327
9.3.1 樹節點自引用特性導致序列化錯誤 328
9.3.2 樹節點的序列化和反序列化操作 328
9.4 佇列與棧的實現 331
9.5 本章總結 332
第10章 場景圖系統 334
10.1 實現場景圖精靈系統 334
10.1.1 非場景圖精靈系統的不足之處 334
10.1.2 樹結構場景圖系統 336
10.1.3 矩陣堆疊和場景圖 338
10.1.4 實現場景圖精靈系統概述 338
10.1.5 核心的SpriteNode類 338
10.1.6 實現SpriteNode類的接口方法 340
10.1.7 SpriteNode的findSprite方法實現 342
10.1.8 遞歸的更新與繪製操作 343
10.1.9 SpriteNodeManager類 344
10.1.10 修改Sprite2D類的getWorldMatrix方法 346
10.1.11 讓Sprite2DApplication類支持場景圖精靈系統 347
10.2 骨骼層次精靈Demo 348
10.2.1 實現骨骼形體 348
10.2.2 SkeletonPersonTest類 349
10.2.3 事件處理程式 351
10.2.4 使用renderEvent事件 354
10.2.5 本節總結 356
10.3 坦克沿貝塞爾路徑運動Demo 357
10.3.1 實現BezierPath形體類 358
10.3.2 需求描述 359
10.3.3 Demo的場景圖 361
10.3.4 TankFollowBezierPathDemo類初始化 361
10.3.5 創建錨點、控制點及連線精靈 363
10.3.6 創建二次貝塞爾路徑及坦克精靈 364
10.3.7 鍵盤事件處理方法 365
10.3.8 滑鼠事件處理方法 366
10.3.9 坦克沿路徑運動的核心算法 367
10.3.10 讓坦克動起來 368
10.4 讓精靈系統支持裁剪操作 370
10.5 本章總結 372
作者簡介
步磊峰 現為上海斐繁信息科技有限公司技術負責人。計算機圖形編程資深愛好者。有超過15年的編程經驗。擅長C、C++、C#、Java、Objc、JavaScript、TypeScript等程式語言。在作者的程式人生中，曾經寫過3D程式、跨平台UI引擎、Java頁游伺服器和微信伺服器，並為國內的多個大型國營金融機構開發過多款移動端App。個人最大的成就是通過內部培訓，為公司培養了20多個C語言、C++及移動端的開發人才。
