ブログ

jcanvasでポリゴンを入力するサンプル

今回は、HTML5のCanvas+jcanvasライブラリを使って、ポリゴンを入力するサンプルを作成しました。

ポリゴンの構成点をクリックし、最後の点でダブルクリックすると、ポリゴンを表示して、入力を終了します。

ポリゴン入力中は、前の構成点からマウスの座標まで、入力をガイドするラインを表示しています。

ポリゴン入力中

サンプルのソースコードです。(jcanvas2.html)

jQueryと、jcanvasライブラリをダウンロードしてjsフォルダに格納してください。

<!DOCTYPE html>
<html>
<head>
</head>
<title>jCanvas TEST</title>
<script type="text/javascript" src="js/jQuery/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jcanvas.min.js"></script>
<script>
$(function(){
	$.jCanvas.defaults.fromCenter = false;
	$.jCanvas.defaults.layer = true;
	
	var inputMode = true;
	var points = new Array();
	var rx1, ry1;
	var rx2, ry2;
	
	var c = $("#canvas1");
	
	c.on("mousedown", function(e) {
		if(points.length == 0 && inputMode) {
			rx1 = e.clientX;
			ry1 = e.clientY;
			
			var p = new Object();
			p.x = rx1;
			p.y = ry1;
			points.push(p);
		} else if(points.length >= 1 && inputMode) {
			
			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : rx1,
				y1 : ry1,
				x2 : rx2,
				y2 : ry2,
				name : "rb" + points.length
			});
			
			rx1 = e.clientX;
			ry1 = e.clientY;
			
			var p = new Object();
			p.x = rx1;
			p.y = ry1;
			points.push(p);
		}
	});
	
	c.on("mouseup", function(e) {
		console.log("mouseup");
	});
	
	c.on("mousemove", function(e) {
		console.log("mousemove " + e.clientX + "," + e.clientY);
		
		if(points.length >= 1 && inputMode) {
			rx2 = e.clientX;
			ry2 = e.clientY;
			
			c.removeLayer("rb");
			c.drawLayers();
			
			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : rx1,
				y1 : ry1,
				x2 : rx2,
				y2 : ry2,
				name : "rb"
			});
		}
	});
	
	c.on("dblclick", function(e) {
		console.log("dblclick " + e.clientX + "," + e.clientY);
		
		if(points.length >= 3) {
			
			var endp = points[0];
			
			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : rx1,
				y1 : ry1,
				x2 : endp.x,
				y2 : endp.y,
				name : "rb" + points.length
			});
			
			inputMode = false;
		}
	});
})
</script>
</head>
<body>
<canvas id="canvas1" width="800" height="800"></canvas>
</body>
</html>

 

今回は以上になります。次回は、入力したポリゴンを選択して、「jcanvasでポリゴンの頂点をドラッグ移動するサンプル」を参考にポリゴンを移動できるようにしたいと思います。

 

関連記事

  1. PyCharmのWindows環境へのインストール
  2. jcanvasでポリゴンの頂点をドラッグ移動するサンプル
  3. JSON Serverとngrokで、RESTサーバのモックアッ…
  4. サーバアプリケーション(Java)からGoogleカレンダーにア…
  5. jcanvasでポリゴンを入力し、ポリゴンの頂点をドラッグ移動す…

最新ブログ記事

PAGE TOP