Панорамирование холста после преобразований в неправильном направлении ⇐ Javascript

[Гость]

Я создал небольшую программу просмотра изображений HTML5, используя HTML5 Canvas и только Vanilla Javascript.

Все работает хорошо, за исключением одного: панорамирования после таких преобразований, как поворот, переворот и зеркальное отображение. Холст движется в неправильном направлении, что вполне логично.

Мне удалось решить эту проблему: «панорамирование после поворота». У меня есть матрица, которую я использую для коррекции разных углов (0, 90, 180 и 270 градусов). Возможно, это не самое красивое решение, но оно работает.

Но когда я переворачиваю или зеркально отражаю холст, он все равно перемещается в неправильном направлении. Теперь я могу попытаться решить эту проблему таким же способом, как я решил проблему «панорамирования после вращения», но это кажется неправильным. Я знаю, что нужно делать по-другому, но как?

В своем коде я прокомментировал решение «панорамирование после вращения». Может ли кто-нибудь дать мне пример, как правильно решить эту проблему?

Codepen с ограниченным кодом: https://codepen.io/r-w-c/pen/RwEZjGr

Codepen с полным кодом средства просмотра здесь: https://codepen.io/r-w-c/pen/dywRKJL

const IMGURL = "https://i.imgur.com/hjNvQge.jpg"; константный холст = 500; const CANVASHEIGHT = 325; константный ПАНСТЕП = 20; /* вар RotateMatrix = {}; RotateMatrix.left = []; RotateMatrix.left[0] = [-1, 0]; RotateMatrix.left[90] = [0, 1]; RotateMatrix.left[180] = [1, 0]; RotateMatrix.left[270] = [0, -1]; RotateMatrix.right = []; RotateMatrix.right[0] = [1, 0]; RotateMatrix.right[90] = [0, -1]; RotateMatrix.right[180] = [-1, 0]; RotateMatrix.right[270] = [0, 1]; RotateMatrix.up = []; RotateMatrix.up[0] = [0, -1]; RotateMatrix.up[90] = [-1, 0]; RotateMatrix.up[180] = [0, 1]; RotateMatrix.up[270] = [1, 0]; RotateMatrix.down = []; RotateMatrix.down[0] = [0, 1]; RotateMatrix.down[90] = [1, 0]; RotateMatrix.down[180] = [0, -1]; RotateMatrix.down[270] = [-1, 0]; */ вар холст, контекст, изображение, масштабированныйImgWidth, масштабированныйImgHeight, стартХ, начать, холстЦентрX, холстЦентрY, шкала, текущееВращение; window.onload = () => { загрузитьИзображение(); addEventListeners(); }; функция loadImage() { холст = document.getElementById("холст"); холст.ширина = ХОЛСТ; холст.высота = ВЫСОТА ХОЛСТА; контекст = холст.getContext("2d"); изображение = новое изображение (); image.onload = функция () { в этом(); перезагрузить(); }; image.src = ИМГУРЛ; } функция инициализации() { масштаб = Math.min(canvas.width/image.width, Canvas.height/image.height); ScaledImgWidth = image.width * масштаб; ScaledImgHeight = image.height * масштаб; startX = (canvas.width - ScaledImgWidth)/2; startY = (canvas.height - ScaledImgHeight) / 2; CanvasCenterX = холст.ширина/2; CanvasCenterY = холст.высота / 2; контекст.сохранить(); } функция drawImageToCanvas() { контекст.сохранить(); context.setTransform(1, 0, 0, 1, 0, 0); context.clearRect(0, 0, холст.ширина, холст.высота); контекст.восстановление(); context.drawImage(изображение, startX, startY, ScaledImgWidth, ScaledImgHeight); } функция pan(x, y) { context.translate(х, у); DrawImageToCanvas(); } функция поворот(градусы) { context.translate(canvasCenterX, CanvasCenterY); context.rotate((Math.PI / 180) * градусов); context.translate(-canvasCenterX, -canvasCenterY); DrawImageToCanvas(); } функция зеркало() { context.translate(canvasCenterX, CanvasCenterY); context.scale(-1, 1); context.translate(-canvasCenterX, -canvasCenterY); DrawImageToCanvas(); } функция флип() { context.translate(canvasCenterX, CanvasCenterY); context.scale(1, -1); context.translate(-canvasCenterX, -canvasCenterY); //currentRotation = (currentRotation + 360 + 180) % 360; DrawImageToCanvas(); } функция сброса() { контекст.восстановление(); контекст.сохранить(); DrawImageToCanvas(); //текущееВращение = 0; } функция addEventListeners() { document.getElementById("rotateRight").addEventListener("click", function () { //currentRotation = (currentRotation + 90) % 360; повернуть(90); }); документ .getElementById("rotateLeft") .addEventListener("клик", функция (событие) { //currentRotation = (currentRotation + 270) % 360; повернуть (-90); }); document.getElementById("mirror").addEventListener("click", function (event) { зеркало(); }); document.getElementById("flip").addEventListener("click", function (event) { подбросить(); }); документ .getElementById("panLeft") .addEventListener("клик", функция (событие) { панорама (-ПАНСТЕП, 0); //кастрюля( //rotateMatrix.left[currentRotation][0] * PANSTEP, //rotateMatrix.left[currentRotation][1] * PANSTEP //); }); документ .getElementById("panRight") .addEventListener("клик", функция (событие) { кастрюля (ПАНСТЕП, 0); //кастрюля( //rotateMatrix.right[currentRotation][0] * PANSTEP, //rotateMatrix.right[currentRotation][1] * PANSTEP //); }); document.getElementById("panUp").addEventListener("click", function (event) { панорама (0, -PANSTEP); //кастрюля( //rotateMatrix.up[currentRotation][0] * PANSTEP, //rotateMatrix.up[currentRotation][1] * PANSTEP //); }); документ .getElementById("panDown") .addEventListener("клик", функция (событие) { панорама (0, ПАНСТЕП); //кастрюля( //rotateMatrix.down[currentRotation][0] * PANSTEP, //rotateMatrix.down[currentRotation][1] * PANSTEP //); }); .canvas-container { гибкое направление: столбец; граница: 2 пикселя, сплошная #333; отступ: 10 пикселей; } холст { фон: #777; курсор: перекрестие; } .canvas-controls { отступ: 5 пикселей; } диапазон кнопок { отображение: встроенный блок; ширина: 30 пикселей; } пролет.rot { преобразование: поворот (90 градусов); ⇐ ⇒ ⇑ ⇓ ⟲ ⟳ ⇹ ⇹

Подробнее