Question

所附的代码显示了如何选择（单击）画布上的绘制对象，然后双击移动对象以单击位置，或在移动之前/之后通过双击取消选择对象。

我已经尝试了好几天，但是无法弄清楚如何通过循环（通过类构造函数+原型设计）将此函数应用于类或数组中的所有对象。我希望能够选择或取消选择屏幕上的任何对象。

我们将非常感谢您的帮助。谢谢。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	canvas {
		display: block;
		margin: 0px;
	}
	body {
		margin: 0px;
	}    	
</style>

</head>
<body>
<canvas id="canvas"></canvas>
<input id="click1" type ="button" value="x" style="position: fixed; top: 0px; left: 650px; position: absolute;"></input>
<input id="click2" type ="button" value="y" style="position: fixed; top: 0px; left: 750px; position: absolute;"></input>
<script>
window.onload = function(){
	var canvas = document.getElementById("canvas");
		context = canvas.getContext("2d");
		width = canvas.width = window.innerWidth;
		height = canvas.height = window.innerHeight;

		let strokeColor;
		let color;
		let mouse_x;
		let mouse_y;
		let x;
		let y;
		let w;
		let h;
		let selected = false;
		x = 50;
		y = 50;
		w = 50;
		h = 50;
		color="green";
		strokeColor = "green";
  		
		document.getElementById('canvas').addEventListener("mousemove",go);
		
		document.getElementById('canvas').addEventListener("mouseup",mouseUp);
		
		document.getElementById('canvas').addEventListener("dblclick",dblClick);
		
		document.getElementById('canvas').addEventListener("dblclick",move);
		
		function move(){
			
			if(selected == true){
			x = mouse_x;
			y = mouse_y;
			
			}
		}
		
		function mouseUp(){
			
			if(mouse_x > x && mouse_x < x+w && mouse_y > y && mouse_y < y+w){
			strokeColor = "black";
			selected = true;
			console.log(selected);
			}
			
		}
			
		function dblClick(){
			
			if(mouse_x > x && mouse_x < x+w && mouse_y > y && mouse_y < y+w){
			color = "green";
			strokeColor = color;
			selected = false;
			console.log(selected);
			}
		}	
		
		function go(e){
			
			mouse_x = e.clientX;
			mouse_y = e.clientY;
			document.getElementById('click1').value = mouse_x;
			document.getElementById('click2').value = mouse_y;
			
		}		

		function draw(){
			context.strokeStyle = strokeColor;;
			context.fillStyle = color;
			context.beginPath();
			context.lineWidth = 3;
			context.rect(x,y,w,h);
			context.fill();
			context.stroke();			
		}
				
		function animate(){
			
			context.clearRect(0,0,width,height);
			context.save();
			draw();
			context.restore();
			requestAnimationFrame(animate);
						
		}
			
		animate();
				
};
</script>

</body>
</html>

Answer 1

这应该很容易做到，让我们先谈谈我们需要的逻辑。

列出了我们可以绘制的物品。
使这些项目具有自己的状态。
检查当我们单击时是否命中了一个项目。
移动或切换所选项目。
处理画布的清除和绘制。

制作这个简单的小提琴只是为了向您展示其背后的想法，

let context = $("canvas")[0].getContext("2d");
let elements = [
	new element(20, 20, 20, 20, "green"),
	new element(45, 30, 30, 30, "red"),
	new element(80, 40, 50, 50, "blue"),
];
let mousePosition = {
	x: 0,
	y: 0,
};
let selected;

function element(x, y, height, width, color) {
	this.x = x;
	this.y = y;
	this.height = height;
	this.width = width;
	this.color = color;
	this.selected = false;

	this.draw = function(context) {
		context.strokeStyle = (this.selected ? "black" : "white");
		context.fillStyle = this.color;
		context.beginPath();
		context.lineWidth = 2;
		context.rect(this.x, this.y, this.height, this.width);
		context.fill();
		context.stroke();
	}
	
	this.move = function(x, y) {
		this.x = x;
		this.y = y;
	}
}

//Select Function
function get_select(x, y) {
	let found;

	$.each(elements, (i, element) => {
		if(x > element.x
		&& x < element.x + element.width
		&& y > element.y
		&& y < element.y + element.height) {
			found = element;
		}
	});
	return (found);
}

// Handle selection & Movement.
$("canvas").click(function() {
	let found = get_select(mousePosition.x, mousePosition.y);

	Clear();
	// Toggle Selection
	if (found && !selected) {
		found.selected = true;
		selected = found;
	} else if (found === selected) {
		found.selected = false;
		selected = null;
	}

	// Move
	if (!found && selected) {
		selected.move(mousePosition.x, mousePosition.y);
	}
	Draw();
});

// Record mouse position.
$("canvas").mousemove((event) => {
	mousePosition.x = event.pageX;
	mousePosition.y = event.pageY;
});

//Draw ALL elements.
function Draw() {
	$.each(elements, (i, element) => {
		element.draw(context);
	});
}

function Clear() {
	context.clearRect(0, 0, $("canvas")[0].width, $("canvas")[0].height);
}

// Start.
$(document).ready(() => {
	Draw();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<body>
		<canvas></canvas>
	</body>
</html>

希望它可以帮助您！

选择和取消选择画布上的绘制对象，然后移至鼠标X和Y

1 个答案: