26

基本的に、私は JavaScript に対してこの質問をしています:回転した四角形からバウンディング ボックスの座標を計算します。

ダイアグラム

この場合：

  • iX = 回転した (青) HTML 要素の幅
  • iY = 回転した (青) HTML 要素の高さ
  • bx = バウンディング ボックスの幅 (赤)
  • by = バウンディング ボックスの高さ (赤)
  • x = バウンディング ボックスの X 座標 (赤)
  • y = バウンディング ボックスの Y 座標 (赤)
  • iAngle/t = HTML 要素の回転角度 (青色。表示されていませんが、以下のコードで使用されています)、参考までに: この例では 37 度です (この例では重要ではありません)。

回転した HTML 要素を囲むバウンディング ボックス (すべて赤い数字) の X、Y、高さ、幅を JavaScript で計算するにはどうすればよいでしょうか? これに対するスティッキー ビットは、回転された HTML 要素 (青いボックス) の元の X/Y 座標を取得して、何らかのオフセットとして使用することです (これは、以下のコードには示されていません)。これは、中心点を決定するためにCSS3 の transform-originを調べる必要があるかもしれません。

部分的な解決策が得られましたが、X/Y 座標の計算が正しく機能していません...

var boundingBox = function (iX, iY, iAngle) {
    var x, y, bx, by, t;

    //# Allow for negetive iAngle's that rotate counter clockwise while always ensuring iAngle's < 360
    t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360);

    //# Calculate the width (bx) and height (by) of the .boundingBox
    //#     NOTE: See https://stackoverflow.com/questions/3231176/how-to-get-size-of-a-rotated-rectangle
    bx = (iX * Math.sin(iAngle) + iY * Math.cos(iAngle));
    by = (iX * Math.cos(iAngle) + iY * Math.sin(iAngle));

    //# This part is wrong, as it's re-calculating the iX/iY of the rotated element (blue)
    //# we want the x/y of the bounding box (red)
    //#     NOTE: See https://stackoverflow.com/questions/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates
    x = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (bx * Math.cos(t) - by * Math.sin(t));
    y = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (-bx * Math.sin(t) + by * Math.cos(t));

    //# Return an object to the caller representing the x/y and width/height of the calculated .boundingBox
    return {
        x: parseInt(x), width: parseInt(bx),
        y: parseInt(y), height: parseInt(by)
    }
};

近くにいるような気がするのに、まだ遠い…

あなたが提供できるどんな助けにも感謝します!

非 JavaSCRIPTERS を支援するには...

HTML 要素が回転されると、ブラウザは次のように見える「行列変換」または「回転行列」を返します。rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); 詳細については、このページを参照してください。

回転した要素 (青) の幅、高さ、および角度のみに基づいてバウンディング ボックス (赤) の X、Y を取得する方法について、これは私たちを啓発するだろうと感じています。

新しい情報

うーん...面白い...

ここに画像の説明を入力

各ブラウザは、X/Y の観点から異なる方法で回転を処理しているようです! FF はそれを完全に無視し、IE と Opera はバウンディング ボックスを描画し (ただし、そのプロパティは公開されません。つまり、bx & by)、Chrome と Safari は四角形を回転させます! FF を除くすべてが X/Y を適切に報告しています。つまり... X/Y の問題は FF のみに存在するようです! とても奇妙です！

また$(document).ready(function () {...});、回転したX / Yが認識されるには早すぎるようです（これは私の元の問題の一部でした！）。X/Y インテロゲーションが呼び出される直前に要素を回転させています$(document).ready(function () {...});が、しばらくしてから (!?) まで更新されないようです。

もう少し時間があれば、この例で jFiddle を使用しますが、「jquery-css-transform.js」の変更された形式を使用しているため、jFiddle の前に少し手を加える必要があります...

それで...どうした、FireFox？かっこよくないよ、男！

プロットは厚くなります...

FF12 は FF11 の問題を修正したようで、IE や Opera のように動作します。しかし、今は X/Y で振り出しに戻っていますが、少なくとも理由はわかっていると思います...

回転したオブジェクトの X/Y がブラウザによって正しく報告されていても、回転していないバージョンには「ゴースト」X/Y がまだ存在しているようです。これは操作の順序のようです。

  • X、Y が 20,20 の回転されていない要素から開始
  • 上記の要素を回転すると、X、Y が 15,35 と報告されます
  • 上記の要素を JavaScript/CSS 経由で X,Y 10,10 に移動します
  • ブラウザーは論理的に要素を 20,20 に戻し、10,10 に移動してから再回転し、X,Y は 5,25 になります。

だから...私は要素が10,10のポストローテーションで終わることを望んでいますが、要素が（一見）再回転されたポストムーブであるという事実のおかげで、結果のX、YはセットX、Yとは異なります。

これは私の問題です！したがって、私が本当に必要としているのは、目的の宛先座標 (10,10) を取得し、そこから逆方向に作業して、要素が 10,10 に回転する開始 X、Y 座標を取得する関数です。ブラウザの内部動作のおかげで、要素が 10=5 回転したように見えるので、少なくとも私の問題が何であるかはわかっています。

4

4 に答える 4

20

これが少し遅れていることはわかっていますが、HTML5キャンバスで、まさにこの問題に対するフィドルを書きました:

http://jsfiddle.net/oscarpalacious/ZdQKg/

誰かがそれを役に立つと思うことを願っています!

私は実際にはコンテナの左上隅のx、yを計算していません。オフセットの結果として計算されます (フィドルの例のコード):

this.w = Math.sin(this.angulo) * rotador.h + Math.cos(this.angulo) * rotador.w;
this.h = Math.sin(this.angulo) * rotador.w + Math.cos(this.angulo) * rotador.h;
// The offset on a canvas for the upper left corner (x, y) is
// given by the first two parameters for the rect() method:
contexto.rect(-(this.w/2), -(this.h/2), this.w, this.h);

乾杯

于 2013-07-03T16:49:25.727 に答える
6

getBoundingClientRect()を使用してみましたか?

このメソッドは、回転を考慮して、現在の「下、高さ、左、右、上、幅」の値を持つオブジェクトを返します。

于 2012-08-02T04:41:41.593 に答える