使用vue.js 和fabric.js 制作的canvas 画板
2019-03-13 本文已影响0人
mills_han
使用vue.js和fabric.js构建的web画板,使用vuex来做状态的控制,目前支持画箭头、虚线、矩形、原型、文字等功能,删除功能和回退功能待开发中。github地址
效果图如下:
img.png
前阵子刚好业务上有需求要做一个可以批注作业的功能,对于前端而言好像canvas是个不错的选择, 因为之前对canvas了解也只停在于能画个直线,圆圈之类的... 心想如果要用原生的canvas API来写的话,就太痛苦了。。
经过一番调查发现fabric.js 对于我这等想偷懒的人来说简直是神器啊!!!因为fabric.js 就是针对canvas繁琐的API进行的一系列封装操作,而且现在这个库还在维护中,github的start 也有12K之多!!这也是把它用在我项目中的原因之一
但是缺点是它的文档真的是不太好理解,刚看会一脸懵逼的!以后找机会再总结的写一篇.
推荐几个fabric的好帖子
Canvas实用库Fabric.js使用手册
# fabric.js和高级画板
贴下代码(万一有人想看看呢,给个start呗客官)这个是代码地址