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

目錄
前言
第1篇 TypeScript篇
第1章 構(gòu)建TypeScript開(kāi)發(fā)、編譯和調(diào)試環(huán)境2
1.1 TypeScript簡(jiǎn)介2
1.2 安裝TypeScript開(kāi)發(fā)環(huán)境3
1.2.1 安裝Node.js3
1.2.2 安裝VS Code4
1.2.3 NPM全局安裝TypeScript6
1.2.4 第一個(gè)TypeScript程序7
1.3 使用TypeScript編譯（轉(zhuǎn)譯）器13
1.3.1 生成tsconfig.json文件13
1.3.2 解決生成tsconfig.json文件后帶來(lái)的常見(jiàn)問(wèn)題13
1.3.3 自動(dòng)編譯TypeScript文件15
1.4 模塊化開(kāi)發(fā)TypeScript15
1.4.1 tsconfig.json文件中的target和module命令選項(xiàng)16
1.4.2 編寫(xiě)Canvas2D類導(dǎo)出給main.ts調(diào)用16
1.4.3 使用lite-server搭建本地服務(wù)器17
1.5 使用SystemJS自動(dòng)編譯加載TypeScript18
1.5.1 NPM本地安裝TypeScript庫(kù)和SystemJS庫(kù)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實(shí)現(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接口的實(shí)現(xiàn)30
2.2.1 Doom3Token類成員變量的聲明30
2.2.2 Doom3Token類變量初始化的問(wèn)題31
2.2.3 IDoom3Token接口方法的實(shí)現(xiàn)32
2.2.4 Doom3Token類的非接口方法實(shí)現(xiàn)33
2.2.5 Doom3Tokenzier處理數(shù)字和空白符34
2.2.6 IDoom3Tokenizer接口方法實(shí)現(xiàn)34
2.2.7 Doom3Tokenizer字符處理私有方法35
2.2.8 核心的getNextToken方法36
2.2.9 跳過(guò)不需處理的空白符和注釋37
2.2.10 實(shí)現(xiàn)_getNumber方法解析數(shù)字類型38
2.2.11 實(shí)現(xiàn)_getSubstring方法解析子字符串40
2.2.12 實(shí)現(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ū)ο缶幊痰膫€(gè)人感悟47
2.4 從服務(wù)器獲取資源47
2.4.1 HTML加載本地資源遇到的問(wèn)題48
2.4.2 從服務(wù)器加載資源48
2.4.3 使用XHR向服務(wù)器請(qǐng)求資源文件49
2.4.4 TypeScript中的類型別名50
2.4.5 使用doGet請(qǐng)求文本文件并解析51
2.4.6 解決仍有空白字符輸出問(wèn)題52
2.4.7 實(shí)現(xiàn)doGetAsync異步請(qǐng)求方法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章 動(dòng)畫(huà)與Application類60
3.1 requestAnimationFrame方法與動(dòng)畫(huà)60
3.1.1 HTML中不間斷的循環(huán)60
3.1.2 requestAnimationFrame與監(jiān)視器刷新頻率62
3.1.3 基于時(shí)間的更新與重繪65
3.2 Application類及其子類67
3.2.1 Application類體系結(jié)構(gòu)67
3.2.2 啟動(dòng)動(dòng)畫(huà)循環(huán)和停止動(dòng)畫(huà)循環(huán)68
3.2.3 Application類中的更新和重繪69
3.2.4 回調(diào)函數(shù)的this指向問(wèn)題70
3.2.5 函數(shù)調(diào)用時(shí)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 測(cè)試及修正Application類80
3.3.1 繼承并覆寫(xiě)Application基類的虛方法80
3.3.2 測(cè)試ApplicationTest類81
3.3.3 多態(tài)（虛函數(shù)動(dòng)態(tài)綁定）82
3.3.4 鼠標(biāo)單擊事件測(cè)試83
3.3.5 CSS盒模型對(duì)_viewportToCanvasCoordinate的影響84
3.3.6 正確的_viewportToCanvasCoordinate方法實(shí)現(xiàn)86
3.4 為Application類增加計(jì)時(shí)器功能90
3.4.1 Timer類與TimeCallback回調(diào)函數(shù)90
3.4.2 添加和刪除Timer（計(jì)時(shí)器）91
3.4.3 觸發(fā)多個(gè)定時(shí)任務(wù)的操作93
3.4.4 測(cè)試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 使用漸變對(duì)象描邊和填充110
4.1.8 使用圖案對(duì)象描邊和填充113
4.1.9 后續(xù)要用到的一些常用繪制方法115
4.2 繪制文本117
4.2.1 封裝fillText方法117
4.2.2 文本的對(duì)齊方式119
4.2.3 自行實(shí)現(xiàn)文本對(duì)齊效果121
4.2.4 計(jì)算文本高度算法122
4.2.5 嵌套矩形定位算法122
4.2.6 fillRectWithTitle方法的實(shí)現(xiàn)125
4.2.7 自行文本對(duì)齊實(shí)現(xiàn)Demo126
4.2.8 font屬性128
4.2.9 實(shí)現(xiàn)makeFontString輔助方法129
4.3 繪制圖像130