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＆amp; 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也适用）

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

1 个答案: