2018.08.24

jQueryのプラグイン「jCanvas」で間取図を作成

HTML5のCanvasを使ってやりたい事があったので、

本日はjQueryのプラグイン「jCanvas」を試してみました。

取りあえず、

今回はjCanvasを試してみたかっただけなので、

不動産の「間取り図」を描いてみることにしました。

まず、

jQueryのライブラリー本体とjCanvasを読み込みます。

今回はCDNにホストされているURLから読み込むことにしたので、

以下の2行を<head>～</head>内に追加するだけです。

もし、

ライブラリーを自分のサーバにアップして読み込む場合には、

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>