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

Question

如何计算或逻辑背后得到翻译x＆amp; 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 翻译x和y更新，同时调整旋转的div以维持固定的角落。

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

先谢谢。

Answer 1

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

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

链接到W3C doc

jsfiddle

上的示例