ブログ

jcanvasでポリゴンの頂点をドラッグ移動するサンプル

HTML5のCanvasを使って、ポリゴンの頂点をドラッグ移動するサンプルを作成しました。

Canvasをラップするライブラリとして、「jcanvas」を利用してみました。

以下がサンプルプログラムです。

jcanvas_sample.html


<!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 psize = 4;		// ポイントのサイズ
	
	var ix1 = 100, iy1 = 100;
	var ix2 = 200, iy2 = 100;
	var ix3 = 200, iy3 = 200;
	var ix4 = 100, iy4 = 200;
	
	var x1 = ix1, y1 = iy1;
	var x2 = ix2, y2 = iy2;
	var x3 = ix3, y3 = iy3;
	var x4 = ix4, y4 = iy4;
	
	var c = $("#canvas1");
	
	drawArea();
	drawPoints();
	
	function onDrag(layer) {
	    
	    var area = c.getLayer("area-1");
	    var point1 = c.getLayer("point-1");
	    var point2 = c.getLayer("point-2");
	    var point3 = c.getLayer("point-3");
	    var point4 = c.getLayer("point-4");
	    
	    x1 = ix1 + area.x + point1.x;
	    y1 = iy1 + area.y + point1.y;
	    x2 = ix2 + area.x + point2.x;
	    y2 = iy2 + area.y + point2.y;
	    x3 = ix3 + area.x + point3.x;
	    y3 = iy3 + area.y + point3.y;
	    x4 = ix4 + area.x + point4.x;
	    y4 = iy4 + area.y + point4.y;
	    
	    c.removeLayer("point-1");
	    c.removeLayer("point-2");
	    c.removeLayer("point-3");
	    c.removeLayer("point-4");
	    drawPoints();
	    
	}
	
	function onDragStop(layer) {
	}
	
	function drawArea() {
		c.drawLine({
			  strokeStyle: "black",
			  strokeWidth: 1,
			  x1: x1, y1:y1,
			  x2: x2, y2:y2,
			  x3: x3, y3:y3,
			  x4: x4, y4:y4,
			  closed: true,
			  draggable: true,
			  drag: onDrag,
			  dragstop: onDragStop,
			  name: "area-1"
			});
	}
	
	function drawPoints() {

	c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : x1 - psize,
				y1 : y1 - psize,
				x2 : x1 + psize,
				y2 : y1 - psize,
				x3 : x1 + psize,
				y3 : y1 + psize,
				x4 : x1 - psize,
				y4 : y1 + psize,
				closed : true,
				draggable : true,
				drag : onDrag1,
				dragstart : onDragStart1,
				dragstop : onDragStop1,
				name : "point-1"
			});

			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : x2 - psize,
				y1 : y2 - psize,
				x2 : x2 + psize,
				y2 : y2 - psize,
				x3 : x2 + psize,
				y3 : y2 + psize,
				x4 : x2 - psize,
				y4 : y2 + psize,
				closed : true,
				draggable : true,
				drag : onDrag2,
				dragstart : onDragStart2,
				dragstop : onDragStop2,
				name : "point-2"
			});

			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : x3 - psize,
				y1 : y3 - psize,
				x2 : x3 + psize,
				y2 : y3 - psize,
				x3 : x3 + psize,
				y3 : y3 + psize,
				x4 : x3 - psize,
				y4 : y3 + psize,
				closed : true,
				draggable : true,
				drag : onDrag3,
				dragstart : onDragStart3,
				dragstop : onDragStop3,
				name : "point-3"
			});

			c.drawLine({
				strokeStyle : "red",
				strokeWidth : 1,
				x1 : x4 - psize,
				y1 : y4 - psize,
				x2 : x4 + psize,
				y2 : y4 - psize,
				x3 : x4 + psize,
				y3 : y4 + psize,
				x4 : x4 - psize,
				y4 : y4 + psize,
				closed : true,
				draggable : true,
				drag : onDrag4,
				dragstart : onDragStart4,
				dragstop : onDragStop4,
				name : "point-4"
			});
		}

		function onDrag1(layer) {

			var area = c.getLayer("area-1");
			var point1 = c.getLayer("point-1");

			x1 = ix1 + area.x + point1.x;
			y1 = iy1 + area.y + point1.y;

			c.removeLayer("area-1");
			drawArea();
		}

		function initAreaCoords() {
			ix1 = x1;
			iy1 = y1;
			ix2 = x2;
			iy2 = y2;
			ix3 = x3;
			iy3 = y3;
			ix4 = x4;
			iy4 = y4;
		}

		function onDragStart1(layer) {
			initAreaCoords();
		}

		function onDragStop1(layer) {
			initAreaCoords();
		}

		function onDrag2(layer) {
			var area = c.getLayer("area-1");
			var point2 = c.getLayer("point-2");

			x2 = ix2 + area.x + point2.x;
			y2 = iy2 + area.y + point2.y;

			c.removeLayer("area-1");
			drawArea();
		}

		function onDragStart2(layer) {
			initAreaCoords();
		}

		function onDragStop2(layer) {
			initAreaCoords();
		}

		function onDrag3(layer) {
			var area = c.getLayer("area-1");
			var point3 = c.getLayer("point-3");

			x3 = ix3 + area.x + point3.x;
			y3 = iy3 + area.y + point3.y;

			c.removeLayer("area-1");
			drawArea();
		}

		function onDragStart3(layer) {
			initAreaCoords();
		}

		function onDragStop3(layer) {
			initAreaCoords();
		}

		function onDrag4(layer) {
			var area = c.getLayer("area-1");
			var point4 = c.getLayer("point-4");

			x4 = ix4 + area.x + point4.x;
			y4 = iy4 + area.y + point4.y;

			c.removeLayer("area-1");
			drawArea();
		}

		function onDragStart4(layer) {
			initAreaCoords();
		}

		function onDragStop4(layer) {
			initAreaCoords();
		}

	})
</script>
</head>
<body>
<canvas id="canvas1" width="800" height="800"></canvas>
</body>
</html>

上記サンプルを実行した結果です。

ポイントマーカー(赤色の正方形)を表示するのに最初drawRect()を使っていたのですが、ドラッグイベントの座標値がうまくとれなかったので、今回はdrawLine()を使っています。

この次は、ポリゴンを作成するプログラムを作りたいのですが、今回はここまでになります。

(参考)

https://qiita.com/yoichiro6642/items/177dde1fd7172ae241b3

 

関連記事

  1. jcanvasでポリゴンを入力するサンプル
  2. jcanvasでポリゴンを入力し、ポリゴンの頂点をドラッグ移動す…

最新ブログ記事

PAGE TOP