javascript - 旋转后调整大小时如何计算平移x和y值..？

Question

我正在使用 HTML div 元素 javascript 中基于 Angular 的调整大小 .

下图显示了旋转调整大小操作:



基于 Angular 的调整大小 working perfect when selection box div is unrotated (i.e. rotate(0 deg) ).

旋转后，我使用 右下角作为句柄 调整选择框 div 的大小，当 左上角需要保持在相同的位置。

就像拥有 四个 handle , 对 Angular 需要在调整大小时保持在同一位置。

但问题是，左上角的选择框拐 Angular 不在同一位置 .

我需要 计算平移 x 和 y 旋转后基于 Angular 的调整大小的值。

已知值:
scale , center_x , center_y , previous_x , previous_y , width , height , previous_width , previous_height , diff_width , diff_height , radian_angle , rotated_degree .

HTML 代码 ( selection box div ):

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

用于在旋转后调整大小的示例代码:

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

当使用未旋转的 div ( rotate(0 deg) ) 调整大小时，基于 Angular 的调整大小代码非常适合:

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

旋转后如何计算平移x和y值以在调整大小时获得固定 Angular 。？

Answer 1

我不知道你是否还需要帮助。但我认为你可以用三 Angular 学(余弦、正弦和你的旋转 Angular )来达到它，因为你的旋转画了一个圆。