Проблема при вращении элемента холста и последующей попытке изменить его размер с помощью взаимодействия ⇐ CSS

[Гость]

Я работаю в Angular, используя Interactjs для создания элементов холста. Перетаскивание работает отлично, а вращение и изменение размера элемента работает нормально по отдельности, но как только я сначала поворачиваю элемент, а затем пытаюсь изменить его размер, все идет не так. Кажется, что оси x и y установлены неправильно, например, когда элемент поворачивается на 90 градусов и вы пытаетесь изменить размер верхней части, элемент меняет верхнюю часть на левую или правую часть (не уверен), но похоже, вы снова повернули элемент. Чтобы выполнить вращение, я использую

elem.style.transform = `translate(${x}px, ${y}px) Rotate(${angle}rad) `; где x и y — центр объекта, а угол — угол поворота элемента в радианах.

Я пробовал использовать матрицу вместо поворота, но, похоже, это не работает. Я также пытался сначала повернуть, а потом перевести, но это только усугубляет проблему. Стоит отметить, что функции изменения размера и поворота являются директивами. Директива вращения применяется к дочернему компоненту, а директива изменения размера — к родительскому.

bdr-draggable-element содержит это:

... Я почти уверен, что проблема связана с положением осей X и Y после поворота, но не совсем уверен, как решить эту проблему. Если вам нужна дополнительная информация, свяжитесь с нами