首頁 > 文章 > web前端 > fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼）

fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼）

不言原創: 2018-08-17 11:44:463646瀏覽

本篇文章帶給大家的內容是關於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。

它們的示意圖如下：
fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼）
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);
}

fabricjs是什麼？ fabricjs前端繪圖庫用法整理（附程式碼）

相關文章