Jak uzyskać faktyczną (nie oryginalną) wysokość elementu obróconego CSS?

Potrzebuję uzyskać faktyczną wysokość kilku różnych elementów (ze względu na precyzyjne niestandardowe pozycjonowanie podpowiedzi), a niektóre z tych elementów (nie wszystkie) są obracane . $ (elem) .outerHeight() zwraca pierwotną wysokość zamiast rzeczywistej wyświetlanej wysokości.Jak uzyskać faktyczną (nie oryginalną) wysokość elementu obróconego CSS?

Oto skrzypce z bardzo prostym przykładzie: http://jsfiddle.net/NPC42/nhJHE/

widzę możliwe rozwiązanie w tej odpowiedzi: https://stackoverflow.com/a/8446228/253974, ale nadal jestem nadzieją, istnieje prostszy sposób.

Źródło

2012-03-20 NPC

Odkuwając moją geometrię ze szkoły średniej i moje niesamowite umiejętności graficzne, układam ten schemat razem. Jeśli masz zmienne width, height i rotation w javascript, można wyrazić wysokość w ten sposób:

var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation);

enter image description here

Źródło

2012-03-20 18:59:02 recursive

Dzięki za edycję Starx. To był bardzo istotny błąd w najważniejszej części postu! – recursive

Dzięki, rozumiem to, ale przegapiłeś, że przetwarzam kilka elementów, z których tylko niektóre są obracane. Poszukuję uniwersalnej metody "zdobądź wysokość elementu", nie uprzedzając, że została ona obrócona. Ale jeśli nie mogę tego znaleźć - będę musiał użyć tej metody, tak :) Jeszcze raz dziękuję! – NPC

@NPC: Jeśli obrót wynosi 0, ta metoda nadal działa bez żadnych specjalnych przypadków, ponieważ 'sin (0) == 0' i' cos (0) == 1'. – recursive

Jeśli tylko będzie za pomocą obroty o 45 stopni, a szerokość i wysokość są zawsze równe, można obliczyć rzeczywistą wysokość obrócony za pomocą stosunkowo prostego matematycznego Hypotenuse wzoru:

który stanowi, że kwadrat długości przeciwprostokątnej jest równy sumie kwadratów długości dwóch pozostałych boków.

W tym przypadku najdłuższym bokiem będzie przekątna od rogu do przeciwległego rogu. Będzie to z grubsza przetłumaczyć na jQuery tak:

Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2))

Zobacz zaktualizowaną jsFiddle.

Źródło

2012-03-20 17:21:30

samo jak powyżej - Dzięki, ale brakowało że jestem przetwarzania kilka elementów, tylko niektóre z których są obrócone. Ale - dziękuję za odpowiedź. – NPC

Jak uzyskać faktyczną (nie oryginalną) wysokość elementu obróconego CSS?

Odpowiedz

Powiązane problemy