首页 >软件与程序设计 > TypeScript图形渲染实战:2D架构设计与实现

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

作者:步磊峰 编著

出版日期:2019年02月

文件大小:24.78M

支持设备:

¥60.00在线试读

适用客户端:
言商书局
iPad/iPhone客户端:下载 Android客户端:下载PC客户端:下载更多详情:查看
?对图书下载、阅读卡购买有疑问:立即进入帮助中心>>
图书简介
目录
前言
第1篇 TypeScript篇
 第1章 构建TypeScript开发、编译和调试环境
  1.1 TypeScript简介
  1.2 安装TypeScript开发环境
   1.2.1 安装Node.js
   1.2.2 安装VS Code
   1.2.3 NPM全局安装TypeScript
   1.2.4 第一个TypeScript程序
  1.3 使用TypeScript编译(转译)器
   1.3.1 生成tsconfig.json文件
   1.3.2 解决生成tsconfig.json文件后带来的常见问题
   1.3.3 自动编译TypeScript文件
  1.4 模块化开发TypeScript
   1.4.1 tsconfig.json文件中的target和module命令选项
   1.4.2 编写Canvas2D类导出给main.ts调用
   1.4.3 使用lite-server搭建本地服务器
  1.5 使用SystemJS自动编译加载TypeScript
   1.5.1 NPM本地安装TypeScript库和SystemJS库
   1.5.2 SystemJS直接编译TypeScript源码
  1.6 使用VS Code调试TypeScript源码
   1.6.1 安装及配置Debugger for Chrome扩展
   1.6.2 VS Code中单步调试TypeScript
  1.7 本章总结
 第2章 使用TypeScript实现Doom 3词法解析器
  2.1 Token与Tokenizer
   2.1.1 Doom3文本文件格式
   2.1.2 使用IDoom3Token与IDoom3Tokenizer接口
   2.1.3 ES 6中的模板字符串
   2.1.4 IDoom3Token与IDoom3Tokenizer接口的定义
  2.2 IDoom3Token与IDoom3Tokenizer接口的实现
   2.2.1 Doom3Token类成员变量的声明
   2.2.2 Doom3Token类变量初始化的问题
   2.2.3 IDoom3Token接口方法的实现
   2.2.4 Doom3Token类的非接口方法实现
   2.2.5 Doom3Tokenzier处理数字和空白符
   2.2.6 IDoom3Tokenizer接口方法实现
   2.2.7 Doom3Tokenizer字符处理私有方法
   2.2.8 核心的getNextToken方法
   2.2.9 跳过不需处理的空白符和注释
   2.2.10 实现_getNumber方法解析数字类型
   2.2.11 实现_getSubstring方法解析子字符串
   2.2.12 实现_getString方法解析字符串
   2.2.13 IDoom3Tokenizer词法解析器状态总结
  2.3 使用工厂模式和迭代器模式
   2.3.1 微软COM中创建接口的方式
   2.3.2 Doom3Factory工厂类
   2.3.3 迭代器模式
   2.3.4 模拟微软.NetFramework中的泛型迭代器
   2.3.5 IDoom3Tokenizer扩展IEnumerator接口
   2.3.6 修改Doom3Tokenizer源码
   2.3.7 使用VS Code中的重命名重构方法
   2.3.8 使用迭代器解析Token
   2.3.9 面向接口与面向对象编程的个人感悟
  2.4 从服务器获取资源
   2.4.1 HTML加载本地资源遇到的问题
   2.4.2 从服务器加载资源
   2.4.3 使用XHR向服务器请求资源文件
   2.4.4 TypeScript中的类型别名
   2.4.5 使用doGet请求文本文件并解析
   2.4.6 解决仍有空白字符输出问题
   2.4.7 实现doGetAsync异步请求方法
   2.4.8 声明TypeScript中的回调函数
   2.4.9 调用回调函数
  2.5 本章总结
