Как в js динамически рисовать предметы?

Question

[des1roer]

знаю про https://developer.mozilla.org/ru/docs/Web/API/Canv...

канвас это в целом хорошо.

но вот кейс какой - при клике по холсту\кнопке должна ставится первая точка квадрата и дальше как отводишь - визуально видны размеры квадрата. как такую динамичность добавить?

Answer 1

[profesor08]

Ну тут довольно все просто, если умеешь рисовать квадрат и отслеживать действия мыши (mousedown, mouseup, mousemove). При нажатии кнопки мыши записываешь координаты курсора, это и есть стартовая точка. Далее при движении мыши ты тоже получаешь координаты курсора, это и есть точка, куда рисовать. Остается только нарисовать. Чтоб это было динамически, придется рисовать на каждом кадре, очистил - нарисовал, очистил - нарисовал и тд.

jsfiddle.net/profesor08/2rw8c7qg

let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")

document.body.appendChild(canvas);

let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
let canDrawSelection = false;

canvas.addEventListener("mousedown", function(e) {
	canDrawSelection = true;
	x1 = e.clientX;
	y1 = e.clientY;
	x2 = e.clientX;
	y2 = e.clientY;
});

canvas.addEventListener("mouseup", function(e) {
	canDrawSelection = false;
});

canvas.addEventListener("mousemove", function(e) {
	x2 = e.clientX;
	y2 = e.clientY;
});

function drawSelection() {
	if (canDrawSelection === true) {
		ctx.beginPath();
		ctx.lineWidth="2";
		ctx.strokeStyle="white";
		ctx.rect(x1, y1, x2 - x1, y2 - y1);
		ctx.stroke();
	}
}

function render() {
	ctx.canvas.width = window.innerWidth;
	ctx.canvas.height = window.innerHeight;
	ctx.fillStyle = "#2B2E35";
	ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
	drawSelection();
}

function animate() {
	requestAnimationFrame(animate);
	render();
}

animate();

Answer 2

[Владимир Проскурин]

Логикой. Имеете две точки, стартовая и конечная, пока они пустые. При первом клике делаете проверку, если стартовой точки нет, то этот клик и будет стартовой точкой, значит записываем координаты клика в стартовую точку. В этот момент должно работать событие мыши mousemove, которое делает проверку, есть ли стартовая точка и нет конечной, тогда рисуем прямоугольник от стартовой точки до точки координат мыши. При повторном клике опять делается проверка, если стартовая точка есть а конечной нет, то записываем точку мыши в конечную. В этот момент условие в mousemove больше не работает, т.к. есть конечная точка, прямоугольник закрыт. Можно его нарисовать окончательно.
У fillRect конечная точка описывается шириной и высотой, поэтому нужно ее высчитывать вот так:

width = xEnd - xStart;
height = yEnd - yStart;

Comments

[des1roer]

так не будет визуального квадрат при передвижении точки. в любой момент времени значит рисовать квадрат? насколько это тяжело для браузера?

[Владимир Проскурин]

des1roer, можно рисовать по mousemove, а можно через цикл requestAnimationFrame. Все зависит от вашей задачи. На один объект не тяжко, там не так много операций.

[Роман]

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

[des1roer]

https://jsfiddle.net/Ljp1n50k/10/

[Владимир Проскурин]

des1roer, очищайте перед рисованием
ctx.clearRect(0, 0, 1050, 1050);

Answer 3

[des1roer]

https://jsfiddle.net/Ljp1n50k/15/