使用Fabric 一段時間了，總得來說，是一款非常強大的向量圖工具，官方文件也算豐富，但文件組織形式不太好，而且少部分api設計不太一致，還是需要整理一下。

Canvas

canvas是最基礎的物件，針對

標籤做的封裝，可以管理內部繪製的所有物件。

這個canvas物件，並不是DOM裡的元素，如果需要控制dom，或者對應的context，還是需要自己獲取的。

canvasElement = document.getElementById(canvasEle);

ctx = canvasElement.getContext("2d");

新建canvas物件的時候，可以指定寬高：

canvas = new fabric.Canvas(canvasElement, {

            selection: false,

            width: 800,

            height:600

});

這裡指定的寬高會覆蓋css中設定的。注意這種建立物件的形式，Fabric.js裡基本上都是類似的，類名錶示要建立的物件型別，第一個引數是必要的資料，第二個引數是各種選項。

所有對canvas的修改，包括在其中新增刪除物件，以及物件引數的修改，都需要呼叫渲染方法才能顯示出來：

canvas.renderAll();

基本形狀

線條-Line, 圓-Circle, 矩形-Rectangel等幾何圖形，都屬於基本形狀。

所有基本形狀，都有對應的類，這樣就可以透過類例項的屬性和方法來控制它們的位置、顏色、大小等樣式。所有類都繼承自Object類，有一些公共的屬性和方法。

建立

下面是畫線的例子(給出兩個頂點座標)：

        var line =  new fabric.Line([x1, y1, x2, y2], {

            strokeWidth: 2, //線寬

            stroke: rgba(255,0,0,0.8), //線的顏色

            selectable: false

        });

        canvas.add(line);

畫圓的例子(頂點和半徑是在選項裡的),這裡left和top其實就是(x,y)，應該是借用了css裡的命名。

        var circle =  new fabric.Circle({

            radius: 2,

            left: left,

            top: top,

            originX: 'center',

            originY: 'center',

            fill: rgba(0,200,0,0.8),

            strokeWidth: 1,

            stroke: rgba(255,0,0,0.8),

            selectable: false

        };

        canvas.add(circle);

從這裡可以看出，和建立canvas類似，第一個引數是這個類專用的（比如畫直線的時候傳的起止點座標），第二個引數是通用選項，如果沒有專用引數，那麼第一個引數就直接是通用選項。所有建立完的形狀，只有透過canvas的add方法加入創景，才能顯示出來。

控制

left和top是每種Object都有的屬性，至於它到底指圖形中哪一個點的座標，由originX和originY這組引數決定，它們相當於文字編輯軟體裡的對齊方式，originX有三種可選值：left,center, right；originY也有三種可選值：top, center, bottom。

它們的示意圖如下：

如果希望每種物件預設原點都在中心，可以這樣設定：

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

width和height也是可以直接存取的屬性，顧名思義，表示長和寬（所有形狀都是有外接矩形的，所以可以用長和寬來控制大小）。

除了上面那幾個可以直接存取的屬性，大部分屬性需要使用get/set方法讀寫，比如：

line.left = pointer.x;

line.top = pointer.y;

line.set('stroke', startColor);

line.set('height', 20);

網上有些文章會寫成line.stroke=color，或者line.setProperty('stroke',color)這樣的形式，都是不能生效的，可能是早期版本的表達方式。

 Image

Image跟其他形狀類似，都是Object的子類，最大的區別在於，影像檔案的載入是非同步的，所以對Image的後續操作，都要在回撥中完成。

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {

    canvas.add(img);

}

作者：風之思考
連結：