基于vue和canvas开发的作业批改，包含画笔、橡皮擦、拖拽到指定位置、保存批改痕迹等功能案例

前言

由于业务需求，需要开发一个可以批改作业的组件，网上搜的一些插件不太符合业务需求，没办法>_<只能自己写呗（此处掉头发两根～）。

其原理是在学生提交的图片上使用画笔批改、橡皮擦、拖拽缩放、旋转、按步骤减分、和其他一些辅助功能操作，期间踩了很多坑，但也是在学习中成长，这里贴出来可以给迷茫的人一个参考，也给自己记录一下。代码写的通俗易懂，我觉得大家只要有点基础都可以看懂，这个案例不是最完美的，但是可以在这个基础上继续完善。

演示

整体的功能演示

保存生成的批改痕迹-base64文件预览（包含拖拽的内容）

补充

画笔部分可以用canvas平滑曲线优化，亲测效果非常nice

全部代码

index.vue

canvasContainer.vue

canvasToolbar.vue

dragStep.vue