在javascript中旋转后调整逻辑大小以保持固定角

Question

如何计算或背后的逻辑来获得在旋转后调整大小（带有一个固定角）时平移x和y。

下图显示了基于角的调整大小与未旋转的 div 完美搭配。(rotate:0deg)

我处理了基于中心的旋转和调整大小没有任何问题。

但问题是，当调整旋转 div 的大小时，我需要一个 固定角。

当调整一个旋转的 div 的大小时，使用 右下手柄，左上角需要保持固定，同样对角需要固定位置。

HTML 代码：

<div class="box" style="transform: translate(132px, 190px) rotate(45deg); width: 295px; height: 234px;">
<div>

Javascript 代码：

function rotate(){
  //Here i update angle
}

function resize(){
 //Here i update translate x & y, width & height

 switch (handle) {
   case 'bottom-right':
     x = previous_x - ? ;   // logic to get translate x when resize a rotated div.
     y = previous_y + ? ;   // logic to get translate y when resize a rotated div.
     break;
   case 'bottom-left':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   case 'top-left':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   case 'top-right':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   default:
 }
}

我查看了Canva 网站，变换管理器 div 在调整旋转 div 的大小以保持固定角的同时更新 x 和 y。。

任何人都可以帮助我使用旋转角度计算平移 x 和 y 值以保持固定角。

提前致谢。

Answer 1

您可以使用 CSS 设置一个转换原点，这样您就不必计算翻译来补偿：

.box{transform-origin: 0 100% 0;}

链接到W3C doc

jsfiddle 上的示例