Zasadniczo zadaję to pytanie w JavaScript:Oblicz współrzędne obwiedni z obróconego prostokąta

W tym przypadku:

iX = Szerokość obróconego (niebieskiego) elementu HTMLiY = Wysokość obróconego (niebieskiego) elementu HTMLbx = szerokość obwiedni (czerwona)o = wysokość obwiedni (czerwona)x = X współrzędnych Bounding Box (czerwony)y = Y współrzędna obwiedni (czerwona)iAngle / t = Kąt obrotu elementu HTML (niebieski; nie pokazany, ale użyty w poniższym kodzie), FYI: w tym przykładzie jest 37 stopni (nie ma to znaczenia dla przykładu)

Jak obliczyć X, Y, wysokość i szerokość obwiedni (wszystkie czerwone liczby) otaczającej obrócony element HTML (biorąc pod uwagę jego szerokość, wysokość i kąt obrotu) za pomocą JavaScript? Przyklejony bit do tego będzie polegał na tym, że oryginalne elementy X / Y w obróconym elemencie HTML (niebieskie pole) zostaną użyte jako przesunięcie (nie jest to przedstawione w poniższym kodzie). Może to musi wyglądaćPochodzenie transformacji CSS3 aby określić punkt środkowy.

Mam częściowe rozwiązanie, ale obliczenia X / Y nie działają prawidłowo ...

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

Czuję się tak blisko, a jednak jak dotąd ...

Wielkie dzięki za wszelką pomoc, jaką możesz zapewnić!

ABY POMÓC NIE-JAVASCRIPTEROM ...

Po obróceniu elementu HTML przeglądarka zwraca „transformację macierzy” lub „macierz rotacji”, która wydaje się być następująca:rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); Więcej informacji znajdziesz na tej stronie.

Mam wrażenie, że oświeci nas to, jak uzyskać X, Y obwiedni (czerwony) wyłącznie w oparciu o szerokość, wysokość i kąt obróconego elementu (niebieski).

Nowa informacja

Humm ... ciekawe ...

Każda przeglądarka radzi sobie z rotacją inaczej niż z perspektywy X / Y! FF ignoruje go całkowicie, IE & Opera rysuje obwiednię (ale jej właściwości nie są widoczne, tj .: bx i by), a Chrome i Safari obracają prostokąt! Wszyscy poprawnie raportują X / Y z wyjątkiem FF. Więc ... wydaje się, że problem X / Y istnieje tylko dla FF! Jak bardzo dziwnie!

Warto też zauważyć, że wygląda na to$(document).ready(function () {...}); odpala za wcześnie, aby obrócone X / Y zostały rozpoznane (co było częścią mojego pierwotnego problemu!). Obracam elementy bezpośrednio przed wywołaniem zapytania X / Y$(document).ready(function () {...}); ale nie wydają się aktualizować do jakiegoś czasu po (!?).

Kiedy dostanę trochę więcej czasu, podrzucę przykład jFiddle, ale używam zmodyfikowanej formy „jquery-css-transform.js”, więc mam trochę majsterkowania przed jFiddle ...

Więc ... co słychać, FireFox? To nie jest fajne, stary!

The Plot Thickens ...

Cóż, FF12 wydaje się rozwiązywać problem z FF11, a teraz działa jak IE i Opera. Ale teraz wracam do kwadratu z X / Y, ale przynajmniej myślę, że teraz wiem dlaczego ...

Wydaje się, że mimo iż X / Y jest poprawnie zgłaszane przez przeglądarki dla obróconego obiektu, „duch” X / Y nadal istnieje w wersji nieobróconej. Wydaje się, że jest to kolejność operacji:

Zaczynając od nieobróconego elementu przy X, Y 20,20Obróć wspomniany element, co spowoduje raportowanie X, Y jako 15.3Przenieś ten element przez JavaScript / CSS do X, Y 10,10Przeglądarka logicznie usuwa element z powrotem do 20,20, przesuwa się do 10,10, a następnie ponownie obraca, co daje X, Y 5,25

Więc ... Chcę, aby element skończył się po 10,10 po obrocie, ale dzięki temu, że element jest (pozornie) ponownie obrócony po ruchu, wynikowy X, Y różni się od zestawu X, Y.

To jest mój problem! Tak więc naprawdę potrzebuję funkcji, aby pobrać pożądane docelowe współrzędne (10,10) i pracować tam wstecz, aby uzyskać początkowe X, Y, które spowodują obrócenie elementu na 10,10. Przynajmniej wiem, jaki jest teraz mój problem, ponieważ dzięki wewnętrznym działaniom przeglądarek wydaje się, że z obróconym elementem 10 = 5!