canvas如何实现类似编辑器工具？

Question

https://printify.com/app/edit... 。目前在开发项目的过程中遇到了一些技术难题，如果有对这块熟悉的大佬欢迎沟通，必有重酬！具体问题如下：
1）怎么进行在嵌套画布内进行画布叠加
2）在设计一件衣服的时候，可能存在多个变体（例如：多个不同颜色的衣服以及不同尺码的衣服）需要将设计好的图片同步到其他变体：如果有8个颜色、在保存的时候要同时保存8张图片（如果存在更多变体，浏览器极大可能会出现卡顿内存溢出的情况）
3）产品需要根据不同的尺码，动态计算画布距离衣服的位置（比如领子、衣袖）
4）需要考虑上传到画布的素材图的大小还有个数，如果过多，也会对渲染性能造成影响

Answer 1

• 看这个网站里编辑器的风格，多半是使用了 FabricJS ，fabric 基本上把编辑器的功能完整做出来了，自己根据文档改改就行了；
• 内存的问题交给浏览器，不过所谓“变体”只需要渲染出一个来，其他的都以序列化的数据存储在内存里（你不会全部同步渲染或者存图片吧）；
• 只要有合适的坐标系和参照点，距离什么的就不成问题，大不了就是需求方找人打标，不要想着让 JS 识别图片，能做到但是很傻；
• 性能这些都不必要过早担心，既然选择了浏览器，很多事情交给浏览器就行了，只要自己别写死循环。