編集履歴

質問編集履歴

あふぁふぁ

2016/08/13 09:34

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -166,9 +166,9 @@
 ###追記 - 改良してみました(2016-08-13 18:33)
-[http://codepen.io/anon/pen/BzrzOb
+[http://codepen.io/anon/pen/RRvogR
-](http://codepen.io/anon/pen/BzrzOb)
+](http://codepen.io/anon/pen/RRvogR)
 ひとまずMVCに分割出来ていますでしょうか？

サークルの管理クラスを導入

2016/08/13 09:34

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -164,7 +164,7 @@
-###追記 - 改良してみました(2016-08-13 16:42)
+###追記 - 改良してみました(2016-08-13 18:33)
 [http://codepen.io/anon/pen/BzrzOb
@@ -176,9 +176,13 @@
 ```JavaScript
+//コントローラークラス
-function ViewController(canvasElement) {
+function ViewController(canvasElement, circleList) {
+	var circleList = circleList;
 	var canvas = canvasElement;
@@ -190,17 +194,27 @@
 	}
-	var circle = new Circle(20, 20, 20);
+	circleList.add(new Circle(20, 20, 20));
+	circleList.add(new Circle(60, 60, 20));
+	circleList.getList().forEach(function(circle) {
-	canvasView.drawCircle(circle.getPosition(), circle.getRadius());
+		canvasView.drawCircle(circle.getPosition(), circle.getRadius());
+	})
 	canvas.addEventListener("mousedown", function(event) {
-		var isPointInCircle = circle.hitTest(event.offsetX, event.offsetY);
+		var isTouchedPointOnCircle = circle.hitTest(event.offsetX, event.offsetY);
@@ -246,6 +260,10 @@
+//ビュークラス
 function CanvasView(context) {
 	var context = context;
@@ -258,17 +276,53 @@
 		context.arc(position.x, position.y, radius, 0, Math.PI*2, false);
-		context.stroke();
+		context.fill();
-	}
+	}
-}
+}
+// circleの管理クラス
+function CircleList() {
+	var list = [];
+	this.add = function(circle) {
+		list.push(circle);
+	}
+  	this.getList = function() {
+		return list;
+  	}
+}
+// circleのモデルクラス
 function Circle(x, y, radius) {
@@ -308,21 +362,15 @@
-}
+}
-var controller = new ViewController(document.getElementById("canvas"));
+var controller = new ViewController(document.getElementById("canvas"), new CircleList());
 ```
@@ -330,10 +378,6 @@
 ###今後実装予定の処理
-- 複数のサークルの描画
-- 複数のサークルを保持するクラスの導入
 - サークル同士のヒット判定
 - サークルとマウスダウン座標とのヒット判定

追記キング

2016/08/13 09:34

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -174,7 +174,161 @@
+```JavaScript
+function ViewController(canvasElement) {
+	var canvas = canvasElement;
+	var canvasView = new CanvasView(canvas.getContext("2d"));
+	var stateMap = {
+		isDragging: false
+	}
+	var circle = new Circle(20, 20, 20);
+	canvasView.drawCircle(circle.getPosition(), circle.getRadius());
+	canvas.addEventListener("mousedown", function(event) {
+		var isPointInCircle = circle.hitTest(event.offsetX, event.offsetY);
+		if (isPointInCircle === true) {
+			stateMap.isDragging = true;
+			console.log("ドラッグを開始");
+		}
+	});
+	canvas.addEventListener("mousemove", function(event) {
+		if (stateMap.isDragging === true) {
+			console.log("ドラッグ中");
+		}
+	});
+	canvas.addEventListener("mouseup", function(event) {
+		stateMap.isDragging = false;
+		console.log("ドラッグ終了");
+	});
+}
+function CanvasView(context) {
+	var context = context;
+	this.drawCircle = function(position, radius) {
+		context.beginPath();
+		context.arc(position.x, position.y, radius, 0, Math.PI*2, false);
+		context.stroke();
+	}
+}
+function Circle(x, y, radius) {
+	var x = x + radius;
+	var y = y + radius;
+	var radius = radius;
+	this.getPosition = function() {
+		return {x: x, y: y};
+	}
+	this.getRadius = function() {
+		return radius;
+	}
+	this.hitTest = function(x, y) {
+		console.log("ヒット判定の実装をする");
+		return true;
+	}
+}
+var controller = new ViewController(document.getElementById("canvas"));
+```
-これから実装予定の処理としては以下があります。
+###今後実装予定の処理
 - 複数のサークルの描画
@@ -186,161 +340,9 @@
 - 複数のサークルのドラッグ&ドロップに対応
-```JavaScript
-function ViewController(canvasElement) {
-	var canvas = canvasElement;
-	var canvasView = new CanvasView(canvas.getContext("2d"));
-	var stateMap = {
-		isDragging: false
-	}
-	var circle = new Circle(20, 20, 20);
-	canvasView.drawCircle(circle.getPosition(), circle.getRadius());
-	canvas.addEventListener("mousedown", function(event) {
-		var isPointInCircle = circle.hitTest(event.offsetX, event.offsetY);
-		if (isPointInCircle === true) {
+- サークルの上でクリックをするとサークルが選択状態になる
-			stateMap.isDragging = true;
-			console.log("ドラッグを開始");
-		}
-	});
-	canvas.addEventListener("mousemove", function(event) {
-		if (stateMap.isDragging === true) {
-			console.log("ドラッグ中");
-		}
-	});
-	canvas.addEventListener("mouseup", function(event) {
-		stateMap.isDragging = false;
-		console.log("ドラッグ終了");
-	});
-}
-function CanvasView(context) {
-	var context = context;
-	this.drawCircle = function(position, radius) {
+- サークルが選択状態の時にサークルを囲う矩形をドラッグすると、サークルが拡大縮小される
-		context.beginPath();
-		context.arc(position.x, position.y, radius, 0, Math.PI*2, false);
-		context.stroke();
-	}
-}
-function Circle(x, y, radius) {
-	var x = x + radius;
-	var y = y + radius;
-	var radius = radius;
-	this.getPosition = function() {
-		return {x: x, y: y};
-	}
-	this.getRadius = function() {
-		return radius;
-	}
-	this.hitTest = function(x, y) {
-		console.log("ヒット判定の実装をする");
-		return true;
-	}
-}
-var controller = new ViewController(document.getElementById("canvas"));
-```

追記

2016/08/13 07:57

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -170,6 +170,24 @@
 ](http://codepen.io/anon/pen/BzrzOb)
+ひとまずMVCに分割出来ていますでしょうか？
+これから実装予定の処理としては以下があります。
+- 複数のサークルの描画
+- 複数のサークルを保持するクラスの導入
+- サークル同士のヒット判定
+- サークルとマウスダウン座標とのヒット判定
+- 複数のサークルのドラッグ&ドロップに対応
 ```JavaScript
 function ViewController(canvasElement) {

改良コードを追記

2016/08/13 07:48

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -164,6 +164,168 @@
+###追記 - 改良してみました(2016-08-13 16:42)
+[http://codepen.io/anon/pen/BzrzOb
+](http://codepen.io/anon/pen/BzrzOb)
+```JavaScript
+function ViewController(canvasElement) {
+	var canvas = canvasElement;
+	var canvasView = new CanvasView(canvas.getContext("2d"));
+	var stateMap = {
+		isDragging: false
+	}
+	var circle = new Circle(20, 20, 20);
+	canvasView.drawCircle(circle.getPosition(), circle.getRadius());
+	canvas.addEventListener("mousedown", function(event) {
+		var isPointInCircle = circle.hitTest(event.offsetX, event.offsetY);
+		if (isPointInCircle === true) {
+			stateMap.isDragging = true;
+			console.log("ドラッグを開始");
+		}
+	});
+	canvas.addEventListener("mousemove", function(event) {
+		if (stateMap.isDragging === true) {
+			console.log("ドラッグ中");
+		}
+	});
+	canvas.addEventListener("mouseup", function(event) {
+		stateMap.isDragging = false;
+		console.log("ドラッグ終了");
+	});
+}
+function CanvasView(context) {
+	var context = context;
+	this.drawCircle = function(position, radius) {
+		context.beginPath();
+		context.arc(position.x, position.y, radius, 0, Math.PI*2, false);
+		context.stroke();
+	}
+}
+function Circle(x, y, radius) {
+	var x = x + radius;
+	var y = y + radius;
+	var radius = radius;
+	this.getPosition = function() {
+		return {x: x, y: y};
+	}
+	this.getRadius = function() {
+		return radius;
+	}
+	this.hitTest = function(x, y) {
+		console.log("ヒット判定の実装をする");
+		return true;
+	}
+}
+var controller = new ViewController(document.getElementById("canvas"));
+```
 ###補足事項
 下記のサイトでも質問を投稿しております。

リファクタリングのタグを追加

2016/08/13 07:45

投稿

canvas

スコア62

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes