摘要：使用一段時(shí)間了，總得來(lái)說(shuō)，是一款非常強(qiáng)大的矢量圖工具，官方文檔也算豐富，但文檔組織形式不太好，而且少部分設(shè)計(jì)不太一致，還是需要整理一下。是最基礎(chǔ)的對(duì)象，針對(duì)標(biāo)簽做的封裝，可以管理內(nèi)部繪制的所有對(duì)象。

使用一段時(shí)間了，總得來(lái)說(shuō)，是一款非常強(qiáng)大的矢量圖工具，官方文檔也算豐富，但文檔組織形式不太好，而且少部分api設(shè)計(jì)不太一致，還是需要整理一下。

canvas是最基礎(chǔ)的對(duì)象，針對(duì)標(biāo)簽做的封裝，可以管理內(nèi)部繪制的所有對(duì)象。
這個(gè)canvas對(duì)象，并不是DOM里的元素，如果需要控制dom，或者對(duì)應(yīng)的context，還是需要自己獲取的。

canvasElement = document.getElementById(canvasEle);
ctx = canvasElement.getContext("2d");

新建canvas對(duì)象的時(shí)候，可以指定寬高：

canvas = new fabric.Canvas(canvasElement, { 
            selection: false,
            width: 800,
            height:600
});

這里指定的寬高會(huì)覆蓋css中設(shè)置的。注意這種創(chuàng)建對(duì)象的形式，F(xiàn)abric.js里基本上都是類(lèi)似的，類(lèi)名表示要?jiǎng)?chuàng)建的對(duì)象類(lèi)型，第一個(gè)參數(shù)是必要的數(shù)據(jù)，第二個(gè)參數(shù)是各種選項(xiàng)。

所有對(duì)canvas的修改，包括在其中添加刪除對(duì)象，以及對(duì)象參數(shù)的修改，都需要調(diào)用渲染方法才能顯示出來(lái)：

canvas.renderAll();

線(xiàn)條-Line, 圓-Circle, 矩形-Rectangel等幾何圖形，都屬于基本形狀。

所有基本形狀，都有對(duì)應(yīng)的類(lèi)，這樣就可以通過(guò)類(lèi)實(shí)例的屬性和方法來(lái)控制它們的位置、顏色、大小等樣式。所有類(lèi)都繼承自O(shè)bject類(lèi)，有一些公共的屬性和方法。

下面是畫(huà)線(xiàn)的例子(給出兩個(gè)頂點(diǎn)坐標(biāo))：

        var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //線(xiàn)寬
            stroke: rgba(255,0,0,0.8), //線(xiàn)的顏色
            selectable: false
        });
        canvas.add(line);

畫(huà)圓的例子(頂點(diǎn)和半徑是在選項(xiàng)里的),這里left和top其實(shí)就是(x,y)，應(yīng)該是借用了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);

從這里可以看出，和創(chuàng)建canvas類(lèi)似，第一個(gè)參數(shù)是這個(gè)類(lèi)專(zhuān)用的（比如畫(huà)直線(xiàn)的時(shí)候傳的起止點(diǎn)坐標(biāo)），第二個(gè)參數(shù)是通用選項(xiàng)，如果沒(méi)有專(zhuān)用參數(shù)，那么第一個(gè)參數(shù)就直接是通用選項(xiàng)。所有創(chuàng)建完的形狀，只有通過(guò)canvas的add方法加入創(chuàng)景，才能顯示出來(lái)。

left和top是每種Object都有的屬性，至于它到底指圖形中哪一個(gè)點(diǎn)的坐標(biāo)，由originX和originY這組參數(shù)決定，它們相當(dāng)于文本編輯軟件里的對(duì)齊方式，originX有三種可選值：left,center, right；originY也有三種可選值：top, center, bottom。

它們的示意圖如下：

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

如果希望每種對(duì)象缺省原點(diǎn)都在中心，可以這樣設(shè)置：

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

width和height也是可以直接存取的屬性，顧名思義，表示長(zhǎng)和寬（所有形狀都是有外接矩形的，所以可以用長(zhǎng)和寬來(lái)控制大?。?/p>

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

line.left = pointer.x;
line.top = pointer.y;
line.set("stroke", startColor);
line.set("height", 20);

網(wǎng)上有些文章會(huì)寫(xiě)成line.stroke=color，或者line.setProperty("stroke",color)這樣的形式，都是不能生效的，可能是早期版本的表達(dá)方式。

Image跟其他形狀類(lèi)似，都是Object的子類(lèi)，最大的區(qū)別在于，圖像文件的加載是異步的，所以對(duì)Image的后續(xù)操作，都要在回調(diào)中完成。

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
    canvas.add(img);
}