用Fabric.js來做一個簡易功能的畫布

　　最近有個需求是要做一個畫布，可以上傳圖片，圖標(箭頭等)，以及編輯文本框。一開始想着找個現成的庫直接用，不過由於用的是angular7版本，而現有的幾個包含這些功能的庫都不支持，似乎對vue更友好一點，沒辦法，只能自己做，好在有個fabric.js庫對 canvas有了一個很好的封裝，算是不需要再閱讀cavans繁雜的文檔了。

　　安裝

npm i fabric 

　　使用

　　1. 創建畫布對象

　　

const canvas = new fabric.Canvas('canvas');

　　此處的 new fabric.Canvas('canvas'); 是傳入的 dom的ID名稱

　　2. 畫基礎圖形

　　　　1. 三角形

        const triangle = new fabric.Triangle({
          width: 30, // 底邊長度
          height: 25, // 底邊到對角的距離
          fill: color,
        });

　　　　2. 矩形

        const rect = new fabric.Rect({
          top: 25, // 距離容器頂部 100px
          left: 10,
          fill: color, // 填充 橙色
          width: 10, // 寬度 100px
          height: 80, // 高度 100px
        });

　　　　3. 三角形和矩形組合成一個類似的箭頭 

        const triangle = new fabric.Triangle({
          width: 30, // 底邊長度
          height: 25, // 底邊到對角的距離
          fill: color,
        });

        const rect = new fabric.Rect({
          top: 25, // 距離容器頂部 100px
          left: 10,
          fill: color, // 填充 橙色
          width: 10, // 寬度 100px
          height: 80, // 高度 100px
        });

        // 將矩形添加到畫布中
        const group = new fabric.Group([triangle, rect], {
          top: 50, // 整組距離頂部100
          left: 150, // 整組距離左側100
          angle: 90, // 整組旋轉-10deg
        });

　　　　Note: 要通過 this.canvas.add(group) 將畫好的圖形添加到畫布上

　　　　4. 畫一個圓

        const circle = new fabric.Circle({
          top: 150,
          left: 150,
          radius: 50, // 圓的半徑
          fill: 'transparent',
          stroke: color,
        });
        this.canvas.add(circle);

　　　　需要注意的是 fill是對圓填充顏色，但是如果想讓這個圓透明，可以設為'transparent' 這樣就可以透明了。

　　　　5.畫線段

        const line1 = new fabric.Line(
          [
            50,
            50, // 起始點坐標
            150,
            50, // 結束點坐標
          ],
          {
            stroke: color, // 筆觸顏色
          }
        );
        const line2 = new fabric.Line(
          [
            140,
            40, // 起始點坐標
            150,
            50, // 結束點坐標
          ],
          {
            stroke: color, // 筆觸顏色
          }
        );
        const line3 = new fabric.Line(
          [
            140,
            60, // 起始點坐標
            150,
            50, // 結束點坐標
          ],
          {
            stroke: color, // 筆觸顏色
          }
        );
        const group_new = new fabric.Group([line1, line2, line3], {
          top: 50, // 整組距離頂部100
          left: 150, // 整組距離左側100
        });
        this.canvas.add(group_new);

　　　　此處是畫了三個線段，要注意坐標點是在畫布左上角的點。同樣也是通過fabric.Group 來將三條線段組合成一個箭頭

　　3. 添加文本編輯框

　　　

        this.canvas.add(
          new fabric.Textbox('DoubleClick to Edit...', {
            left: 30,
            top: 30,
            fontSize: 20,
            width: 100,
            fill: color,
          })
        );

 

 

　　3.畫布中的監聽事件

　　

    this.canvas.on('selection:created', function (e: any) {
      _this.disabledDel = true;
      _this.selectedCanvas = e.selected ? e.selected : [];
    });
    this.canvas.on('selection:updated', function (e: any) {
      _this.disabledDel = true;
      _this.selectedCanvas = e.selected ? e.selected : [];
    });
    this.canvas.on('selection:cleared', function (e: any) {
      _this.disabledDel = false;
    });

　　我們在創建畫布對象的時候就可以直接添加監聽事件了。

　　如上代碼中，created 事件是初次點擊畫布元素，updated是點擊其他畫布元素，cleared是刪除元素或者點擊空白處使當前沒有元素被選中

　　這幾個事件是為了做 刪除選中元素的功能。 

　　通過 this.canvase.remove(obj)  

　　obj 是如上代碼事件回調參數的 selected的值 即 e.selected

　　需要注意一點的是： 在具體某個畫布元素創建好之后也可以為它們單獨去添加監聽事件，不過寫法有不同，如 canvas的 selected:created 要寫成selected了

　　大部分是直接寫:后面的就可以了。如 object:scaling是畫布canvas的事件，對應具體的元素則是 scaling.

 

　　4. canvas畫布中的多個圖片對象之間的圖層位置變化

　　下移：canvas.sendBackwards(canvas.getActiveObject()); 　　上移：canvas.bringForward(canvas.getActiveObject()); 　　置頂：canvas.bringToFront(canvas.getActiveObject()); 　　置底：canvas.sendToBack(canvas.getActiveObject());

 

 

　　目前我的需要只用到這些方法。fabric.js的文檔還有很多很多。簡直是浩如煙海，還有很多新奇的功能沒有用到，也沒有深入了解過。