Uzyskaj rzeczywistą lewą, górną pozycję obróconego elementu div

Question

Jeśli posiadam element div, który jest obrócony o 45 stopni, a jego atrybuty to: left: 0, top: 0, width: 100px, height: 100px. Czy mogę uzyskać rzeczywistą pozycję x, y lewego górnego rogu div?

Po obróceniu elementu div lewy górny róg znajduje się na poziomie około -10 pikseli, -10 pikseli (domyślne). Ale próbuję obliczyć rzeczywiste górne lewe rogi x, y dla aplikacji internetowej.

Być może znasz formułę matematyczną, która może określić górne lewe rogi x, y pozycji? A może atrybut javascript da mi to? Takich jak div.style.actualLeft ;?

Answer 1

Jeśli jest statyczna 45 stopni i pochodzenie obrotów jest w środku wtedy będziesz miał tylko ten jeden raz, aby obliczyć, która jest:

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

który jest 70,71067811865475

Więc w porównaniu do pochodzenia, x jest ujemny 70,7106 ... i tak jest 0.

Jeśli zamierzasz obracać go dynamicznie, więc musisz go znać cały czas, voila! Ujrzeć!

Oblicz odległość raz, sqrt(50^2+50^2), a następnie pomnóż to przez rotację, którą dodajesz do sześcianu + 135 stopni (bo jest na górze po lewej). (90 = prosto w górę, + 45 = 135)

tak, aby uzyskać tę samą odpowiedź Powiedziałem tylko byłoby:

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; 

Teraz x & będą Y będzie względem pochodzenia. Jeśli potrzebujesz więcej pomocy, lepiej sprecyzuj swoje pytanie, abyśmy mogli lepiej odpowiedzieć, pomóż nam.

szybkie obliczenie:

rotation=45 
135+45 = 180 

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

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

i voila to jak powiedziałem do obliczenia statyczne na początku, ja po prostu nie używać żadnych cos/sin o tym .. ale działa to również. (-75 działa tak samo)