使用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/