Я создаю веб-приложение с помощью HTML canvas.Пользователи могут добавлять, перемещать и вращать прямоугольники.К сожалению, у меня возникают проблемы с интерпретацией событий мыши после поворота фигуры.Как я могу «повернуть» заданный x / y вместе с формой?
Прямоугольники нарисованы следующим образом:
context.translate(centerX, centerY);
context.rotate(radians);
context.translate(-centerX, -centerY);
context.fillRect(x, y, width, height);
Предположим, пользователь нажимает на (x, y).Мне нужно превратить эту точку в нечто относительно прямоугольника.Я пробовал обратное преобразование к тому, что испытывает фигура.
// Opposite of `translate(centerX, centerY)`;
let xPrime = x - centerX;
let yPrime = y - centerY;
// Opposite of `rotate(radians)`;
xPrime = xPrime * Math.cos(-radians) - yPrime * Math.sin(-radians);
yPrime = xPrime * Math.sin(-radians) + yPrime * Math.cos(-radians);
// Opposite of `translate(-centerX, -centerY)`;
xPrime = xPrime + centerX;
yPrime = yPrime + centerY;
Но, к сожалению, это не дает правильных чисел.