fabricjs チュートリアル
fabricjsの使い方
サーチ…
備考
fabric.jsはHTML5キャンバス用の強力で非常にシンプルなJavaScriptライブラリです。これは、HTML5キャンバスで動作するインタラクティブなプラットフォームを提供します。ファブリックを使用すると、単純な幾何学的形状から複雑な形状にキャンバス上のオブジェクト/図形を作成できます。 fabric.jsを使用して画像を操作することもできます。 fabric.jsはアニメーションもサポートしています。それは、それらを回転させるようにスケーリングして、それらをドラッグするような画像を操作するためのコントロールを提供します。それは一緒に操作することができる図形/オブジェクトのグループ化を可能にします。キャンバス要素だけでなくオブジェクトもサポートしています。それは機能を備えていて、キャンバスをSVGまたはJSONにシリアル化し、必要に応じて再利用することさえできます。 jsdomとノードキャンバスライブラリの助けを借りて、Node.jsの下で実行中のファブリックをサポートします。
インストールまたはセットアップ
Fabric.jsはキャンバスに固有の他のJSライブラリとまったく同じです。簡単にセットアップして始めましょう。すべてを行う必要があるからfabric.jsをダウンロードでHERE 、ちょうど例えば、他のJSライブラリあなたはjQueryのためにそれを行う方法のようなプロジェクトにそれを含めます。次に、htmlファイルを作成し、index.htmlのようにします。
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
スクリプト内のsrc属性は、同じフォルダに保存されているファイルfabric.jsを参照しています。他のフォルダに保存して相対パスを与えることができます。そして、あなたは行くのが良いです。 Fabric訪問のOfficalページの詳細については、こちらをご覧ください 。ここでは非常に基本的なデモです
こんにちは世界
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
この例では、fabricjを使用して'Hello world From Fabric JS'というテキストを作成します。 デモ