ファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）-jsチュートリアル-php.cn

ファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）

不言

リリース： 2018-08-17 11:44:46

オリジナル

3725 人が閲覧しました

この記事では、fabricjs とは何ですか? Fabricjs フロントエンド描画ライブラリの使用法 (コード付き) は、必要な友人が参考になれば幸いです。

私はしばらくこれを使用してきましたが、一般的に言えば、これは非常に強力なベクター描画ツールです。公式ドキュメントも非常に充実していますが、ドキュメントの構成はあまり良くなく、いくつかの API 設計には一貫性がなく、まだ必要があります。整理されること。

Canvas

canvas は、

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

ログイン後にコピー

新しいキャンバスオブジェクトを作成するときに、幅と高さを指定できます:

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

ログイン後にコピー

ここで指定した幅と高さは、CSS で設定した幅と高さをオーバーライドします。このオブジェクト作成形式は基本的に Fabric.js と同様であり、クラス名は作成するオブジェクトのタイプを示し、2 番目のパラメーターはさまざまなオプションを示します。

オブジェクトの追加と削除、オブジェクトパラメータの変更を含むキャンバスへのすべての変更は、表示されるレンダリングメソッドを呼び出す必要があります:

canvas.renderAll();

ログイン後にコピー

基本的な図形

線、円、円、長方形幾何学図形はすべて基本です形。

すべての基本的な図形には対応するクラスがあるため、その位置、色、サイズ、その他のスタイルはクラスインスタンスのプロパティとメソッドを通じて制御できます。すべてのクラスは Object クラスから継承し、いくつかのパブリックプロパティとメソッドを持っています。

作成

以下は、線を描く例です (2 つの頂点座標が指定された場合):

        var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //线宽
            stroke: rgba(255,0,0,0.8), //线的颜色
            selectable: false
        });
        canvas.add(line);

ログイン後にコピー

円を描く例 (頂点と半径はオプションにあります)。ここで、左と上は実際には ( 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);

ログイン後にコピー

ここから、最初のパラメータはこのクラスに固有のもの (直線を描くときに渡される始点と終点の座標など) であり、2 番目のパラメータは一般的なオプションであることがわかります。特別なパラメータがない場合、最初のパラメータは直接一般オプションになります。作成されたすべてのシェイプは、canvas の add メソッドを通じてシーンに追加された場合にのみ表示できます。

Control

は、グラフ内のどの点の座標を参照するかについては、テキスト編集ソフトウェアの位置合わせに相当します。 . 、originX には left、center、right の 3 つのオプションの値があり、originY にも、top、center、bottom の 3 つのオプションの値があります。

その概略図は次のとおりです:
ファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）
http://fabricjs.com/test/misc...

各オブジェクトのデフォルトの原点を中心にしたい場合は、次のように設定できます。

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

ログイン後にコピー

幅と高さも使用可能直接アクセスプロパティは、名前が示すように、長さと幅を表します (すべての図形には境界四角形があるため、長さと幅を使用してサイズを制御できます)。

直接アクセスできる上記の属性を除き、ほとんどの属性は、次のような get/set メソッドを使用して読み書きする必要があります。

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

ログイン後にコピー

インターネット上の一部の記事では、line.ストローク=カラー、またはラインと記述されます。 setProperty('ストローク' ,color) などの形式は無効であり、以前のバージョンの式である可能性があります。

Image

Image は他のシェイプと似ており、Object のサブクラスです。最大の違いは、画像ファイルの読み込みが非同期であるため、Image に対する後続の操作はコールバックで完了する必要があることです。

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

ログイン後にコピー