1

非常に簡単に言えば、私の質問はタイトルです。

要素を適用した後、要素の高さを取得する方法はありますtransform:skew();か？

たとえば、要素の高さが100pxで、変換前の上部オフセットが500pxの場合、スキューを適用した後、高さは実際には150px、上部オフセットは実際には450pxになる可能性がありますが、標準のheight（）とoffset （）jQueryのメソッドは、引き続き元の値を報告します。

これに対する回避策はありますか？

前もって感謝します。

4

1 に答える 1

6

上記のコメントで述べたように、高さと幅の値はスタイル設定なしの DOM 要素に基づいているため、変更されていません。ただし、offset() メソッドが変換された要素 (Chrome 23 および Firefox 16 OSX) から正しい値を返すことに気付きました。

解決策を提供するために、傾斜や回転などの 2D 変換の場合、変換の基本的な計算を行い、次の関数は要素の変換行列に基づいて幅と高さの値を返します。これは、私が試したすべての2d変換、回転/スキュー、および2つの組み合わせで機能しました（繰り返しますが、Chrome 23およびFirefox 16 OSXで）。

function getBoundingBox(element){
    // Get the transformation matrix as a string
    var tm = element.css('transform');

    // Transform the string to an array
    var regexp = /-?\d+[\.\d]*/g;
    tm = tm.match(regexp);

    // Get the size of the object and calculate the bounding box
    var h = element.height();
    var w = element.width();
    var th = Math.abs(h * tm[0]) + Math.abs(w * tm[1]);
    var tw = Math.abs(h * tm[2]) + Math.abs(w * tm[3]);

    return {'height':th,'width':tw}
}

境界ボックスと計算に関する詳細情報と説明

于 2012-11-20T00:10:03.230 に答える