 |
-- 會員 / 註冊 --
|
 |
|
|
|
TypeScript圖形渲染實戰：2D架構設計與實現 ( 簡體 字) |
| 作者：步磊峰 | 類別：1. -> 教材 -> 數位影像處理 |
| 譯者： |
| 出版社：機械工業出版社 |  3dWoo書號： 50770
詢問書籍請說出此書號！【缺書】
NT售價： 495 元 |
| 出版日：3/7/2019 |
| 頁數：373 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787111619246 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
| 前言： |
內容簡介：本書使用微軟*新的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開發的程序員閱讀。 |
目錄：前言
第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
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篇 圖形數學篇
第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篇 架構與實現篇
第8章 精靈系統260
8.1 精靈系統的架構與接口260
8.1.1 應用程序的入口與命令分發262
8.1.2 IRenderState、ITransformable和ISprite接口265
8.1.3 IDrawable、IHittable和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 |
| 序： |
|
