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

Posted 2023-03-06

【中文标题】旋转后调整大小时如何计算平移x和y值..？

【英文标题】：How to calculate translate x and y value when resize after rotate..?

【发布时间】：2018-03-31 08:29:09

【问题描述】：

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

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

基于角的调整大小在选择框 div 未旋转（即rotate(0 deg)）时完美运行。

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

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

但问题是，选择框左上角角不保持在同一位置。

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

已知值：

scale, center_x, center_y, previous_x, previous_y, width, height, previous_width, previous_height, diff_height, @98654334@, @9867654333 , 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 值以在调整大小时获得固定角？

【参考方案1】：

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