How to calculate translate x and y value when resize after rotate..?

I am working with HTML div element corner based resize in javascript.

Below image shows rotate resize operation:

enter image description here

Corner based resize working perfect when selection box div is unrotated (i.e. rotate(0 deg)).

After rotate, i am using bottom-right corner as handle to resize the selection box div, when top-left corner needs to remain in same position.

As like having four handles, with opposite corner needs to remain in same position when resize.

But the problem is, the selection box top-left corner not remains in same position.

I need to calculate translate x and y value for corner based resize after rotate.

Known values:

scale, center_x, center_y, previous_x, previous_y, width, height, previous_width, previous_height, diff_width, diff_height, radian_angle, rotated_degree.

HTML code (selection box div):

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

Sample code used to resize after rotate:

switch (handle) {
  case 'bottom-right':
    x = previous_x - ? ;        //logic behind after rotated some angles..?
    y = previous_y + ? ;
    break;
  case 'bottom-left':
    x = ? ;
    y = ? ;
    break;
  case 'top-left':
    x = ? ;
    y = ? ;
    break;
  case 'top-right':
    x = ? ;
    y = ? ;
    break;
  default:
}

Below corner based resize code works perfect when resize with unrotated div (rotate(0 deg)):

case 'bottom-right':
  x = previous_x;
  y = previous_y;
  break;
case 'bottom-left':
  x = previous_x - diff_width;
  y = previous_y;
  break;

How to calculate translate x & y value after rotate to get fixed corner when resize.?

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.