Выделение и отмена выбора нарисованных объектов на холсте и перемещение мыши X и Y

1

Приложенный код показывает, как выбрать (щелкнуть) рисованный объект на холсте, а затем объект перемещается с двойным щелчком мыши, чтобы щелкнуть позицию или отменить выбор с помощью двойного щелчка до/после перемещения.

Я пробовал в течение нескольких дней, но не мог понять, как применить эту функцию ко всем объектам в классе или массиве с помощью цикла (через конструктор классов + прототипирование). Я хотел бы иметь возможность выбирать или отменить выбор любого объекта на экране.

Помощь будет очень оценена. Спасибо.

<!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>
Теги:
canvas
constructor
prototype

1 ответ

0

Это должно быть легко сделать, позвольте сначала поговорить о логике, которая нам нужна.

  1. Имейте список предметов, которые мы можем нарисовать.
  2. Сделать эти предметы имеют собственное состояние.
  3. Убедитесь, что, когда мы нажимаем, мы нажимаем на элемент или нет.
  4. Перемещение или переключение выбранного элемента.
  5. Ручка Clear & Draw из холста.

Сделал эту простую скрипку, чтобы показать вам идею, стоящую за ней,

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>

Надеюсь, это поможет вам!

Поделиться
  • 0
    Спасибо, Лео. Что вы использовали вместе с чистым Javascript? Я вижу какой-то библиотечный скрипт. Я еще не коснулся библиотек. В моем коде я также хотел реализовать выделение (или отмена выделения) и перемещение столько объектов, сколько я хотел, к одной позиции щелчка. Хотя какой-то код очень понятен для меня, другие части займут у меня некоторое время, чтобы переварить. Мне нравится логика выбора и поиска. Еще раз спасибо за ваше время.
  • 0
    @AlexH, пожалуйста, не редактируйте чужой ответ, чтобы опубликовать ваше улучшение для кода. Редактируйте сообщение, только если вы обнаружили опечатку или синтаксические ошибки. Разместите ответ с принятым кодом с соответствующей ссылкой на принятый код.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню