在JavaScript中旋转后调整逻辑大小以保持固定的角落

问题描述

如何计算或逻辑背后得到 translate x&您可以在旋转后调整大小（与一个固定的角​​落）。

下图显示了基于角落的调整大小工作完美与未旋转的div（旋转：0deg ）

但问题是，我需要一个固定角度来调整旋转的div。

strong>

调整旋转div的大小时，使用右下手柄，左上角需要保持不变，同样对角也需要固定位置。

HTML代码：

 < div class = boxstyle =transform：translate（132px，190px）rotate（45deg）; width：295px; height：234px;> 
< div> 
  

Javascript代码：

 函数rotate（）{
 //这里我更新了角度
} 
 
 function resize（）{
 //这里我更新了translate x &安培; y，宽度&身高
 
开关（手柄）{
'右下角'：
 x = previous_x  - ？ ; //在调整旋转的div大小时获得翻译x的逻辑。 
 y = previous_y +？ ; //在调整旋转的div大小时获得翻译y的逻辑。 
休息; 
大小写'bottom-left'：
 x = previous_x  - ？ ; 
 y = previous_y +？ ; 
休息; 
案例'左上角'：
 x = previous_x  - ？ ; 
 y = previous_y +？ ; 
休息; 
案例'右上角'：
 x = previous_x  - ？ ; 
 y = previous_y +？ ; 
休息; 
 default：
 
 
  

我检查了网站，转换管理器div translate x和y获取更新，同时调整旋转的div大小以保持固定角落。

任何人都可以帮助我使用旋转角度来计算翻译x和y值，以保持一个固定的角​​落。

解决方案

您可以使用CSS设置转换原点，因此您不必计算补偿翻译：

  .box {transform-origin：0 100％0;} 
  

链接到

How to calculate or logic behind to get translate x & y while resize(with one fixed corner) after rotate.

Below image shows corner based resize works perfect with unrotated div.(rotate:0deg)

I handled center based rotate and resize without any problem.

But the problem is, i need a fixed corner when resize a rotated div.

When resize a rotated div, using bottom-right handle, top-left needs to remains fixed, likewise opposite corners need to fixed position.

HTML code:

<div class="box" style="transform: translate(132px, 190px) rotate(45deg); width: 295px; height: 234px;">
<div>

Javascript code:

function rotate(){
  //Here i update angle
}

function resize(){
 //Here i update translate x & y, width & height

 switch (handle) {
   case 'bottom-right':
     x = previous_x - ? ;   // logic to get translate x when resize a rotated div.
     y = previous_y + ? ;   // logic to get translate y when resize a rotated div.
     break;
   case 'bottom-left':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   case 'top-left':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   case 'top-right':
     x = previous_x - ? ;
     y = previous_y + ? ;
     break;
   default:
 }
}

I checked Canva website, the transform manager div translate x and y gets updated while resize a rotated div to maintain a fixed corner.

Anybody help me to calculate translate x and y values using rotated angle to maintain a fixed corner.

Thanks in Advance.

解决方案

You could just set a transform-origin using CSS so you don't have to calculate the translate to compensate :

.box{transform-origin: 0 100% 0;}

Link to W3C doc

Example on jsfiddle

这篇关于在JavaScript中旋转后调整逻辑大小以保持固定的角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！