Basicamente eu estou fazendo esta pergunta para JavaScript:Calcular coordenadas da caixa delimitadora a partir de um retângulo girado

Nesse caso:

iX = Largura do elemento HTML girado (azul)iY = Altura do elemento HTML girado (azul)bx = largura da caixa delimitadora (vermelho)por = altura da caixa delimitadora (vermelho)x = X coord de Caixa Delimitadora (vermelho)y = Y coord da caixa delimitadora (vermelho)iAngle / t = Ângulo de rotação do elemento HTML (azul; não mostrado, mas usado no código abaixo), FYI: são 37 graus neste exemplo (não que isso importe para o exemplo)

Como calcular o X, Y, Altura e Largura de uma caixa delimitadora (todos os números vermelhos) em torno de um elemento HTML rotacionado (dada sua largura, altura e ângulo de rotação) via JavaScript? Um pouco pegajoso será obter as coordenadas X / Y originais do elemento HTML rotacionado (caixa azul) para usar como um deslocamento de alguma forma (isso não está representado no código abaixo). Isso pode muito bem ter que olharOrigem de transformação do CSS3 para determinar o ponto central.

Eu tenho uma solução parcial, mas o cálculo das coordenadas X / Y não está funcionando corretamente ...

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

Eu sinto que estou tão perto e tão longe ...

Muito obrigado por qualquer ajuda que você possa fornecer!

PARA AJUDAR OS NÃO-JAVASCRIPTERS ...

Depois que o elemento HTML é girado, o navegador retorna uma "transformação de matriz" ou "matriz de rotação", que parece ser esta:rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); Veja esta página para mais informações.

Tenho a sensação de que isso nos iluminará sobre como obter o X, Y da caixa delimitadora (vermelho) com base apenas na Largura, Altura e Ângulo do elemento girado (azul).

Informação nova

Humm ... interessante ...

Cada navegador parece lidar com a rotação de maneira diferente de uma perspectiva X / Y! FF o ignora completamente, o IE e o Opera desenham a caixa delimitadora (mas suas propriedades não são expostas, por exemplo: bx & by) e o Chrome & Safari gira o retângulo! Todos estão relatando corretamente o X / Y, exceto FF. Então ... a questão X / Y parece existir apenas para o FF! Que estranho!

Também digno de nota, parece que$(document).ready(function () {...}); dispara muito cedo para que o X / Y girado seja reconhecido (o que era parte do meu problema original!). Eu estou girando os elementos diretamente antes do interrogatório X / Y chamar$(document).ready(function () {...}); mas eles não parecem atualizar até algum tempo depois (!?).

Quando eu tiver um pouco mais de tempo, vou jogar um jFiddle com o exemplo, mas estou usando uma forma modificada de "jquery-css-transform.js", então eu tenho um pouquinho de ajustes antes do jFiddle ...

Então ... e aí, FireFox? Isso não é legal, cara!

O lote engrossa ...

Bem, o FF12 parece corrigir o problema com o FF11, e agora funciona como o IE e o Opera. Mas agora estou de volta à estaca zero com o X / Y, mas pelo menos acho que sei porque agora ...

Parece que, embora o X / Y esteja sendo relatado corretamente pelos navegadores para o objeto rotacionado, um X / Y "fantasma" ainda existe na versão não girada. Parece que esta é a ordem das operações:

Começando com um elemento não girado em um X, Y de 20,20Rodar o dito elemento, resultando no relatório de X, Y como 15,35Mover o dito elemento via JavaScript / CSS para X, Y 10,10O navegador desenrola logicamente o elemento de volta para 20,20, move-se para 10,10 e, em seguida, gira novamente, resultando em um X, Y de 5,25

Então ... Eu quero que o elemento termine em 10,10 pós-rotação, mas graças ao fato de que o elemento é (aparentemente) revertido após o movimento, o resultado X, Y é diferente do conjunto X, Y.

Esse é meu problema! Então, o que eu realmente preciso é de uma função para tomar as coordenadas de destino desejadas (10,10), e trabalhar para trás a partir daí para obter as coordenadas X, Y iniciais que resultarão no elemento sendo girado em 10,10. Pelo menos eu sei qual é o meu problema agora, pois graças ao funcionamento interno dos navegadores, parece com um elemento rotacionado 10 = 5!