nkimraの日記

技術的なメモのブログ。

Fabric.jsで遊んでみた

JavaScript

前回ドラッグ＆ドロップを調べた際にFabric.jsというCanvas用のライブラリの存在を知ったので、今回試しに使ってみた。

入手先
GitHubのdist/fabric.min.jsをダウンロードする。

丸い円を描いてみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8"/>
<title>fabric test</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<script src="fabric.min.js"></script>
<script>
    var c = new fabric.Canvas('canvas');
    var circle = new fabric.Circle({
        left: 50,
        top: 50,
        fill: 'red',
        radius: 30
    });
    c.add(circle);　
</script>
</body>
</html>

ブラウザで表示し、赤丸がドラッグ＆ドロップできることを確認する。
f:id:nkimra:20150722232847j:plain

なお、テキストも同じように加工することができる。

<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8"/>
<title>fabric test</title>
<link href='http://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<script src="fabric.min.js"></script>
<script>
    var c = new fabric.Canvas('canvas');
    var text = new fabric.IText("Hello world !", {
        fontFamily: "Fredoka One",
        top: 100,
        left: 100,
        fontSize: 20
    });
    c.add(text);
    c.renderAll;
</script>
</body>
</html>

Webフォントがすぐに反映されないのはなんでだろう。。。調査中。
f:id:nkimra:20150723001806j:plain

2015/7/23追記
Webフォントの問題の解決策を追記