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

How to calculate translate x and y value when resize after rotate..?(旋转后调整大小时如何计算平移x和y值..?)

本文介绍了旋转后调整大小时如何计算平移x和y值..?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 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.?

问题描述

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

当使用未旋转的 div (rotate(0 deg)) 调整大小时，基于角的调整大小代码可以完美运行:

Below corner based resize code works perfect when resize with unrotated div (rotate(0 deg)):

推荐答案

当使用未旋转的 div (`rotate(0 deg)`) 调整大小时，基于角的调整大小代码可以完美运行:

Below corner based resize code works perfect when resize with unrotated div (`rotate(0 deg)`):