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

Question

我正在使用HTML div元素基于角落调整javascript 。

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

当选择框div未旋转时，

基于角落的调整大小工作正常（即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＆amp;旋转后的y值，以便在调整大小时获得固定的角。？

Answer 1

我不知道您是否仍需要帮助。但是我认为您可以使用三角函数（余弦，窦和旋转角度）达到此目标，因为旋转会画一个圆。