后面如何计算或者逻辑得到旋转后调整大小(用一个固定角)时平移 x 和 y。
下图显示了基于角的调整大小与未旋转的 div 完美配合。(rotate:0deg
)
![enter image description here](https://i.stack.imgur.com/JOu7F.png)
我处理基于中心的旋转和调整大小没有任何问题。
但问题是,我需要一个调整旋转 div 大小时固定角点。
当调整旋转的 div 的大小时,使用右下手柄,左上手柄需要保持固定,同样对角也需要固定位置。
HTML 代码:
<div class="box" style="transform: translate(132px, 190px) rotate(45deg); width: 295px; height: 234px;">
<div>
JavaScript 代码:
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:
}
}
我检查了Canva网站,转换管理器 div平移 x 和 y 会更新,同时调整旋转 div 的大小以保持固定角.
任何人都可以帮助我使用旋转角度来计算平移 x 和 y 值以保持固定角。
提前致谢。
你可以使用CSS设置一个transform-origin,这样你就不必计算翻译来补偿:
.box{transform-origin: 0 100% 0;}
Link to W3C doc
示例jsfiddle
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)