TypeScript圖形渲染實戰(zhàn)：2D架構(gòu)設(shè)計與實現(xiàn)

目錄
前言
第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擴(kuò)展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擴(kuò)展 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方法變換坐標(biāo)系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 鼠標(biāo)單擊事件測試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