Resize logic to maintain a fixed corner after rotate in 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.

Zonedark · Accepted Answer · 2017-10-20 14:57:36Z

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

answered Oct 20, 2017 at 14:57

Zonedark

2491 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArunValaven Over a year ago

Yes its working, i up-voted and its one of the way. But doing changes in css property while start dragging corner handle is not the way i need. Are you visited Canva website.? Is there using transform-origin property to fix corners..? I need translate x and y calculations. Please check canva or give me relevant logic they used..

ArunValaven Over a year ago

OMG... No one here to help me..?

Collectives™ on Stack Overflow

Resize logic to maintain a fixed corner after rotate in javascript

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

HTML code:

Javascript code:

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

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

HTML code:

Javascript code:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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