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

2022-01-16 00:00:00 resize rotation javascript html css

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

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

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

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

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

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

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.

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

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

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

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

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

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

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)) 调整大小时，基于角的调整大小代码可以完美运行:

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;

如何计算 translate x &调整大小时旋转后的y值以获得固定角.?

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

推荐答案

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

I don't know if you still need help. But I think you can reach it with Trigonometry (cosinus, sinus and your rotation angle) because your rotation draw a circle.

相关文章