获取旋转的div的实际左，顶位置 [英] Obtain the Actual Left,Top position of a rotated div

问题描述

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

当div旋转时，左上角位于大约-10px，-10px（猜）。但我试图计算一个web应用程序的实际左上角x，y位置。

也许你知道一个数学公式可以确定顶部左角x，y位置？

解决方案

如果是的话，是静态45度，旋转的原点在中心，那么你只需要计算一次，即：

  sqrt（（width / 2）^ 2 +（height / 2）^ 2）
 sqrt（50 ^ 2 + 50 ^ 2）//毕达哥拉定理
  pre> 
 
 
这是 70,71067811865475 
 
 
 
明智的，它是负的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这个..但这也工作aswell。 （-75工作原理）
 
If I have a div that is rotated 45 degrees and its attributes are: left: 0, top: 0, width: 100px, height: 100px. Can I obtain the actual x,y position of the divs top left corner?

When the div is rotated, the top left corner sits at about -10px,-10px(guess). But I am attempting to calculate the actual top left corners x,y position for a web application.

Maybe you know of a mathematical formula that can determine the top left corners x,y position? Or maybe a javascript attribute will give me it? Such as div.style.actualLeft;?
解决方案
If it is static 45 degrees and the origin of the rotation is in the center then you'll only have to calculate this once which is:
sqrt((width/2)^2+(height/2)^2)
sqrt(50^2+50^2) // Pythagorean theorem
which is 70,71067811865475

So compared to the origin,  x wise it's negative 70,7106... and y wise it's 0. 

If you are going to rotate it dynamicly so you must know it all the time then voila! Behold!

compute the distance once, sqrt(50^2+50^2), then multiply this by the rotation you're adding to the cube + 135 degrees (cause it's top left). (90 = straight up, + 45 = 135)

so to get the same answer I just said it would be:
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;
Now x & y will be relative to the origin. If you need more help then be more specific in your question so we can answer better, help us to help you.

quick calculation: 
rotation=45
135+45 = 180

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

x = -1 * dist = -70,71067811865475
y = 0 * dist = 0
and voila it's like I said for calculating the static in the beginning, I just didn't use any cos / sin for that.. but this works aswell. (-75 works aswell)

                        
这篇关于获取旋转的div的实际左，顶位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！