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

Question

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

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

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

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

就像有四个手柄一样，调整大小时对角需要保持在同一位置。

但问题是，选择框左上角没有保持在相同的位置。

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

已知值：

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))调整大小时，基于角的调整大小代码完美地工作：

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

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

Answer 1

我不知道你是否还需要帮助。但我认为你可以用三角函数（余弦、正弦和你的旋转角度）来达到它，因为你的旋转画了一个圆。