本篇文章帶給大家的內容是關於fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
已經使用一段時間了，總得來說，是一款非常強大的向量圖工具，官方文檔也算豐富，但文檔組織形式不太好，而且少部分api設計不太一致，還是需要整理一下。
Canvas
canvas是最基礎的對象，針對
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);
}相關推薦：
VML繪圖板④簡化的伺服器端- -server.php、server.asp
以上是fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
