TypeScript图形渲染实战PDF|Epub|txt|kindle电子书版本网盘下载

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

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1篇 TypeScript篇2

第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篇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 绘制矩形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

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 坦克Demo173

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 向量投影Demo203

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 精灵系统测试Demo290

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 骨骼层次精灵Demo348

10.2.1 实现骨骼形体348

10.2.2 SkeletonPersonTest类349

10.2.3 事件处理程序351

10.2.4 使用renderEvent事件354

10.2.5 本节总结356

10.3 坦克沿贝塞尔路径运动Demo357

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