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

问题描述

我正在使用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的大小.

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.

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

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

我需要计算旋转后x和y的转换值以基于角的大小.

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.

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

<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))进行大小调整时，基于下角的调整大小代码非常适用:

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;

如何计算翻译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.

这篇关于旋转后调整大小时如何计算平移x和y值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！