第2篇 Canvas2D篇
 第3章 动画与Application类
  3.1 requestAnimationFrame方法与动画
   3.1.1 HTML中不间断的循环
   3.1.2 requestAnimationFrame与监视器刷新频率
   3.1.3 基于时间的更新与重绘
  3.2 Application类及其子类
   3.2.1 Application类体系结构
   3.2.2 启动动画循环和停止动画循环
   3.2.3 Application类中的更新和重绘
   3.2.4 回调函数的this指向问题
   3.2.5 函数调用时this指向的Demo演示
   3.2.6 CanvasInputEvent及其子类
   3.2.7 使用getBoundingRect方法变换坐标系
   3.2.8 将DOM Event事件转换为CanvasInputEvent事件
   3.2.9 EventListenerObject与事件分发
   3.2.10 让事件起作用
   3.2.11 Canvas2DApplication子类和WebGLApplication子类
  3.3 测试及修正Application类
   3.3.1 继承并覆写Application基类的虚方法
   3.3.2 测试ApplicationTest类
   3.3.3 多态(虚函数动态绑定)
   3.3.4 鼠标单击事件测试
   3.3.5 CSS盒模型对_viewportToCanvasCoordinate的影响
   3.3.6 正确的_viewportToCanvasCoordinate方法实现
  3.4 为Application类增加计时器功能
   3.4.1 Timer类与TimeCallback回调函数
   3.4.2 添加和删除Timer(计时器)
   3.4.3 触发多个定时任务的操作
   3.4.4 测试Timer功能
  3.5 本章总结
 第4章 使用Canvas2D绘图
  4.1 绘制基本几何体
   4.1.1 Canvas2DApplication的绘制流程
   4.1.2 绘制矩形Demo
   4.1.3 模拟Canvas2D中渲染状态堆栈
   4.1.4 线段属性与描边操作(stroke)
   4.1.5 虚线绘制(交替绘制线段)
   4.1.6 使用颜色描边和填充
   4.1.7 使用渐变对象描边和填充
   4.1.8 使用图案对象描边和填充
   4.1.9 后续要用到的一些常用绘制方法
  4.2 绘制文本
   4.2.1 封装fillText方法
   4.2.2 文本的对齐方式
   4.2.3 自行实现文本对齐效果
   4.2.4 计算文本高度算法
   4.2.5 嵌套矩形定位算法
   4.2.6 fillRectWithTitle方法的实现
   4.2.7 自行文本对齐实现Demo
   4.2.8 font属性
   4.2.9 实现makeFontString辅助方法
  4.3 绘制图像
   4.3.1 drawImage方法
   4.3.2 Repeat图像填充模式
   4.3.3 加强版drawImage方法的实现
   4.3.4 加强版drawImage方法效果演示
   4.3.5 离屏Canvas的使用
   4.3.6 操作Canvas中的图像数据
  4.4 绘制阴影
  4.5 本章总结
第3篇 图形数学篇
 第5章 Canvas2D坐标系变换
  5.1 局部坐标系变换
   5.1.1 准备工作
   5.1.2 平移操作演示
   5.1.3 平移和旋转组合操作演示
   5.1.4 绘制旋转的轨迹
   5.1.5 变换局部坐标系的原点
   5.1.6 测试fillLocalRectWithTitle方法
   5.1.7 彻底掌控局部坐标系变换
   5.1.8 通用的原点变换方法
   5.1.9 公转(Revolution)与自转(Rotation)
   5.1.10 原点变换的另一种方法
  5.2 坦克Demo
   5.2.1 象限(Quadrant)文字绘制
   5.2.2 坦克形体的绘制
   5.2.3 坦克及炮塔的旋转
   5.2.4 计算坦克的朝向
   5.2.5 坦克朝着目标移动
   5.2.6 使用键盘控制炮塔的旋转
   5.2.7 初始朝向的重要性
   5.2.8 朝向正确的运行
   5.2.9 坦克朝着目标移动效果的生成代码
  5.3 本章总结
 第6章 向量数学及基本形体的点选
  6.1 向量数学
   6.1.1 向量的概念
   6.1.2 向量的大小与方向
   6.1.3 向量的加减法及几何含义
   6.1.4 负向量及几何含义
   6.1.5 向量与标量乘法及几何含义
   6.1.6 向量标量相乘取代三角函数sin和cos的应用
   6.1.7 向量的点乘及几何含义
   6.1.8 向量的夹角及朝向计算
  6.2 向量投影Demo
   6.2.1 Demo的需求描述
   6.2.2 绘制向量
   6.2.3 向量投影算法
   6.2.4 投影效果演示代码
   6.2.5 向量getAngle和getOrientation方法的区别
  6.3 点与基本几何形体的碰撞检测算法
   6.3.1 点与线段及圆的碰撞检测
   6.3.2 点与矩形及椭圆的碰撞检测
   6.3.3 点与三角形的碰撞检测
   6.3.4 点与任意凸多边形的碰撞检测
  6.4 附录:图示代码
   6.4.1 图6.1向量概念图示源码
   6.4.2 图6.2和图6.3向量加减法图示源码
   6.4.3 图6.4负向量图示源码
   6.4.4 图6.5向量与标量相乘图示源码
   6.4.5 图6.6向量的点乘图示源码
   6.4.6 图6.11点与三角形的关系图示源码
   6.4.7 图6.12和图6.13凹凸多边形图示源码
  6.5 本章总结
 第7章 矩阵数学及贝塞尔曲线
  7.1 矩阵数学
   7.1.1 矩阵乘法
   7.1.2 单位矩阵
   7.1.3 矩阵求逆
   7.1.4 用矩阵变换向量
   7.1.5 平移矩阵及其逆矩阵
   7.1.6 缩放矩阵及其逆矩阵
   7.1.7 旋转矩阵及其逆矩阵
   7.1.8 从两个单位向量构建旋转矩阵
   7.1.9 使用makeRotationFromVectors方法取代atan2的应用
   7.1.10 仿射变换
   7.1.11 矩阵堆栈
   7.1.12 在坦克Demo中应用矩阵堆栈
   7.1.13 图7.1旋转矩阵推导图示绘制源码
  7.2 贝塞尔曲线
   7.2.1 Demo效果
   7.2.2 使用Canvas2D内置曲线绘制方法
   7.2.3 伯恩斯坦多项式推导贝塞尔多项式
   7.2.4 贝塞尔曲线自绘版
   7.2.5 鼠标碰撞检测和交互功能
   7.2.6 实现贝塞尔曲线枚举器
  7.3 本章总结
