問(wèn)題描述

我正在使用 HTML div 元素 javascript 中基于角的調(diào)整大小.

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

基于角的調(diào)整大小在選擇框 div 未旋轉(zhuǎn)(即 rotate(0 deg))時(shí)完美運(yùn)行.

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

旋轉(zhuǎn)后，當(dāng)左上角需要保持在同一位置時(shí)，我使用右下角作為手柄來(lái)調(diào)整選擇框div的大小.p>

就像有四個(gè)手柄一樣，調(diào)整大小時(shí)對(duì)角需要保持在同一位置.

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.

但問(wèn)題是，選擇框左上角角不保持在同一位置.

As like having four handles, with opposite corner needs to remain in same position when resize.

我需要為旋轉(zhuǎn)后基于角的調(diào)整大小計(jì)算平移 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.

用于旋轉(zhuǎn)后調(diào)整大小的示例代碼:

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:
}

當(dāng)使用未旋轉(zhuǎn)的 div (rotate(0 deg)) 調(diào)整大小時(shí)，基于角的調(diào)整大小代碼可以完美運(yùn)行:

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;

如何計(jì)算 translate x &調(diào)整大小時(shí)旋轉(zhuǎn)后的y值以獲得固定角.?

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

推薦答案

不知道你是否還需要幫助.但我認(rèn)為你可以用三角函數(shù)(余弦、正弦和你的旋轉(zhuǎn)角度)來(lái)達(dá)到它，因?yàn)槟愕男D(zhuǎn)畫了一個(gè)圓.

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.

這篇關(guān)于旋轉(zhuǎn)后調(diào)整大小時(shí)如何計(jì)算平移x和y值..?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！