Проблема с поведением CanvasstrokeRect после поворота CSS-преобразования (90 градусов) ⇐ CSS

[Anonymous]

Во-первых, я плохо владею английским. Спасибо за понимание.
Теперь позвольте мне объяснить трудности, с которыми я сейчас сталкиваюсь.
В настоящее время я разрабатываю функцию, которая рисует прямоугольник на холст с помощью мыши (с помощью функцииstrokeRect).
При нормальных обстоятельствах работает хорошо, но возникает проблема при нажатии кнопки вращения (возникает проблема, при которой прямоугольник не рисуется в координатах мыши).
Для справки: когда вы нажимаете кнопку поворота, он вращается с помощью css, Transform = 'rotate(90deg)' и извлекает размер холста с помощью функции CalcCanvasRect (с помощью функции getBoundingClientRect).
Мне нужен совет, чтобы решить эту проблему. помогите!
Для справки, структура HT следующая.

Код: Выделить всё

Вот полный исходный код.

Код: Выделить всё

let mode = 'off';
let wwViewCanvas;
let wwCanvasRect;
let isDown = false;
let mousedown, mouseup, mousemove;
let zoombox;
let post_obj;

function calcCanvasRect() {
if(wwViewCanvas) {
let rect = wwViewCanvas.canvas.getBoundingClientRect();
let scrollY = window.scrollY;

wwCanvasRect = {
left: rect.left,
top: rect.top + scrollY,
right: rect.right,
bottom: rect.bottom + scrollY,
width: rect.width,
height: rect.height,
};

if(mode === '90') {
//To do anything..
}
}
}

function appendViewCanvas() {
let width, height;

if(mode === '90') {
width = 338;
height = 600;
}
else if(mode === 'off') {
width = 600;
height = 338;
}

$('#canvasParent').append(
`
`
);
}

function getViewCanvas() {
let element = document.getElementById('view_canvas');

if(!element) {
appendViewCanvas();
element = document.getElementById('view_canvas');
}

return element;
}

function initViewCanvas() {
let ctx;
let canvas = getViewCanvas();

ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.strokeStyle = '#00B0F0';

wwViewCanvas = {
canvas: canvas,
context: ctx,
};
}

function getEventPosition(event) {
let eventCoordinateX, eventCoordinateY;
let pageX = event.pageX;
let pageY = event.pageY;

if (pageX > wwCanvasRect.right) {
pageX = wwCanvasRect.right;
}
else if (pageX < wwCanvasRect.left) {
pageX = wwCanvasRect.left;
}

if (pageY > wwCanvasRect.bottom) {
pageY = wwCanvasRect.bottom;
}
else if (pageY < wwCanvasRect.top) {
pageY = wwCanvasRect.top;
}

eventCoordinateX = pageX - wwCanvasRect.left;
eventCoordinateY = pageY - wwCanvasRect.top;

return {
x: Math.floor(eventCoordinateX),
y: Math.floor(eventCoordinateY),
};
}

function getZoombox(start, end) {
return {
width: end.x - start.x,
height: end.y - start.y,
};
}

function clearCanvas() {
wwViewCanvas.context.clearRect(0, 0, wwViewCanvas.canvas.width, wwViewCanvas.canvas.height);
}

function getCoordinatesBox(center_x, center_y) {
return {
Coordinates_box: {
x: center_x,
y: center_y,
box_w: Math.abs(zoombox.width),
box_h: Math.abs(zoombox.height),
w: wwCanvasRect.width,
h: wwCanvasRect.height,
},
};
}

function canvasMousedown(event) {
mousedown = getEventPosition(event);
isDown = true;
}

function canvasMouseup(event) {
if (!isDown) {
return;
}

mouseup = getEventPosition(event);
zoombox = getZoombox(mousedown, mouseup);

let center_x, center_y;

center_x = Math.round(zoombox.width / 2) + mousedown.x;
center_y = Math.round(zoombox.height / 2) + mousedown.y;

post_obj = getCoordinatesBox(center_x, center_y);

clearCanvas();
isDown = false;
}

function canvasMousemove(event) {
if (!isDown) {
return;
}

mousemove = getEventPosition(event);
zoombox = getZoombox(mousedown, mousemove);

clearCanvas();
wwViewCanvas.context.strokeRect(mousedown.x, mousedown.y, zoombox.width, zoombox.height);
}

function getTransformHeight(rect) {
return rect.container_rect.height + (rect.wrapper_rect.width - rect.container_rect.height);
}

function getTranslateValueOfTopBottom(rect) {
return (rect.wrapper_rect.width - rect.container_rect.height) / 2;
}

function calcRotationLayoutRect(container, wrapper) {
return {
container_rect: container.getBoundingClientRect(),
wrapper_rect: wrapper.getBoundingClientRect(),
};
}

$(document).ready(function() {
initViewCanvas();

wwViewCanvas.canvas.addEventListener('mousedown', canvasMousedown);
wwViewCanvas.canvas.addEventListener('mouseup', canvasMouseup);
wwViewCanvas.canvas.addEventListener('mousemove', canvasMousemove);

let myContainer = document.getElementsByClassName('myContainer')[0];
let rotationWrapper = document.getElementsByClassName('rotation-wrapper')[0];

rotationLayoutRect = calcRotationLayoutRect(myContainer, rotationWrapper);

let transformHeight = getTransformHeight(rotationLayoutRect);
let translateValue = getTranslateValueOfTopBottom(rotationLayoutRect);

const noTransitionCallback = function () {
if (mode === 'off') {
rotationWrapper.style.transform = 'rotate(0deg)';
myContainer.style.height = `${rotationLayoutRect.container_rect.height}px`;

mode = '90';
}
else if (mode === '90') {
rotationWrapper.style.transform = `rotate(90deg) translate(${translateValue}px, 0px)`;
myContainer.style.height = `${transformHeight}px`;

mode = 'off';
}

calcCanvasRect();
};

$('#rotation_btn').click(noTransitionCallback);
});

Код: Выделить всё

canvas rotation

.myContainer{
background-color: yellowgreen;
}
canvas {
border: 1px solid black;
}










rotation button

Я пробовал использовать функции перемещения и поворота холста, но не смог найти решение. Есть ли лучший способ?
Или я чего-то не знаю?

Подробнее здесь: https://stackoverflow.com/questions/783 ... otate90deg