FabricJS 前端繪圖庫使用總結(一)

使用一段時間了，總得來講，是一款很是強大的矢量圖工具，官方文檔也算豐富，但文檔組織形式不太好，並且少部分api設計不太一致，仍是須要整理一下。

Canvas

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。

它們的示意圖以下：

http://fabricjs.com/test/misc...

若是但願每種對象缺省原點都在中心，能夠這樣設置：

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);
}