使用fabricjs實現圖形編輯器
一、fabricjs的引用
1.可以直接通過script引入
2.通過npm安裝
1）npm install fabricjs
2）在需要使用的地方導入 import { fabric } from ‘fabric‘
然后就可以使用fabric來對canvas畫布進行圖形的編輯
二、fabricjs的使用
1.將圖層從外部拖入畫布中
.設置元素為可拖放，將draggable屬性設置為true
.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/