問題描述

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

這篇關于旋轉后調整大小時如何計算平移x和y值..?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！