24

rotateフィルタを適用した後、divの位置を取得するのに問題があります。一端の位置、高さ、回転角度がわかりますが、このフィルターがMDNで実際に何をするかを確認した後（ "[cos（angle）sin（angle）-sin（angle）cos（angle） 0 0] "）私はまだそれをクラックする方法がわかりません。

例 ：

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

私が興味を持っているdivは破線です。その瞬間のスタイリングは：

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

（top/leftその始まりの位置を記述します。）私はその終わりのtop/位置を取得しようとしています。left

4

2 に答える 2

16

あなたの現在の質問とあなたの要求された確認ごとに：

var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;

解決策は、別の質問に対するこの他のSO Answerにあり、ここで拡張されています。 

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
    return $.extend({
        width: el.outerWidth(false),
        height: el.outerHeight(false)
    }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle) {
    var dimensions = getPositionData(el);
    return {
        width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
        height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
    };
};


これは、関数のリアルタイム更新を提供 するインタラクティブなjsFiddleです。制御するCSS3ローテーションプロセスの最後にとの値が表示されます。getPositionData();
topleft

参照：   jsFiddle

ステータスの更新：上記のjsFiddleは、 0〜90度で最適に機能し、すべての角度と、ラジアン、グラッド、ターンなどのさまざまな単位で承認できます。

于 2012-07-01T23:42:53.440 に答える
5

使ってみてくださいelement.getBoundingClientRect()

MDNによると：

Gecko 12.0（Firefox 12.0 / Thunderbird 12.0）以降、要素の外接する四角形を計算するときに、CSS変換の効果が考慮されます。

于 2012-07-03T21:13:50.307 に答える