TypeScript图形渲染实战：2D架构设计与实现
图书简介
本书使用微软最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。本书共10章，分为4篇：TypeScript篇、Canvas2D篇、图形数学篇、架构与实现篇。通过阅读本书，读者可以系统地掌握TypeScript语言、面向接口和泛型的编程方式、Canvas2D API绘图、图形数学（向量、点与基本形体的碰撞检测、矩阵及贝塞尔曲线）、数据结构（队列、栈、树）及重要的设计模式。本书内容丰富，讲解由浅入深，特别适合对图形、游戏和UI开发感兴趣的读者阅读，也适合需要系统学习图形开发技术的人员阅读。
图书前言
TypeScript是由微软公司开发的一种开源编程语言，主要为大型应用而设计。它是JavaScript的一个超集，扩展了JavaScript的语法，任何现有的JavaScript程序都可以不加改变地在TypeScript下工作。
本书使用最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。该精灵系统是一个具备最小运行环境（更新、重绘、裁剪，以及事件分发和响应），并支持精确点选（点与点、线段、矩形、圆形、椭圆、三角形及凸多边形），采取了享元设计模式，基于场景图管理且兼容非场景图类型，而且易于扩展的系统。
本书有何特色
1．全程使用TypeScript面向接口的编程语言
本书通过TypeScript语言提供的面向接口编程功能实现了：
- Doom3引擎中文本格式的词法解析器接口；
- 接口一致，且使用了树结构管理（场景图）和线性结构管理（非场景图）的精灵系统，并且能够让场景图类型的精灵系统兼容运行非场景图类型的精灵系统。
2．剖析Canvas2D的底层原理
本书中的Canvas2D相关章节实现了如下几个重要例子：
- 模拟了Canvas2D中的渲染状态堆栈和矩阵变换堆栈，并且在实例中使用自己的矩阵变换堆栈来运行相关例子；
- 实现了类似于Canvas2D文本绘制的各种对齐算法；
- 实现了加强版的drawImage方法，使其支持repeat/repeat-x/repeat-y填充模式的算法（类似于Canvsas2D中的图案填充），并且使用加强版的drawImage实现了九宫格缩放算法（Scale9Grid）。
3．详解图形数学及点与基本几何形体的碰撞检测算法
图形编程的最大“拦路虎”是涉及图形数学变换。书中以图形数学变换为核心实现了以下例子：
- 将平移、缩放和旋转的不同顺序组合绘制出来；
- 通过绘制各种轨迹来观察和理解物体原点变换的奥秘所在；
- 贝塞尔曲线原理动画；
- 坦克方向正确地朝着鼠标指针位置移动（三角函数版）；
- 坦克方向正确地朝着鼠标指针位置移动（使用向量缩放来避免使用sin / cos三角函数）；
- 坦克方向正确地朝着鼠标指针位置移动（使用从两个方向以向量构建的旋转矩阵来避免使用三角函数atan2，并且用自己实现的矩阵堆栈来替换Canvas2D中的矩阵堆栈）；
- 坦克沿着多条贝塞尔曲线围成的封闭路径朝向正确地运动；
- 点投影到向量上的动画效果（涉及向量的所有操作）；
- 使用鼠标精确点选旋转中的精灵（测试点与线段、矩形、圆形、椭圆、三角形，以及凸多边形碰撞检测算法及凸多边形判断算法）；
- 太阳系模拟动画；
- 骨骼层次精灵动画。
4．提供了几何原理图的生成源代码
本书图形数学相关章节中的几何原理图都是使用Canvas2D直接绘制出来的，并提供了绘制源代码。主要有如下图示：
- 向量方向与大小概念图示；
- 向量的加减法图示；
- 负向量图示；
- 向量与标量乘法图示；
- 向量点乘图示；
- 点与三角形关系图示；
- 凹多边形、凸多边形及三角形扇形化图示；
- 旋转矩阵推导图示。
5．精准地使用设计模式
本书中用到的设计模式如下：
- 使用工厂模式生产各种接口（精灵系统的精灵ISprite和所有基本形体IShape都是由SpriteFactory制造生产的）；
- 使用迭代器模式抽象所有具有迭代功能的类或接口（IDoom3Tokenizer、贝塞尔曲线迭代器、树结构深度优先和广度优先的8个线性遍历迭代器）；
- 使用模板方法设计模式（Application类通过模板方法模式规定了整个入口类的运行流程）；
- 使用适配器模式（在树结构中为了统一线性遍历算法，将队列和栈数据结构适配成一致的操作接口）；
- 使用享元设计模式（实现的精灵系统使用享元模式，多个精灵可以共享同一个形体，但是可以有不同的渲染状态、大小、位置和方向等）。
6．详尽地描述了树的数据结构要点
本书专门用一章来介绍树的数据结构，并且详尽地描述了树结构的各种重要算法。
- 基于队列的广度优先方式的4种非递归遍历算法（先根、后根、从左到右、从右到左）；
- 基于栈的深度优先方式的4种非递归遍历算法；
- 基于“父亲+儿子”数组方式的深度优先的4种递归遍历算法；
- 基于“父亲+儿子兄弟”方式的深度优先的4种递归遍历算法；
- 基于“父亲+儿子兄弟”方式的深度优先的非递归遍历算法；
- 基于JSON的序列化和反序列化算法。
本书内容及知识体系
第1篇 TypeScript篇（第1、2章）
第1章构建TypeScript开发、编译和调试环境，主要介绍了TypeScript语言的开发、编译和调试环境的搭建，最终形成一个支持源码自动编译、模块自动载入、服务器端热部署及具有强大断点调试功能的TypeScript快捷开发环境。
第2章使用TypeScript实现词法解析器，用TypeScript语言，以面向接口的方式实现了一个Doom3（原id Software公司毁灭战士3游戏引擎）词法解析器；并在此基础上实现了工厂和迭代器两种设计模式，使其支持接口的生成及使用迭代方式进行Token解析输出；同时封装了XMLHttpRequest类，用来支持从服务器端下载要解析的文件。本章还系统地介绍了后续章节中要用到的一些TypeScript常用的语法知识。
第2篇 Canvas2D篇（第3、4章）
第3章动画与Application类，详细介绍了requestAnimationFrame方法与屏幕刷新频率之间的关系；并在此基础上封装了一个支持基于时间的刷新、重绘，以及事件的分发和处理的Application类；还实现了能正确处理CSS盒模型的座标变换功能；最后添加了支持不同帧率运行的计时器，模拟了setTimeout和setInterval方法的实现。
第4章使用Canvas2D绘图，主要介绍了Canvas2D中矢量图形、文本、图像及阴影绘制的相关内容，实现了一个本章及后续章节都要使用的基于Canvas2D的演示和测试环境。本章需要读者重点关注渲染状态堆栈的实现原理，以及各种文本对齐方式的算法和支持Repeat模式的drawImage实现等内容。
第3篇 图形数学篇（第5～7章）
第5章Canvas2D座标系变换是本书的精华，通过多个例子演示了Canvas2D中局部座标系变换的相关知识点，让读者知道变换顺序的重要性，理解变换及掌握原点变换的几种方式；并且通过太阳自转和月亮自公转的例子，介绍了Canvas2D中矩阵堆栈层次变换的用法；最后通过一个坦克跟随鼠标指针朝向正确地运动Demo，深入讲解了一些常用三角函数的应用。
第6章向量数学及基本形体的点选，首先讲述了向量的一些基本操作，然后通过向量的加法和缩放操作替换第5章坦克Demo中使用的sin/cos函数。为了演示向量的一些基本操作，特意实现了点投影到向量的动画效果Demo；给出了点与线段、圆、矩形、椭圆、三角形及凸多边形等基本形体之间的碰撞检测算法；最后给出了本章所有几何图示的生成源代码，便于读者更加深入地理解向量各个操作背后的几何含义。
第7章矩阵数学及贝塞尔曲线，首先讲述了矩阵的相关知识，重点推导了旋转矩阵；然后将第5章中的坦克Demo用矩阵方式重写，演示如何通过两个单位向量构建旋转矩阵，从而消除对atan2函数的使用；接着模拟了Canvas2D中的矩阵堆栈，并用自己实现的矩阵堆栈重写坦克Demo；最后介绍了贝塞尔曲线多项式的推导过程，并实现了一个曲线动画的Demo。
第4篇 架构与实现篇（第8～10章）
第8章精灵系统，以面向接口编程的方式实现了一个精灵系统，并在该系统上实现了一个Demo，用来测试系统的点与各个基本形体之间的精确碰撞检测。该系统具有必要的功能（更新、绘制、鼠标和键盘事件的分发与响应），使用了非场景图类型，支持精确点选，基于保留模式，并采用了享元设计模式。
第9章优美典雅的树结构，主要介绍了树结构的增、删、改、查，以及各种遍历算法，最后实现了树结构的JSON序列化和反序列化算法。本章重在灵活应用TypeScript泛型编程，涉及不少泛型编程的细节。
第10章场景图系统，融合前面章节所讲知识，以面向接口的编程方式实现了一个精灵系统。该系统具有必要的功能（更新、重绘、裁剪及事件分发和响应），使用了场景图类型（建立在第9章的树结构上），支持精确点选，基于非立即渲染模式（保留模式），采用了享元设计模式，兼容运行第8章的非场景图类型。在此基础上，通过骨骼层次精灵动画，演示了场景图的层次变换功能及享元模式的优点；最后实现了坦克沿着贝塞尔路径朝向正确运行的Demo，以演示该精灵系统的综合特点。
看书籍介绍不错，有时间翻一遍，动手实验一下