HTML5 Canvas перевод, поворот, масштабирование

#javascript #html #canvas #html5-canvas

#javascript #HTML #холст #html5-canvas

Вопрос:

для небольшой игры я пишу компонент камеры для html5 canvas. Вы должны иметь возможность масштабировать (колесо мыши), панорамировать (левая мышь) и поворачивать (правая мышь). Моя проблема в том, что после поворота, если вы попытаетесь переместиться вверх, ориентация будет неправильной, и изображение переместится вниз.

Я подготовил пример здесь:

https://codepen.io/rogerbuecker/pen/yLzYqXq

Мой текущий код рисования:

 canvas.width = window.innerWidth
canvas.height = window.innerHeight
    
// Translate to the canvas centre before zooming - so you'll always zoom on what you're looking directly at
ctx.translate( window.innerWidth / 2, window.innerHeight / 2 )
ctx.rotate(cameraRotation*Math.PI / 180)
ctx.scale(cameraZoom, cameraZoom)
ctx.translate( -window.innerWidth / 2   cameraOffset.x, -window.innerHeight / 2   cameraOffset.y )

С уважением, Роджер

1. Что именно вы подразумеваете под ориентацией? Также из любопытства, решает ли проблему вызов ctx.save() перед первым переводом и ctx.restore() после последнего перевода?

2. После поворота изображения на 180 градусов, когда я хочу переместить изображение вверх перетаскиванием, оно затем перемещается вниз. ctx.save и restore здесь не помогают

Ответ №1:

Я нашел решение:

https://codepen.io/rogerbuecker/pen/yLzYqXq

Пропустил ту часть, где я инвертировал преобразование, чтобы получить позицию

 var transform = ctx.getTransform();
const invMat = transform.invertSelf();

Ответ №2:

У меня не слишком большой опыт работы с canvas, но я немного разбираюсь в свойстве преобразования css.

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

Дайте мне знать, если это сработает для вас.