使用Fabric 一段時(shí)間了彤悔，總得來說嘉抓，是一款非常強(qiáng)大的矢量圖工具，官方文檔也算豐富晕窑，但文檔組織形式不太好掌眠，而且少部分api設(shè)計(jì)不太一致，還是需要整理一下幕屹。
Canvas
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里基本上都是類似的架诞，類名表示要?jiǎng)?chuàng)建的對(duì)象類型，第一個(gè)參數(shù)是必要的數(shù)據(jù)干茉，第二個(gè)參數(shù)是各種選項(xiàng)谴忧。
所有對(duì)canvas的修改，包括在其中添加刪除對(duì)象角虫，以及對(duì)象參數(shù)的修改沾谓，都需要調(diào)用渲染方法才能顯示出來：
canvas.renderAll();
基本形狀
線條-Line, 圓-Circle, 矩形-Rectangel等幾何圖形，都屬于基本形狀戳鹅。
所有基本形狀均驶，都有對(duì)應(yīng)的類，這樣就可以通過類實(shí)例的屬性和方法來控制它們的位置枫虏、顏色妇穴、大小等樣式爬虱。所有類都繼承自O(shè)bject類，有一些公共的屬性和方法伟骨。
創(chuàng)建
下面是畫線的例子(給出兩個(gè)頂點(diǎn)坐標(biāo))：
? ? ? ? var line =? new fabric.Line([x1, y1, x2, y2], {
? ? ? ? ? ? strokeWidth: 2, //線寬
? ? ? ? ? ? stroke: rgba(255,0,0,0.8), //線的顏色
? ? ? ? ? ? selectable: false
? ? ? ? });
? ? ? ? canvas.add(line);
畫圓的例子(頂點(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類似继蜡，第一個(gè)參數(shù)是這個(gè)類專用的（比如畫直線的時(shí)候傳的起止點(diǎn)坐標(biāo)），第二個(gè)參數(shù)是通用選項(xiàng)逛腿，如果沒有專用參數(shù)稀并，那么第一個(gè)參數(shù)就直接是通用選項(xiàng)。所有創(chuàng)建完的形狀单默，只有通過canvas的add方法加入創(chuàng)景碘举，才能顯示出來。
控制
left和top是每種Object都有的屬性搁廓，至于它到底指圖形中哪一個(gè)點(diǎn)的坐標(biāo)引颈，由originX和originY這組參數(shù)決定，它們相當(dāng)于文本編輯軟件里的對(duì)齊方式境蜕，originX有三種可選值：left,center, right蝙场；originY也有三種可選值：top, center, bottom。
它們的示意圖如下：
如果希望每種對(duì)象缺省原點(diǎn)都在中心粱年，可以這樣設(shè)置：
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'
width和height也是可以直接存取的屬性售滤，顧名思義，表示長(zhǎng)和寬（所有形狀都是有外接矩形的台诗，所以可以用長(zhǎng)和寬來控制大型曷帷）。
除了上面那幾個(gè)可以直接存取的屬性拉队，大部分屬性需要使用get/set方法讀寫弊知，比如：
line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);
網(wǎng)上有些文章會(huì)寫成line.stroke=color，或者line.setProperty('stroke',color)這樣的形式粱快，都是不能生效的吉捶，可能是早期版本的表達(dá)方式。
?Image
Image跟其他形狀類似皆尔，都是Object的子類呐舔，最大的區(qū)別在于，圖像文件的加載是異步的慷蠕，所以對(duì)Image的后續(xù)操作珊拼，都要在回調(diào)中完成。
var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
? ? canvas.add(img);
}
