javascript - CSSで回転した要素の実際の（元の）高さを取得する方法

Question

（正確なカスタムツールチップの配置のために）いくつかの異なる要素の実際の高さを取得する必要があり、これらの要素の一部（すべてではない）が回転します。$（elem）.outerHeight（）は、実際に表示されている高さではなく、元の高さを返します。

これが非常に単純な例のフィドルです：http：//jsfiddle.net/NPC42/nhJHE/

私はこの答えで可能な解決策を見ます：https ：//stackoverflow.com/a/8446228/253974 、しかしそれでももっと簡単な方法があることを望んでいます。

score 10 · Accepted Answer

高校の幾何学と手ごわいグラフィックスキルを捨てて、この図をまとめました。変数width、、がheightありrotation、JavaScriptで、高さを次のように表すことができます。

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

ここに画像の説明を入力してください

score 1 · Accepted Answer

45度の回転のみを使用し、幅と高さが常に等しい場合は、比較的単純な数学的な斜辺の式を使用して、実際の回転高さを計算できます。

これは、斜辺の長さの2乗が、他の2つの辺の長さの2乗の合計に等しいことを示しています。

この場合、最も長い辺は、コーナーから反対側のコーナーへの対角線になります。これは大まかに次のようにjQueryに変換されます。

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

更新されたjsFiddleを参照してください。

2 に答える 2