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

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

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

Canvas

canvas は、 タグ用にカプセル化されており、内部的に描画されるすべてのオブジェクトを管理できます。
このキャンバス オブジェクトは DOM の要素ではありません。DOM または対応するコンテキストを制御する必要がある場合は、自分で取得する必要があります。

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 つのオプションの値があります。

その概略図は次のとおりです:

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);
}

関連する推奨事項:

plotly.js プロットライブラリの使用方法

VML ドローイングパッド ④ 簡略化されたサーバー側 --server.php、server.asp

以上がファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。