前言
课前准备
- 具备前端基础，如HTML、css、js。
- 多多少少敲过一点vue。
- 具备canvas基础，若没有，可以看一下我的《canvas从入门到放飞自我-基础篇》
学习目标
- 以面向对象的思路架构canvas。
- 使用模型矩阵、视图投影矩阵、裁剪空间搭建二维世界。
- 对canvas图像进行自由变换。
- 开发实战案例-T恤图案编辑器。
知识点
- 原生canvas架构
- 向量
- 二维矩阵变换
- canvas合成
- vitest+vue3.0+ts
1-原生canvas 2d 的市场需求分析
原生canvas 2d主要应用于定制化需求比较高、灵活度较高、兼容性要求较高的二维项目。
今年我分别在南京和深圳遇到两家canvas 2d相关的公司，他们都是开发白板的，应用于远程会议和教育，而且会再考虑向三维VR、AR方向扩展。
南京的那家公司起初是用Pixi.js 开发二维白板的，但后期遇到了一些兼容性和项目优化问题，最后还是选择了原生canvas。
由此可见，如果一个公司的业务以canvas 2d为主导，那最好自己造轮子。
当然，WebGL也是同样道理，只是WebGL的架构成本极高，多数公司会基于three.js之类的框架局部造轮子，纯WebGl造轮子的公司我只遇到三四家。
2-实战项目简介
在我们这个课里，我会通过一个T恤图案编辑器的项目告诉大家如何架构canvas。
此项目可以对多个图案进行变换组合，实时查看效果。
其中会涉及到二维图形基类、集合对象、场景对象、相机对象等基本的图形对象，以及向量、矩阵相关的图形学知识。
T恤图案编辑器可以实现的具体功能如下：
- 添加图案: 点选图案库中的图案;
- 选择编辑视口中的图案: 单击图案或单击相应图层;
- 中心缩放: alt+缩放操作;
- 等比缩放: shift+缩放操作;
- 等量旋转: shift+旋转操作;
- 删除图案: Del;
- 取消变换: Esc 或点击空白处;
- 确认变换: Enter;
- 改变图案排列顺序: 拖拽图层;
- 缩放视口: 滑动鼠标滚轮;
- 平移视口: 按住鼠标滚轮移动鼠标。
- 兼容性: PC端+鼠标。
上面的功能，就直接视作产品需求了，大家可以自己操作试试。
除此之外，鼠标在进行不同的变换操作的时候，鼠标图案也会发生相应的改变。
有了产品需求后，我们就可以从中抽离出我们所需要对象。
3-实战项目结构
从Dom结构来看，T恤图案编辑器由4部分组成。
- 图案库：存储图案素材；向T恤图案编辑器添加图案。
- T恤图案编辑器：管理和变换编辑器中的图案。
- 效果图：在实际产品中实时显示图案效果。
- 图层：管理图案，比如选择图案、删除图案、图案排序等。
T恤图案编辑器和效果图是两个canvas，从T恤图案编辑器到效果图的显示还需要一个虚拟canvas对象。
这个虚拟canvas对象会将T恤图案编辑器里的所有图案绘制到一张虚拟canvas上，然后再将此canvas与效果图里的产品图案进行合成。
理解了这个整体逻辑后，我们就可以一个个具体分析了，下一章我们会说T恤图案编辑器。
总结
我们这个套课程的重点就是原生canvas 2d的架构，其中的架构思想和矩阵原理是通用的。
即使你以后再开发一些其它的项目，比如之前所说的白板，也是通用的。
