TypeScript图形渲染实战：2D架构设计与实现

　　本书使用微软*新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。通过阅读本书，读者可以系统地掌握TypeScript语言、面向接口和泛型的编程方式、Canvas2DAPI绘图、图形数学、数据结构及重要的设计模式。本书共10章，分为4篇。第1篇TypeScript篇，主要介绍了如何构建TypeScript开发、编译和调试环境，以及如何使用TypeScript实现Doom3词法解析器；第2篇Canvas2D篇，主要介绍了动画与Application类，以及如何使用Canvas2D绘图；第3篇图形数学篇，主要介绍了坐标系变换、向量数学及基本形体的点选、矩阵数学及贝塞尔曲线；第4篇架构与实现篇，主要介绍了精灵系统、优美典雅的树结构及场景图系统。本书特别适合对图形、游戏和UI开发感兴趣的读者阅读，也适合需要系统学习图形开发的人员阅读。另外，本书还适合JavaScript程序员及想从C/C++、Java、C#等转HTML5开发的程序员阅读。

　　步磊峰现为上海斐繁信息科技有限公司技术负责人。计算机图形编程资深爱好者。有超过15年的编程经验。擅长C、C、C#、Java、Objc、JavaScript、TypeScript等编程语言。在作者的程序人生中，曾经写过3D程序、跨平台UI引擎、Java页游服务器和微信服务器，并为国内的多个大型国营金融机构开发过多款移动端App。个人的成就是通过内部培训，为公司培养了20多个C语言、C及移动端的开发人才。

目录
前言
第1篇 TypeScript篇
第1章 构建TypeScript开发、编译和调试环境2
1.1 TypeScript简介2
1.2 安装TypeScript开发环境3
1.2.1 安装Node.js3
1.2.2 安装VS Code4
1.2.3 NPM全局安装TypeScript6
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 模块化开发TypeScript15
1.4.1 tsconfig.json文件中的target和module命令选项16
1.4.2 编写Canvas2D类导出给main.ts调用16
1.4.3 使用lite-server搭建本地服务器17
1.5 使用SystemJS自动编译加载TypeScript18
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中单步调试TypeScript20
1.7 本章总结22
第2章 使用TypeScript实现 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接口的实现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 使用迭代器解析Token46
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 绘制矩形Demo99
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 自行文本对齐实现Demo126
4.2.8 font属性128
4.2.9 实现makeFontString辅助方法129
4.3 绘制图像130