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

如何在旋转后调整大小（具有一个固定角）时计算或逻辑以获得平移x&y。

下图显示了基于角点的大小调整与未旋转的div.（

rotate:0deg

）

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

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

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

HTML代码： 我查看了网站，transform manager div在调整旋转div的大小以保持固定角的同时更新了平移x和y

有人帮我计算平移x和y值吗？使用旋转角度来保持固定的角

---

提前感谢。

您可以使用CSS设置变换原点，这样就不必计算要补偿的平移：

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

链接到

---

是的，它起作用了，我投了赞成票，这是一种方式。但在开始拖动角点句柄的同时更改css属性并不是我需要的方式。你访问过这个网站吗。？是否有使用“变换原点”属性来修复角点。。？我需要翻译x和y的计算。请检查canva或给我他们使用的相关逻辑..天哪。。。这里没有人帮我吗。。？

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:
 }
}

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