計算邊界框的X，Y，高度和寬度的旋轉元件的

Question

基本上我問了JavaScript的這個問題：Calculate Bounding box coordinates from a rotated rectangle

在這種情況下：

• iX =旋轉（藍色）HTML元素的寬度
• iY =旋轉（藍色）HTML元素的高度
• bx = Boundin的寬度克盒（紅色）
• 通過=包圍盒（紅色）的高度
• X = X包圍盒（紅色）的座標
• Y =包圍盒（紅色）Y的座標
• iAngle/T = HTML元素的旋轉角度（藍色;沒有顯示，但在下面的代碼使用 ），僅供參考：這是37度，在這個例子中（這不是問題的例子）

如何計算邊界框的X，Y，高度和寬度（所有的紅色數字）圍繞一個旋轉的HTML元素（給定其寬度，高度和旋轉角度）通過JavaScript？對此的一個粘性將獲得旋轉的HTML元素（藍色框）的原始X/Y座標以某種方式用作偏移量（這在下面的代碼中未被表示）。這可能要看CSS3's transform-origin來確定中心點。

我已經得到了部分解決方案，但是X/Y COORDS的計算是不正常...

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) 
    } 
}; 

我覺得像我這麼近，又那麼遠...

非常感謝您提供的任何幫助！

幫助NON-JAVASCRIPTERS ...

一旦HTML元件旋轉時，瀏覽器將返回一個「矩陣變換」或「旋轉矩陣」，這似乎是這樣的：rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);See this page for more info。

我有一種感覺，這將啓發我們如何根據旋轉元素的寬度，高度和角度（藍色）獲得邊界框（紅色）的X，Y。

新信息

姆......有趣......

每個瀏覽器似乎從X/Y的角度不同的方式處理轉動！ FF完全忽略它，IE & Opera繪製邊框（但其屬性未曝光，即：bx & by）和Chrome & Safari旋轉矩形！所有正確報告除FF外的X/Y。所以...... X/Y問題似乎只存在於FF！多奇怪！

另外值得注意的是，似乎$(document).ready(function() {...});爲旋轉的X/Y被識別（這是我原來的問題的一部分！）太早了。我在$(document).ready(function() {...});之前直接在X/Y詢問呼叫之前輪換元素，但直到（!?）之後的一段時間才似乎更新。

當我多花一點時間時，我會拋出一個jFiddle的例子，但我使用了一種「jquery-css-transform.js」的修改形式，所以我在修改之前有一點修補jFiddle ...

那麼...怎麼了，FireFox？這不太酷，男人！

情節變得...

好，FF12似乎與FF11解決這個問題，現在的行爲像IE和Opera。但現在我回到原來的X/Y，但至少我想我知道爲什麼現在...

看來，即使瀏覽器正確地報告了X/Y旋轉對象，未旋轉的版本中仍然存在「鬼影」X/Y。它好像這是操作順序：在X與非旋轉的元素開始

• 的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），並從那裏開始向後運行，以獲取起始X，Y座標，這將導致該座標旋轉到10,10。至少我知道我現在的問題是什麼，因爲感謝瀏覽器的內部工作原理，它看起來像是旋轉元素10 = 5！

Answer 1

將四個角從中心轉成矢量，旋轉它們，並從中獲取新的最小/最大寬度/高度。

編輯：

我看到你現在遇到的問題。當你需要做這些計算時，你正在使用整個邊進行計算，其中的旋轉中心偏移量爲。是的，這導致四個輪換點（奇怪的是，它與您開始的點數完全相同）。在他們之間會有一個最小X，一個最大X，一個最小Y和一個最大Y.這些都是你的界限。

Answer 2

您是否嘗試過使用getBoundingClientRect（）？

該方法返回的電流值的對象「底部，高度，左，右，上，寬度爲」考慮輪換

Answer 3

我知道這是有點晚了，但我已經寫了小提琴正是這個問題，一個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); 

乾杯