获取旋转div的实际左侧,顶部位置

Question

如果我有一个旋转45度的div,其属性为:left:0,top:0,width:100px,height:100px.我可以获得div左上角的实际x,y位置吗？

当div旋转时,左上角位于约-10px,-10px(猜测).但我试图计算Web应用程序的实际左上角x,y位置.

也许你知道一个可以确定左上角x,y位置的数学公式？或者也许javascript属性会给我它？比如div.style.actualLeft;？

Answer 1

如果它是静态的45度并且旋转的原点在中心那么你只需要计算一次,这是:

sqrt((width/2)^2+(height/2)^2)
sqrt(50^2+50^2) // Pythagorean theorem

这是70,71067811865475

所以与原点相比,x明智的是负70,7106 ......而y明智的是0.

如果你要动态地旋转它,那么你必须一直都知道它然后瞧!看哪!

计算距离一次,sqrt(50^2+50^2)然后将其乘以您添加到立方体的旋转+ 135度(使其位于左上角).(90 =直线上升,+ 45 = 135)

所以为了得到同样的答案,我刚才说:

var dist=Math.sqrt(50^2+50^2);
var degtorad=Math.PI/180;

var x = Math.cos(degtorad * (135+rotation)) * dist;
var y = Math.sin(degtorad * (135+rotation)) * dist;

现在x&y将相对于原点.如果您需要更多帮助,请在问题中更具体,以便我们能够更好地回答,帮助我们为您提供帮助.

快速计算:

rotation=45
135+45 = 180

Math.cos(degtorad * 180)) = -1
Math.sin(degtorad * 180)) = 0;

x = -1 * dist = -70,71067811865475
y = 0 * dist = 0

瞧,就像我说的那样在开始时计算静态,我只是没有使用任何cos/sin ...但是这也有效.(-75也适用)