旋转画布元素然后尝试使用 interactjs 调整其大小时出现问题

问：

我正在 Angular 中使用 interactjs 创建画布元素。拖放效果很好，旋转和调整元素大小单独工作得很好，但是一旦我先旋转元素，然后尝试调整它的大小，一切都会出错。似乎 x 轴和 y 轴没有正确设置 bc 例如，当元素旋转 90 度并且您尝试调整顶部时，元素会更改左侧或右侧部分的顶部（不确定），但看起来您再次旋转了元素。要使旋转 im 使用

elem.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad) `;

其中 x 和 y 是对象的中心，角度是元素应以弧度为单位的旋转程度。

我尝试过使用矩阵而不是旋转，但它似乎不起作用。 我也尝试先旋转，然后再翻译，但这只会使问题变得更糟。 值得一提的是，调整大小和旋转功能都是指令。rotation 指令在子组件中应用，而 resize 指令在父组件中应用

<bdr-draggable-element
...
bdrResizable
...
>
</bdr-draggable-element>

bdr-draggable-element 里面有这个：

<div
    class="drag-elem__rotation-button"
    bdrRotation>
...
</div>

我几乎可以肯定问题与旋转后的 x 轴和 y 轴位置有关，但不确定如何解决问题。 如果您需要更多详细信息，请随时与我们联系