Fabric.js使用总结
在使用h5的canvas实现一些需求遇到问题于是在网上找有没有现成的类库，找到了fabric和konva，我选用了fabric，这里记录一下使用过程中遇到的问题和理解。
参考文档
绘制图片
想实现的功能
- 鼠标自由绘画
- 鼠标点击空白位置展示课输入的输入框，第二次点击空白位置保存绘制并隐藏输入框
- 鼠标自由绘制矩形、圆形、椭圆、叉
- 鼠标自由绘制曲线/弧线
- 实现绘制后撤销/上一步、返回/下一步功能
- 实现根据打开的浏览器窗口展示相应比例尺寸的画布
- 实现保存画布为JSON对象或base64
- 实现清空画布上除背景外所有绘制图案清除功能
- 所有工具下都具有选中已绘制的图案和点空白位置继续创作的功能
- 实现选中图案使用键盘删除键删除
遇到的问题
- 自由绘画下如何根据鼠标在绘制图案上才选中
- 自由绘画下选中的线条如何使控制器框仅包含线条
- 点击后向左画绘制的图案不能选中
- 设置选中图案的控制器控制点
- 后绘制的图案如果压在前面绘制的图案上如何只选中后绘制的图案
- 图片保存后再次渲染到画布上显示-没有图片-四个字图片问题
- 键盘删除后点击撤销无反应问题
- 保存完图片图片丢失问题
- 保存时没有去掉多余的控制器或控制点
- 在打开和保存关闭时判断图片地址是否正确问题
- 文本输入框下键盘删除键直接删除输入框问题
- 曲线弯曲度控制的展示隐藏问题
- 绘制的曲线图案如何选中、删除、撤销、返回问题
- 撤销后又返回的绘制图案不能选中问题
- 撤销，返回后群组中图案层级关系
- 触摸屏下画弧线、画笔不能选中问题
- 如何撤销弧线后返回的弧线依然有辅助点
对应问题的解决方式
- 画笔在鼠标结束事件上增加对象的name=line，在鼠标移动事件中判断移动得到的对象是否有值，且值的name=line，关闭自由画笔即可。
- canvas.perPixelTargetFind = true。用来设置是基于像素进行检索的，而不是基于边框盒模型。
- canvas.selection=false 分组选择会影响绘制图案的选中
- canvas.cornerSize 设置控制点大小
- 后绘制的图案如果压在前面绘制的图案上如何只选中后绘制的图案，暂未解决
- 图片保存后再次渲染到画布上显示-没有图片-四个字图片问题，暂未解决
- 键盘删除canvas.remove(canvas.getActiveObject)
- 保存是需要判断保存值是否有值且正确
- canvas.discardActiveObject().renderAll() 取消活跃状态对象
- 在打开和保存关闭时判断图片地址是否正确问题
- 输入框工具类型下时，增加判断如果打开输入框，并且输入框长度为默认长度，直接return
- 自定义了三个曲线控制点控制曲线
- 绘制的曲线不能选中，暂未解决
- 撤销后又返回的绘制图案不能选中问题，暂未解决
- 撤销，返回后群组中图案层级关系，暂未解决
- 触摸屏下画弧线、画笔不能选中问题，暂未解决
- object.visible=true设置对象的显示
参考链接：
总结
这段时间个人的认识 这次使用Fabric.js插件，我学到了很多，在做好一件事时要先去设计好这件事怎么去做，正常使用下要遇到的问题，都要在写之前想好，否则写完代码很乱方法整理的也很乱，有很多多余的代码。哎，其次就是感叹自己英语差，看文档很依赖中文，作为一个程序员会英语真的有很大的帮助，年少不知其好，现在感叹自己不如人。有时停下来想想，世界这么大，我才走了多少路，才看了多少东西，果然什么样的人走什么样的路，人才是最多变的。
