Как можно вращать изображения в канвасе?

Question

[bro-dev]

Как можно вращать изображения в канвасе? Есть 6 инпутов 3 из них выбираем файл, в 3 выбираем угол для каждого и рисуем все потом мышкой растаскиваем.
Все реализовал кроме вращения все ссылки приводят к тому чтобы вращать всю раб область, но мне то нужно каждую имг индивидуально. Подскажите решение.

Answer 1

[bro-dev]

rotateAndCache = function(image, angle) {
            var offscreenCanvas = document.createElement('canvas');
            var offscreenCtx = offscreenCanvas.getContext('2d');
            offscreenCanvas.width = image.height;
            offscreenCanvas.height = image.width;
            offscreenCtx.translate(offscreenCanvas.width / 2, offscreenCanvas.height / 2);
            offscreenCtx.rotate(angle * Math.PI / 180);
            offscreenCtx.drawImage(image, -(image.width / 2), -(image.height / 2));
            return offscreenCanvas;
        }

Нашел решение, суем в функцию то что нужно вращать имг или канвас, пишем угол и возвращает повернутый канвас. который можем пихать в основной в любое место.

Answer 2

[Niomin]

Вращать нужно относительно какой-то точки. Вы хотите вращать каждую картинку относительно её центра? Какого-то угла?

В целом, поворот на угол a выглядит, как

newX = obj.x * Math.cos(a) - obj.y * Math.sin(a);
newY = obj.x * Math.sin(a) + obj.y * Math.cos(a);

При этом, obj.x и obj.y — координаты относительно центра вращения. В вашем случае, как я понимаю, для каждой картинки их нужно отдельно задать перед вращением.

Comments

[bro-dev]

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

[Niomin]

Роман Бережнов: Ну да. Только перерисовывать канвас по частям, насколько я знаю.

Answer 3

[GreatRash]

Урок по трансформациям в канвасе.

TL;DR: Представьте, что канвас - альбомный лист. Кусок альбомного листа повернуть нельзя, можно только повернуть лист целиком. Но вы можете запомнить, что повернули лист, и затем повернуть его в обратном направлении. Так же и с канвасом:

ctx.save();  // запомнили текущее состояние канваса
ctx.rotate(rad); // повернули канвас целиком

// рисуем, заливаем и вообще делаем что хотим с повёрнутым канвасом

ctx.restore(); // восстанавливаем состояние, которое запомнили ранее (читай повернули листик назад как было)