HTML5のCanvasを使ってやりたい事があったので、
本日はjQueryのプラグイン「jCanvas」を試してみました。
取りあえず、
今回はjCanvasを試してみたかっただけなので、
不動産の「間取り図」を描いてみることにしました。
まず、
jQueryのライブラリー本体とjCanvasを読み込みます。
今回はCDNにホストされているURLから読み込むことにしたので、
以下の2行を<head>～</head>内に追加するだけです。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
もし、
ライブラリーを自分のサーバにアップして読み込む場合には、
https://projects.calebevans.me/jcanvas/downloads/
からダウンロードして下さい。
読み込みの設定が完了したら、
以下の順番でコードを書いていきます。
①、drawRectで長方形を描く
↓
②、drawLineで線を描く
↓
③、drawTextで文字を書く
コードは以下の様になります。
【①、drawRectで長方形を描く】
$("canvas").drawRect({
strokeStyle:"black",
strokeWidth:1,
fillStyle:"#ffffff", //図形を白色で塗りつぶす
x:75,
y:100,
width:150,
height:200
});
【②、drawLineで線を描く】
$("canvas").drawLine({
strokeStyle:"black",
strokeWidth:1,
x1:0,
y1:150,
x2:100,
y2:150
});
※このdrawLineを複数回使って線を引いていきます。
【③、drawTextで文字を書く】
$("canvas").drawText({ //テキストを表示
fillStyle:"black",
strokeStyle:"black",
strokeWidth:"0.3",
x:75,
y:100,
fontSize:20,
fontFamily:"sans-serif",
text:"和室6帖"
});
HTMLも含めてコードをまとめると、
以下の様になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>図面サンプル</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
</head>
<body>
<canvas width="150" height="200" style="margin:0px;padding:0px;"></canvas>
<script>
$("canvas").drawRect({ //長方形を描画
strokeStyle:"black",
strokeWidth:1,
fillStyle:"#ffffff", //図形を白色で塗りつぶす
x:75,
y:100,
width:150,
height:200
}).drawLine({ //横線を描画
strokeStyle:"black",
strokeWidth:1,
x1:0,
y1:50,
x2:100,
y2:50
}).drawLine({ //横線を描画
strokeStyle:"black",
strokeWidth:1,
x1:0,
y1:150,
x2:100,
y2:150
}).drawLine({ //横線を描画
strokeStyle:"black",
strokeWidth:1,
x1:100,
y1:100,
x2:150,
y2:100
}).drawLine({ //縦線を描画
strokeStyle:"black",
strokeWidth:1,
x1:50,
y1:50,
x2:50,
y2:150
}).drawLine({ //縦線を描画
strokeStyle:"black",
strokeWidth:1,
x1:100,
y1:0,
x2:100,
y2:200
}).drawText({ //テキストを表示
fillStyle:"black",
strokeStyle:"black",
strokeWidth:"0.3",
x:75,
y:100,
fontSize:20,
fontFamily:"sans-serif",
text:"和室6帖"
});
</script>
</body>
</html>
これで、
以下の様な間取り図が描けます。
今回はここまでですが、
この後は、
この間取り図をダウンロードできる仕組みの作成と、
間取り図自体をブラウザ上で誰でも自由に描けるような方法を探す予定です。
