项目背景
众所周知，动漫出版商想要出海，需要将其图片中出现的句段进行翻译为对应国家的语言，所以要完成这样的任务，需要懂翻译，懂ps的人来完成，但往往一个动漫集会有几百张图片，每张图片会有几十个句子，一个句子文字内容也不多，这些特点往往导致了动漫数字化编辑人力成本高，时间成本高，所以为了提高效率，细化工种，开发了一款基于web端的动漫图片数字化编辑工具平台，故写下这篇文章，希望对此感兴趣的朋友有帮助。
技术难点
- 单页设计，事件高度重复（几乎都是mouse事件），容易交织一起，产生大量if语句
- 模块数据容易混乱，导致维护性，扩展性差
- 完成canvas上的绘图，比如笔刷，文本框，矩形框等样式编辑，交互编辑
- 单个句子在canvas上的定位，删除，移动
- canvas上文字的竖排显示，换行处理
技术实现
技术方案
vue技术体系
- 只有一个主app.vue，出于扩展性，维护性考虑，将页面中按功能进行组件划分，甚至在右侧列表和详情也进行了组件细分，没有views文件夹，只有功能组件
- 做图形类的前端应用，数据流向性是我一直重点考虑的，上图展示的就是我的应用数据流向
- 事件的隔离性设计--使用某一功能组件，解除之前的所有mouse事件绑定，然后在该功能组件中重新监听，比如句段详情组件，会将其之前的mouse事件全部取消监听，然后重新绑定，能够按照功能进行数据处理，不会产生大量if语句
- 数据管理--没有使用vuex，感觉在单页上使用有点太重了，使用父子组件数据通信就够了，前提是做好组件细化和功能划分，否则会出现想取数据取不了的困境
- 语句定位--为每一个图形设计一个id，按照id进行激活和定位，canvas中可以获取图形的left和top值
- 文本框，笔刷，矩形框的设计--每一图形的创建都是一个object，包含位置，样式，是否可见，id值，层级设计（有时候需要保证文本框优于笔刷显示，不被覆盖住），激活样式等，每一次编辑，都是canvas重新清除重绘
- 在canvas上的图片编辑，都需要保存才能完成对该图片的修改，所以每次切换图片，提交都有隐形的图片保存
- canvas上文字框中**竖排显示，换行处理目前没有解决，没有思路，**有这方面经验的朋友可以一起探讨下