第4篇 架构与实现篇
 第8章 精灵系统
  8.1 精灵系统的架构与接口
   8.1.1 应用程序的入口与命令分发
   8.1.2 IRenderState、ITransformable和ISprite接口
   8.1.3 IDrawable、IHittable和IShape接口
  8.2 实现非场景图类型精灵系统
   8.2.1 Transform2D辅助类
   8.2.2 ISprite接口的实现
   8.2.3 Sprite2DManager管理类
  8.3 IShape形体系统
   8.3.1 线段Line类
   8.3.2 BaseShape2D抽象基类
   8.3.3 Rect类和Grid类
   8.3.4 Circle类和Ellipse类
   8.3.5 ConvexPolygon类
   8.3.6 Scale9Grid类
   8.3.7 SpriteFactory生产IShape产品
  8.4 精灵系统测试Demo
   8.4.1 Demo的运行流程
   8.4.2 创建各种IShape对象
   8.4.3 创建网格精灵和事件处理函数
   8.4.4 非网格精灵的事件处理函数
   8.4.5 Demo的入口代码
  8.5 本章总结
 第9章 优美典雅的树结构
  9.1 树的数据结构
   9.1.1 树结构简介
   9.1.2 树节点添加时的要点
   9.1.3 树节点isDescendantOf和remove方法的实现
   9.1.4 实现添加树节点方法
   9.1.5 树结构的层次关系查询操作
  9.2 树数据结构的遍历
   9.2.1 树结构遍历顺序
   9.2.2 树结构线性遍历算法
   9.2.3 树结构遍历枚举器
   9.2.4 树结构枚举器的实现
   9.2.5 测试树结构枚举器
   9.2.6 深度优先的递归遍历
   9.2.7 使用儿子兄弟方式递归遍历算法
   9.2.8 儿子兄弟方式非递归遍历算法
  9.3 树数据结构的序列化与反序列化
   9.3.1 树节点自引用特性导致序列化错误
   9.3.2 树节点的序列化和反序列化操作
  9.4 队列与栈的实现
  9.5 本章总结
 第10章 场景图系统
  10.1 实现场景图精灵系统
   10.1.1 非场景图精灵系统的不足之处
   10.1.2 树结构场景图系统
   10.1.3 矩阵堆栈和场景图
   10.1.4 实现场景图精灵系统概述
   10.1.5 核心的SpriteNode类
   10.1.6 实现SpriteNode类的接口方法
   10.1.7 SpriteNode的findSprite方法实现
   10.1.8 递归的更新与绘制操作
   10.1.9 SpriteNodeManager类
   10.1.10 修改Sprite2D类的getWorldMatrix方法
   10.1.11 让Sprite2DApplication类支持场景图精灵系统
  10.2 骨骼层次精灵Demo
   10.2.1 实现骨骼形体
   10.2.2 SkeletonPersonTest类
   10.2.3 事件处理程序
   10.2.4 使用renderEvent事件
   10.2.5 本节总结
  10.3 坦克沿贝塞尔路径运动Demo
   10.3.1 实现BezierPath形体类
   10.3.2 需求描述
   10.3.3 Demo的场景图
   10.3.4 TankFollowBezierPathDemo类初始化
   10.3.5 创建锚点、控制点及连线精灵
   10.3.6 创建二次贝塞尔路径及坦克精灵
   10.3.7 键盘事件处理方法
   10.3.8 鼠标事件处理方法
   10.3.9 坦克沿路径运动的核心算法
   10.3.10 让坦克动起来
  10.4 让精灵系统支持裁剪操作
  10.5 本章总结