使用fabricjs实现图形编辑器
1、fabricjs的引用html
1.能够直接经过script引入vue
2.经过npm安装html5
1）npm install fabricjsnpm
2）在须要使用的地方导入 import { fabric } from ‘fabric‘canvas
而后就能够使用fabric来对canvas画布进行图形的编辑数组
2、fabricjs的使用编辑器
1.将图层从外部拖入画布中spa
.设置元素为可拖放，将draggable属性设置为true.net
.dataTransfer.setData() 是用于设置拖动数据的数据类型和值，第一个参数通常都是为文本text,第二个参数是被拖动对象的id，也可不设置双向绑定
.绑定ondragover事件（规定元素要放到何处）和ondrop(元素放置)
注意：ondragover事件是必需要的，否则会识别不了放置的位置，详细可了解菜鸟教程上的解说http://www.runoob.com/html/html5-draganddrop.html
以上代码在绑定拖动事件的时候有if判断是为了限制拖拽放置的容器，让左右两边的拖拽互不影响
在drop须要放置的事件中调用fabricjs的添加图片的方法，left和top就是你要把被拖元素放置在画布上的位置
添加成功后图形就能够进行平移、缩放、旋转等基本操做
3.复制、粘贴、剪切、撤销、重作
参考https://www.cnblogs.com/lfqcode/p/8601605.html，剪切的原理和复制相似，不一样的是剪切的时候要将该对象从画布上移除
撤销重作可参考https://jsfiddle.net/abhi47/rwdpf3nL/29/
4.经过拖动改变图层层级关系
1）首先经过vue的数据双向绑定将左中右三部分联系起来，从左边拖动图形到画布的时候，右边数据列相应发生改变，在对右边进行拖动改变图层层级的时候，右边数据列的顺序发生变化的同时画布图层层级也跟着变化
这时候能够封装一个方法，用来更新右边数据列的信息
操做右边区域的拖拽和左边的同样，可是要限制所拖拽后要放置的容器，否则会出现右边的能够拖放到画布的状况，因此在绑定拖动事件的时候才会有判断的状况
2）处理右边拖动事件的第一步和左边的一致，先设置元素为可拖动，而后要让图层拖动到空白区域才能放置
这时候须要考虑几个问题（由于后面不管是更新数据列仍是更新画布图层的层级关系，都是须要用到索引的，因此如下状况都是使用索引值）：
第一，须要记录被拖目标对象的索引
第二，须要记录最终放置在哪一个位置
第三，肯定好放置位置后数据列顺序改变，同时画布图层层级也变化
如今就按照上面的问题一步一步解决：
第一，给右边每条数据上绑定一个自定义属性data-orig,值为数组的index，这是数组用index属性是为了记录数据的原始状态，由于在页面展现的时候是倒序显示的
（该数组的数据更新在左边拖图形到画布的时候同步更新了）
第二，由于要实现元素拖动空白区域才能让其放置，这时能够在每条记录之中添加一个p标签，而后设置opacity为0
同时绑定一个自定义属性，值也是数组的index，而后怎么获取呢，继续看
以上代码中，evt就是记录了被拖目标对象的信息，而后经过toElemen.getAttribute能够获取到某个属性值，objsArr数组是canvas画布的全部图层记录
获取到后第一步是须要先把当前拖动的目标对象记录起来，而后splice将其从数组中删除，为何是操做记录画布图层的数组，后面会说到，
移除以后，再将目标对象插入到数组指定的位置，而后调用
以上就是关于fabricjs的部分图形操做，可能有的地方说的不太好，就请见谅了。
fabricjs：http://fabricjs.com/