Básicamente estoy haciendo esta pregunta por JavaScript:Calcular las coordenadas del cuadro delimitador de un rectángulo girado

En este caso:

iX = Ancho del elemento HTML girado (azul)iY = Altura del elemento HTML girado (azul)bx = Ancho del cuadro delimitador (rojo)por = Altura de la caja delimitadora (rojo)x = X coord del cuadro delimitador (rojo)y = Y coordenada del cuadro delimitador (rojo)iAngle / t = Ángulo de rotación del elemento HTML (azul; no se muestra pero se usa en el código a continuación), FYI: En este ejemplo, es 37 grados (no es que importe para el ejemplo)

¿Cómo se calcula la X, Y, la Altura y la Anchura de un cuadro delimitador (todos los números rojos) que rodean un elemento HTML rotado (dada su anchura, altura y Ángulo de rotación) a través de JavaScript? Un poco pegajoso a esto será conseguir que los acordes X / Y originales del elemento HTML girado (caja azul) se utilicen como compensación de alguna manera (esto no está representado en el código a continuación). Esto puede tener que mirarOrigen transformado de CSS3 para determinar el punto central.

Tengo una solución parcial, pero el cálculo de los acordes X / Y no funciona correctamente ...

<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>

Siento que estoy tan cerca, y sin embargo tan lejos ...

Muchas gracias por cualquier ayuda que pueda proporcionar!

PARA AYUDAR A LOS NO JAVASCRIPTERS ...

Una vez que se gira el elemento HTML, el navegador devuelve una "transformada de matriz" o "matriz de rotación" que parece ser esto:rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); Para más información, mira esta página.

Tengo la sensación de que esto nos iluminará sobre cómo obtener la X, Y del cuadro delimitador (rojo) basándose únicamente en el ancho, la altura y el ángulo del elemento girado (azul).

Nueva informacion

Humm ... interesante ...

¡Cada navegador parece manejar la rotación de manera diferente desde una perspectiva X / Y! FF lo ignora por completo, IE y Opera dibujan el cuadro delimitador (pero sus propiedades no están expuestas, es decir, bx & by) y Chrome y Safari giran el rectángulo. Todos están reportando correctamente el X / Y excepto FF. Entonces ... ¡el problema de X / Y parece existir solo para FF! ¡Qué extraño!

También de nota, parece que$(document).ready(function () {...}); se dispara demasiado pronto para que se reconozca el X / Y rotado (¡que era parte de mi problema original!). Estoy rotando los elementos directamente antes de las llamadas de interrogación X / Y en$(document).ready(function () {...}); pero parece que no se actualizan hasta algún tiempo después de (!?).

Cuando tenga un poco más de tiempo, lanzaré un jFiddle con el ejemplo, pero estoy usando una forma modificada de "jquery-css-transform.js", así que tengo un poco de retoques antes del jFiddle ...

Entonces ... ¿qué pasa, FireFox? Eso no está bien, hombre!

La trama se complica...

Bueno, FF12 parece solucionar el problema con FF11, y ahora actúa como IE y Opera. Pero ahora estoy de vuelta al punto uno con el X / Y, pero al menos creo que sé por qué ahora ...

Parece que a pesar de que el X / Y está siendo informado correctamente por los navegadores para el objeto girado, todavía existe un X / Y "fantasma" en la versión sin girar. Parece que este es el orden de las operaciones:

Comenzando con un elemento sin girar en una X, Y de 20,20Gire dicho elemento, lo que resulta en el informe de X, Y como 15,35Mover dicho elemento a través de JavaScript / CSS a X, Y 10,10El navegador lógicamente des-gira el elemento de nuevo a 20,20, se mueve a 10,10 y luego vuelve a girar, dando como resultado una X, Y de 5,25

Así que ... quiero que el elemento termine en 10,10 post rotación, pero gracias al hecho de que el elemento está (aparentemente) girado después del movimiento, el X, Y resultante difiere del conjunto X, Y.

¡Este es mi problema! Entonces, lo que realmente necesito es una función para tomar los acordes de destino deseados (10,10), y trabajar hacia atrás desde allí para obtener los acordes de X, Y iniciales que resultarán en la rotación del elemento en 10,10. ¡Al menos ahora sé cuál es mi problema, ya que, gracias al funcionamiento interno de los navegadores, parece que con un elemento rotado 10 = 5!