最近有個需求是要做一個畫布，可以上傳圖片，圖示(箭頭等)，以及編輯文字框。一開始想著找個現成的庫直接用，不過由於用的是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.

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