TypeScript图形渲染实战PDF电子书下载

第1篇 TypeScript篇 2

第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篇 60

第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篇 图形数学篇 146

第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篇 架构与实现篇 260

第8章 精灵系统 260

8.1 精灵系统的架构与接口 260

8.1.1 应用程序的入口与命令分发 262

8.1.2 IRenderState、ITransformable和ISprite接口 265

8.1.3 IDrawable、lHittable和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