国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

paney129 / 824人閱讀

摘要：使用一段時間了，總得來說，是一款非常強大的矢量圖工具，官方文檔也算豐富，但文檔組織形式不太好，而且少部分設計不太一致，還是需要整理一下。是最基礎的對象，針對標簽做的封裝，可以管理內部繪制的所有對象。

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

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。

它們的示意圖如下：
image
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);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108281.html

相關文章

  • fabricjs上手指南

    摘要：可以對每一個對象使用動畫，克隆，修改屬性，事件監聽，碰撞檢測等。修改屬性需及時渲染才能展示出效果。每次更改了對象的位置，大小時比如，，若要感知該對象的具體位置用于對象間碰撞邊緣檢測，或事件響應，需要使用方法重設對象的四個角坐標。 fabricjs是一個canvas的庫，原本canvas的操作主要基于上下文，需要使用者自己從0開始去實現一些基本功能。而canvas庫文件封裝好了許多便利的...

    張遷 評論0 收藏0

  • Canvas實用庫Fabric.js使用手冊

    摘要：為提供所缺少的對象模型交互和一整套其他不可或缺的工具。為什么要使用提供一個好的畫布能力但是不夠友好。就是為此而開發，它主要就是用對象的方式去編寫代碼。代表線，的意思是使用鋼筆畫一條線，從坐標畫到坐標。代表讓圖形閉合路徑。 簡介 什么是Fabric.js? Fabric.js是一個可以簡化Canvas程序編寫的庫。 Fabric.js為Canvas提供所缺少的對象模型, svg pars...

    XGBCCC 評論0 收藏0

  • turnjs fabricjs canvas 翻書

    摘要：最近做了一個翻書效果的項目來總結一下實現過程和遇到的一些問題供自己以后快速解決問題希望也能幫到同樣遇到此類問題的同學如果有更好的方法希望你能分享給我地址插件問題都是些自己覺的比較難解決的比較片面如有其他疑問可以留言交流或者當你從官網下載 最近做了一個翻書效果的項目, 來總結一下實現過程和遇到的一些問題, 供自己以后快速解決問題, 希望也能幫到同樣遇到此類問題的同學, 如果有更好的方法,...

    mylxsw 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<