ホームページ > 記事 > ウェブフロントエンド > ファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）
ファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）
- 不言オリジナル
- 2018-08-17 11:44:463646ブラウズ
この記事では、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 つのオプションの値があります。
その概略図は次のとおりです:
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);
}
関連する推奨事項:
VML ドローイングパッド ④ 簡略化されたサーバー側 --server.php、server.asp
以上がファブリックjsとは何ですか? Fabricjs フロントエンド描画ライブラリの利用整理（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。