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

Question

How to calculate or logic behind to get translate x & y while resize(with one fixed corner) after rotate.

Below image shows corner based resize works perfect with unrotated div.( rotate:0deg )

I handled center based rotate and resize without any problem.

But the problem is, i need a fixed corner when resize a rotated div.

When resize a rotated div, using bottom-right handle, top-left needs to remains fixed , likewise opposite corners need to fixed position.

HTML code:

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

Javascript code:

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

I checked Canva website, the transform manager div translate x and y gets updated while resize a rotated div to maintain a fixed corner .

Anybody help me to calculate translate x and y values using rotated angle to maintain a fixed corner.

Thanks in Advance.

Answer 1

You could just set a transform-origin using CSS so you don't have to calculate the translate to compensate :

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

Link to W3C doc

Example on jsfiddle